bug: vite 5.3.0 fails ionic build command

[DunhamGitHub]

Describe the bug

running ionic build with vite 5.3.0 gives error, 5.2.11 works.

Reproduction

......

Steps to reproduce

in package.json use vite: "vite": "5.3.0"

sil@SIL-IMAC-CH mxmobile % ionic build
> vite build
vite v5.3.0 building for production...
✓ 71 modules transformed.
x Build failed in 374ms
error during build:
[commonjs--resolver] node_modules/@ionic/core/components/ion-item-sliding.js (53:78): Expected ',', got '('
file: /Users/sil/Local/Weinberg/_code/mxmobile/node_modules/@ionic/core/components/ion-item-sliding.js:53:78

51:         });
52:         await this.updateOptions();
53:         this.gesture = (await import('./index3.js')).createGesture({
                                                                        ^
54:             el,
55:             gestureName: 'item-swipe',

RollupError: Expected ',', got '('
    at getRollupError (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at ParseError.initialise (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
    at convertNode (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
    at convertProgram (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
    at Module.setSource (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/node-entry.js:14246:24)
    at async ModuleLoader.addModuleSource (file:///Users/sil/Local/Weinberg/_code/mxmobile/node_modules/rollup/dist/es/shared/node-entry.js:18892:13)
[ERROR] An error occurred while running subprocess vite.
        
        vite build exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.
sil@SIL-IMAC-CH mxmobile % 

and now with vite 5.2.11

sil@SIL-IMAC-CH mxmobile % ionic build
> vite build
vite v5.2.11 building for production...
✓ 1103 modules transformed.
dist/assets/web-legacy-Dv5WM5Nk.js                 0.38 kB │ gzip:   0.27 kB
dist/assets/status-tap-legacy-BB5Xm_Qf.js          0.60 kB │ gzip:   0.40 kB
dist/assets/swipe-back-legacy-j1_b47wM.js          0.78 kB │ gzip:   0.52 kB
dist/assets/md.transition-legacy-mc4ssSAF.js       1.13 kB │ gzip:   0.62 kB
dist/assets/index9-legacy-BwuAEZsE.js              1.74 kB │ gzip:   0.88 kB
dist/assets/input-shims-legacy-cWoHyAkS.js         4.73 kB │ gzip:   2.08 kB
dist/assets/web-legacy-D1JDicTQ.js                 8.70 kB │ gzip:   2.91 kB
dist/assets/ios.transition-legacy-CWj5cWCJ.js     10.64 kB │ gzip:   3.03 kB
dist/assets/polyfills-legacy-C7qq4mXn.js          66.71 kB │ gzip:  26.81 kB
dist/assets/index-legacy-B6OrpkwG.js             199.19 kB │ gzip:  60.29 kB
dist/assets/xlsx-legacy-bbAQ7zft.js              459.96 kB │ gzip: 149.82 kB
dist/assets/vfs_fonts-legacy-CTS0afYD.js         870.31 kB │ gzip: 427.21 kB
dist/assets/pdfmake-legacy-DjJJWIxI.js         1,175.30 kB │ gzip: 530.75 kB
dist/assets/index-legacy-BjFH0Qow.js           2,040.85 kB │ gzip: 463.19 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
dist/index.html                             2.33 kB │ gzip:   1.03 kB
dist/assets/index-CEdewMNL.css             34.13 kB │ gzip:   5.70 kB
dist/assets/web-CgTZG40O.js                 0.29 kB │ gzip:   0.21 kB
dist/assets/status-tap-D5_DpQQP.js          0.48 kB │ gzip:   0.34 kB
dist/assets/swipe-back-Btt47J0Y.js          0.68 kB │ gzip:   0.47 kB
dist/assets/md.transition-BUov7XLQ.js       1.07 kB │ gzip:   0.57 kB
dist/assets/index9-BSBzLANq.js              1.63 kB │ gzip:   0.83 kB
dist/assets/input-shims-CtaETH8b.js         4.82 kB │ gzip:   2.08 kB
dist/assets/web-DeNFjlLC.js                 8.68 kB │ gzip:   2.96 kB
dist/assets/ios.transition-DxDFfbv7.js     11.21 kB │ gzip:   3.10 kB
dist/assets/index-BxYELR8Z.js             198.77 kB │ gzip:  62.14 kB
dist/assets/xlsx-BP7NNpC4.js              470.76 kB │ gzip: 153.14 kB
dist/assets/vfs_fonts-BbT5ejxm.js         870.24 kB │ gzip: 427.14 kB
dist/assets/pdfmake-UpCaLPvY.js         1,206.83 kB │ gzip: 548.63 kB
dist/assets/index-D30E46v-.js           2,024.71 kB │ gzip: 468.33 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 29.26s
sil@SIL-IMAC-CH mxmobile % 

System Info

System:
    OS: macOS 14.5
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 9.61 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - /usr/local/opt/node@20/bin/node
    npm: 10.5.2 - /usr/local/opt/node@20/bin/npm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-legacy: ^5.0.0 => 5.4.1 
    @vitejs/plugin-react: ^4.0.1 => 4.3.1 
    vite: 5.2.11 => 5.2.11

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

May likely be related to #14221

[eMerzh]

Not sure it's entirely the same, but i got an error at build time too with latest 5.3.0:

error during build:
src/modules/app/routeConfig/Settings/index.ts (7:21): Unexpected token `string literal (, "")`. Expected yield, an identifier, [ or { (Note that you need plugins to import files that are not JavaScript)
file: /home/runner/work/proj/proj/src/modules/app/routeConfig/Settings/index.ts:7:21

5:   name: 'Settings',
6:   path: 'admin',
7:   getComponent: () => import(/* webpackChunkName: "admin" */ './SettingsContainer').then(mod => mod.default),
                         ^
8:   disabled: ['drawer', 'default_header', 'header'],
9:   children: [

RollupError: Unexpected token `string literal (, "")`. Expected yield, an identifier, [ or {
    at getRollupError (file:///home/runner/work/proj/proj/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
    at ParseError.initialise (file:///home/runner/work/proj/proj/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
    at convertNode (file:///home/runner/work/proj/proj/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
    at convertProgram (file:///home/runner/work/proj/proj/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
    at Module.setSource (file:///home/runner/work/proj/proj/node_modules/rollup/dist/es/shared/node-entry.js:14246:24)
    at async ModuleLoader.addModuleSource (file:///home/runner/work/proj/proj/node_modules/rollup/

[cyanzhong]

(Searching recent commits brought me here)

I am not sure if I am hitting exactly the same issue, but I saw a very similar output:

Expected ',', got '[' (Note that you need plugins to import files that are not JavaScript)

The syntax that is broken is from a codemirror package:

LanguageDescription.of({
  name: "Go",
  extensions: ["go"],
  load() {
    return import("@codemirror/lang-go").then(m => m.go())
  }
}),

Full code could be found here: https://github.com/codemirror/language-data/blob/main/src/language-data.ts

[cyanzhong]

More interestingly, if I changed the syntax to something like this:

LanguageDescription.of({
  name: "Go",
  extensions: ["go"],
  load() {
    return import("@codemirror/lang-go").then(m => { return m.go() })
  }
}),

It can build without any problem. However I will then hit a runtime error: ReferenceError: Can't find variable: __VITE_PRELOAD__.

I am not sure if it's related to #14221 or #16562 cc @bluwy just in case you have any insights, thanks.

[bluwy]

@cyanzhong Can you open a new issue with a repro using codemirror? I tested locally and can't bring up any errors.

[cyanzhong]

@bluwy Thank you for your quick response. Yeah I've figured out a bit more info and opened #17478.

The __VITE_PRELOAD__ error is related #16562 but it's a problem of the https://github.com/richardtallent/vite-plugin-singlefile plugin, I've opened a PR there.

Thank you!