dev server error if project root contains node_modules and inline script module in html

[cany748]

Describe the bug

vite dev server does not work correctly if the root folder is in a path containing node_modules. the main problem comes when using <script type="module"> in html.

Reproduction

https://github.com/cany748/vite-server-error

Steps to reproduce

pnpm install
pnpm vite

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i3-10105 CPU @ 3.70GHz
    Memory: 4.66 GB / 15.57 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.local/share/pnpm/node
    npm: 9.5.1 - ~/.local/share/pnpm/npm
    pnpm: 8.6.5 - ~/.local/share/pnpm/pnpm
  npmPackages:
    vite: ^4.4.0 => 4.4.0

Used Package Manager

pnpm

Logs

Click to expand!

root in ~/vite-server-error on main λ pnpm vite --debug 
  vite:config bundled config file loaded in 23.30ms +0ms
  vite:config using resolved config: {
  vite:config   root: '/root/vite-server-error/node_modules/testasd',
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   configFile: '/root/vite-server-error/vite.config.ts',
  vite:config   configFileDependencies: [ '/root/vite-server-error/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   publicDir: '/root/vite-server-error/node_modules/testasd/public',
  vite:config   cacheDir: '/root/vite-server-error/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   plugins: [
  vite:config     'vite:optimized-deps',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   css: undefined,
  vite:config   esbuild: { jsxDev: true },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/root/vite-server-error/node_modules/testasd',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(3) {
  vite:config     'fnpd_/root/vite-server-error' => {
  vite:config       dir: '/root/vite-server-error',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     'fnpd_/root/vite-server-error/node_modules/testasd' => {
  vite:config       dir: '/root/vite-server-error',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     'fnpd_/root/vite-server-error/node_modules' => {
  vite:config       dir: '/root/vite-server-error',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:optimized-deps',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:client-inject',
  vite:config       'vite:import-analysis'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +10ms
  vite:esbuild 25.55ms tsconfck init /root/vite-server-error +0ms
  vite:deps scanning for dependencies... +0ms

  VITE v4.4.0  ready in 213 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
  vite:deps Scan completed in 16.06ms: no dependencies found +0ms
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 31.62ms /index.html +0ms
  vite:resolve 7.99ms /index.html?html-proxy&index=0.js -> /root/vite-server-error/node_modules/testasd/index.html?v=511c6017&html-proxy&index=0.js +0ms
  vite:load 5.63ms [fs] /index.html?html-proxy&index=0.js +0ms
Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .js file format, or if it's an asset, add "**/*.js" to `assetsInclude` in your configuration.
  vite:resolve 1.98ms /@vite/client -> /root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/client/client.mjs +26ms
  vite:load 1.55ms [fs] /@vite/client +22ms
  vite:resolve 1.36ms @vite/env -> /root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +25ms
  vite:import-analysis 14.10ms [1 imports rewritten] /root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/client/client.mjs +0ms
  vite:transform 15.45ms /@vite/client +0ms
  vite:time 33.69ms /@vite/client +58ms
  vite:load 3.35ms [fs] ../.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +26ms
  vite:import-analysis 1.59ms [no imports] /root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +7ms
  vite:transform 2.21ms ../.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +6ms
  vite:load 0.78ms [fs] /index.html?html-proxy&index=0.js +9ms
4:28:45 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .js file format, or if it's an asset, add "**/*.js" to `assetsInclude` in your configuration.
  Plugin: vite:import-analysis
  File: /root/vite-server-error/node_modules/testasd/index.html?v=511c6017&html-proxy&index=0.js:7:28
  5  |      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6  |      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7  |      <title>Vite App</title>
     |                             ^
  8  |    </head>
  9  |    <body>
      at formatError (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:43885:46)
      at TransformContext.error (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:43881:19)
      at TransformContext.transform (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:41637:22)
      at async Object.transform (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:44175:30)
      at async loadAndTransform (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:54810:29)
      at async viteTransformMiddleware (file:///root/vite-server-error/node_modules/.pnpm/vite@4.4.0/node_modules/vite/dist/node/chunks/dep-1d3a4915.js:64191:32)
  vite:time 29.40ms /index.html?html-proxy&index=0.js +36ms
  vite:deps ✨ static imports crawl ended +19s
  vite:deps ✨ no dependencies found by the scanner or crawling static imports +0ms
  vite:cache [304] ../.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +0ms
  vite:time 0.44ms ../.pnpm/vite@4.4.0/node_modules/vite/dist/client/env.mjs +191ms

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.

[hai-x]

Glad to answer your questions.

First, you will get one warning ->

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

It's becasue your html rootFile is in node_modules which computing entry will ignore there.

vite/packages/vite/src/node/optimizer/scan.ts

Line 252 in 06e4f57

'**/node_modules/**',

Then, when open browser, you will get one error ->

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .js file format, or if it's an asset, add "**/*.js" to assetsInclude in your configuration.

It's because the module script node in html is transformed to <script type="module" src="/index.html?html-proxy&index=0.js"></script>.

Then trigger request, but loadResult is still /index.html file content which leads to parse error byes-module-lexer.

vite/packages/vite/src/node/plugins/importAnalysis.ts

Line 226 in 06e4f57

;[imports, exports] = parseImports(source)

I recommend that use <script type="module" src="./main.js"></script> instead of <script type="module">import "./main"</script>

I just tried it, and it work. Not sure if I misunderstood you, but I hope this can help you.

[bluwy]

Similar #5042 and #13782. Vite does not work correctly if your project is inside node_modules. We're doing checks for node_modules to know if a path is a dependency. Your setup would signal to Vite that every file is part of some dependency.