-
-
Notifications
You must be signed in to change notification settings - Fork 6.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Import error in the browser and blank page in some templates (subst) #4302
Comments
Can't reproduce. What's the actual project like? |
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-vue for example (I did not add anything more) |
I have this in import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/HelloWorld.vue");import __vite__cjsImport0_vue from "/node_modules/.vite/vue.js?v=37506fec"; const reactive = __vite__cjsImport0_vue["reactive"]
const _sfc_main = {
props: {
msg: String
},
setup(__props, { expose }) {
expose()
const state = reactive({ count: 0 })
const __returned__ = { state, reactive }
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
return __returned__
}
}
import __vite__cjsImport1_vue from "/node_modules/.vite/vue.js?v=37506fec"; const _toDisplayString = __vite__cjsImport1_vue["toDisplayString"]; const _createVNode = __vite__cjsImport1_vue["createVNode"]; const _createTextVNode = __vite__cjsImport1_vue["createTextVNode"]; const _Fragment = __vite__cjsImport1_vue["Fragment"]; const _openBlock = __vite__cjsImport1_vue["openBlock"]; const _createBlock = __vite__cjsImport1_vue["createBlock"]; const _withScopeId = __vite__cjsImport1_vue["withScopeId"]; const _pushScopeId = __vite__cjsImport1_vue["pushScopeId"]; const _popScopeId = __vite__cjsImport1_vue["popScopeId"]
const _withId = /*#__PURE__*/_withScopeId("data-v-469af010")
_pushScopeId("data-v-469af010") |
Okay. I'll check it in Windows tomorrow. The logic is in vite/packages/vite/src/node/optimizer/index.ts Lines 319 to 356 in e47a6f2
I don't see anything wrong and can't reproduce the issue in macOS. So I'll check later in Windows. |
And please, I need the generated project with lockfiles. |
The error was caused by output which was relative to something (../../../me/workspace/vite-experiments/vue/node_modules/.vite/vue.js ).
|
But how does that happen? Why isn't the output path the same as the actual cache path? |
I don't know, it's from ESBuild. |
I still can't reproduce this issue. So please provide a full reproduction. |
As I said above, I did nothing more than use the template above. I just did npm init vite vue -t vue
cd vue
npm install
# add "type": "module" in package.json, then
npm run dev |
|
(For the 2 vs vue, i renamed the folder yesterday.)
2 and vue are the same project. I didn't use |
Besides, I don't know if it changes. But |
Yes. And I think that's the problem. |
Reproduction(CMD) :: go to a folder that has no symlinked parents
mkdir something
:: the name is not important
mklink /j something-junction something
cd something
npm init -y vite vite-project -- -t vue
:: ^ or preact or lit element template
cd vite-project
npm install
:: this should work without errors
npm run dev
cd ..\..
cd something-junction\vite-project
:: observe error
npm run dev The first error is (#4293): failed to load config from D:\dev\jonction\vite-project\vite.config.js
error when starting dev server:
D:\dev\basedir\vite-project\vite.config.js:1
import { defineConfig } from 'vite'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1025:15)
at Module._compile (node:internal/modules/cjs/loader:1059:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
at Object.require.extensions.<computed> [as .js] (D:\dev\basedir\vite-project\node_modules\vite\dist\node\chunks\dep-11db14da.js:75452:13)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:816:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:93:18)
at loadConfigFromBundledFile (D:\dev\basedir\vite-project\node_modules\vite\dist\node\chunks\dep-11db14da.js:75457:17) (jonction is a junction of basedir). You can fix this by adding This is also reproducible when you scaffold the project directly in the junction (start in |
This is currently a so specific use case that I think you should manually add it after the initialization of the project I would currently vote for closing this PR |
I agree, but this (enabling ESM manually) is obviously not the solution (as shown above, it is not enough). |
I encountered this problem today too in a folder junction pointing from It works when running the dev server / building from terminal when in Other apps are sensitive to their launch parameters paths (vscode for example) so it would be nice if vite worked together with vscode in these circumstances. Symbolic links are not that uncommon after all. |
Closing this in favour of #10802 which existing Windows linking issues are directed to. |
Describe the bug
When I scaffold a new Vue or Preact project with
create-vite@631a9bf
, and then runnpm run dev
(after installing the dependencies), I get theUncaught SyntaxError: import not found: default
in Firefox, and a blank page.I can reproduce this with CJS and ESM (without and with TypeScript). But also with
create-vite@2.5.1
, except that you have to remember to add"type": "module"
in thepackage.json
, or transform the imports and exports invite.config.js
into CJS.I can also reproduce this bug with Edge:
Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=620176f5' does not provide an export named 'default'
(same error).I specify that the normal and TypeScript versions of React, Svelte templates work correctly.
Nevertheless, the problem seems to disappear, when the project is built:
vite build && vite preview
, the template works, there are no errors, and the page is not blank (for Vue & Preact).Vue template (blank page & error)
Preact template (blank page & error)
(With
preact()
->preact.default()
, because it doesn't work without.)Lit Element template (error)
Refs: #4293 (comment)
Reproduction
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-vue
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-vue-ts
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-preact
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-preact-ts
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-lit-element
https://github.com/Mesteery/vite/tree/templates/enable-esm/packages/create-vite/template-lit-element-ts
System Info
Used Package Manager
npm
Logs
With Vue template:
Validations
Edit: sorry for all the edits, but GitHub strangely removes some changes on a new edit (cf. edit history).
I take the opportunity to ask a question: is it normal that
vite build
in the Lit Element template, generates onlydist/X.es.js
?The text was updated successfully, but these errors were encountered: