Closed vladitasev closed 2 years ago
Bug in esbuild json loader. It shouldn't export these top-level properties that aren't valid js identifiers.
Reported at https://github.com/evanw/esbuild/issues/1598
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.
Got it. Thanks for the information.
I think we are now pending es-module-lexer
's support for this syntax: https://github.com/guybedford/es-module-lexer/issues/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: https://github.com/guybedford/cjs-module-lexer/compare/1.1.1...1.2.1
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!
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 fornpm run dev
.Reproduction
Create an empty project with the vanilla template:
npm init vite@latest my-test-app -- --template vanilla
npm i
Add
@ui5/webcomponents
as a dependencynpm i @ui5/webcomponents
Import the following 2 modules in the
main.js
file:Use the web component in the
index.html
file, right after the body tag: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
Used Package Manager
npm
Logs
Validations