Error in dev mode only (works in prod) with json import

[vladitasev]

Describe the bug

Hello, I am part of the UI5 Web Components team (https://sap.github.io/ui5-webcomponents/) and we're recommending vitejs as the to-go bundler for people looking to start using our web components. However, one of our demo apps fails in dev mode when we try to demonstrate the usage of our .json-based assets (in this case CLDR data).

After importing a .json file I get the following error:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

This works perfectly fine in prod mode (npm run build), and only occurs for npm run dev.

Reproduction

1. Create an empty project with the vanilla template:
   npm init vite@latest my-test-app -- --template vanilla
npm i

2. Add @ui5/webcomponents as a dependency
   npm i @ui5/webcomponents

3. Import the following 2 modules in the main.js file:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents/dist/DatePicker.js";

4. Use the web component in the index.html file, right after the body tag:

<ui5-date-picker></ui5-date-picker>

5. Finally run the project in dev mode:
   npm run dev

You will get the "Invalid JS syntax" error.

Now run the project in prod mode
npm run build
npm run serve
This works well and you can see the date picker on your page.

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Apple M1
    Memory: 36.10 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Safari: 14.1.2
  npmPackages:
    vite: ^2.5.4 => 2.5.6

Used Package Manager

npm

Logs

Plugin: vite:import-analysis
  File: /Users/i313163/SAPDevelop/demo/vite-bug/node_modules/.vite/en_GB-KE4YER4S.js?v=2513426e
  5031|    __license,
  5032|    __version,
  5033|    ca_buddhist as "ca-buddhist",
     |                      ^
  5034|    ca_gregorian as "ca-gregorian",
  5035|    ca_islamic as "ca-islamic",
      at formatError (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:50143:46)
      at TransformContext.error (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:50139:19)
      at TransformContext.transform (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:75829:22)
      at async Object.transform (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:50353:30)
      at async transformRequest (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:65248:29)
      at async viteTransformMiddleware (/Users/i313163/SAPDevelop/demo/vite-bug/node_modules/vite/dist/node/chunks/dep-9f74b403.js:65376:32) (x2)

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 https://github.com/vuejs/vue-next 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.

[sodatea]

Bug in esbuild json loader. It shouldn't export these top-level properties that aren't valid js identifiers.

[sodatea]

Reported at evanw/esbuild#1598

[evanw]

This is not a problem with esbuild because the output is valid JavaScript. It's just using the new arbitrary module namespace identifier names syntax feature (supported in recent versions of Chrome, Firefox, Safari, and Node). You need to set esbuild's target setting correctly if you need to support older JavaScript VMs that can't parse newer syntax. Then esbuild won't generate these exports. Either that or Vite's import analysis pass needs to be updated to support this new import/export syntax.

[sodatea]

Got it. Thanks for the information.

I think we are now pending es-module-lexer's support for this syntax: guybedford/es-module-lexer#67

If anyone's interested in implementing this feature, you can take the corresponding commits to support string exports in cjs-module-lexer as a reference: nodejs/cjs-module-lexer@1.1.1...1.2.1

[github-actions]

Hello @vladitasev. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!