lazy imported modules are not bundled correctly on building #4840

JounQin · 2021-09-04T04:04:25Z

Describe the bug

The following pattern runs very well on development:

const [data, error] = usePromise(() =>
  Promise.all([
    Promise.any([
      import(
        `../../../node_modules/prismjs/themes/prism-${theme}.css`
      ) as Promise<unknown>,
      import(
        `../../../node_modules/prism-themes/themes/prism-${theme}.css`
      ) as Promise<unknown>,
    ]),
    import(
      `../../../node_modules/prismjs/components/prism-${
        lang === 'js' ? 'javascript' : lang
      }.min.js`
    ) as Promise<unknown>,
  ]),
)

But it seems not been bundled at all on building, confirmed with build.rollupOptions.manualChunks

Reproduction

https://github.com/JounQin/test/tree/repro/vite_public_path

yarn dev works fine

yarn build && yarn serve does not work

And there is no prism related chunk in dist/assets

In my true app (it's a bit huge for a reproduction), they are bundled as prism.*.js chunks correctly, but the public path seems broken

System Info

System:
    OS: macOS 12.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 24.68 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.5 - ~/.nvm/versions/node/v12.22.5/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v12.22.5/bin/npm
  npmPackages:
    vite: ^2.5.3 => 2.5.3

Used Package Manager

yarn

Logs

$ vite build --debug
  vite:config bundled config file loaded in 121ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:react-jsx',
  vite:config     'react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'asset-import-meta-url',
  vite:config     'vite:style-import',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'load-fallback'
  vite:config   ],
  vite:config   server: { open: true, fs: { strict: undefined, allow: [Array] } },
  vite:config   css: { preprocessorOptions: { less: [Object] } },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { output: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   configFile: '/Users/JounQin/Workspaces/Local/test/vite.config.ts',
  vite:config   configFileDependencies: [ '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     build: {}
  vite:config   },
  vite:config   root: '/Users/JounQin/Workspaces/Local/test',
  vite:config   base: '/',
  vite:config   publicDir: '/Users/JounQin/Workspaces/Local/test/public',
  vite:config   cacheDir: '/Users/JounQin/Workspaces/Local/test/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +11ms
vite v2.5.3 building for production...
transforming (268) node_modules/rc-tooltip/es/index.js  vite:resolve 0ms   ./themes/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/themes/index.less +0ms
  vite:resolve 0ms   ./core/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/index.less +0ms
  vite:resolve 1ms   ./default.less -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/themes/default.less +3ms
  vite:resolve 1ms   ../mixins/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/index.less +0ms
  vite:resolve 1ms   base -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/base.less +0ms
  vite:resolve 1ms   global -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/global.less +0ms
  vite:resolve 1ms   iconfont -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/iconfont.less +0ms
  vite:resolve 1ms   motion -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion.less +0ms
  vite:resolve 9ms   ../color/colors -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/color/colors.less +34ms
  vite:resolve 8ms   size -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/size.less +0ms
  vite:resolve 8ms   compatibility -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/compatibility.less +0ms
  vite:resolve 8ms   clearfix -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/clearfix.less +0ms
  vite:resolve 8ms   iconfont -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/iconfont.less +0ms
  vite:resolve 8ms   motion -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/motion.less +0ms
  vite:resolve 8ms   reset -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/reset.less +0ms
  vite:resolve 8ms   operation-unit -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/operation-unit.less +0ms
  vite:resolve 8ms   typography -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/typography.less +0ms
  vite:resolve 8ms   customize -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/customize.less +0ms
  vite:resolve 8ms   box -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/box.less +0ms
  vite:resolve 8ms   modal-mask -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/modal-mask.less +0ms
  vite:resolve 2ms   ../themes/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/themes/index.less +0ms
  vite:resolve 3ms   ../mixins/iconfont -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/iconfont.less +1ms
  vite:resolve 3ms   ../mixins/motion -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/motion.less +0ms
  vite:resolve 3ms   motion/fade -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion/fade.less +0ms
  vite:resolve 3ms   motion/move -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion/move.less +0ms
  vite:resolve 3ms   motion/other -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion/other.less +0ms
  vite:resolve 3ms   motion/slide -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion/slide.less +0ms
  vite:resolve 3ms   motion/zoom -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/core/motion/zoom.less +0ms
  vite:resolve 14ms  colorPalette -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/color/colorPalette.less +22ms
  vite:resolve 12ms  ../../style/themes/default -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/themes/default.less +0ms
  vite:resolve 0ms   bezierEasing -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/color/bezierEasing.less +2ms
  vite:resolve 0ms   tinyColor -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/color/tinyColor.less +0ms
  vite:resolve 0ms   ../../style/themes/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/themes/index.less +201ms
  vite:resolve 1ms   ../../style/mixins/index -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/style/mixins/index.less +1ms
  vite:resolve 1ms   ./mixin -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/button/style/mixin.less +0ms
  vite:resolve 1ms   ./rtl -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/button/style/rtl.less +0ms
  vite:resolve 0ms   ./rtl -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/result/style/rtl.less +234ms
transforming (571) node_modules/rc-menu/es/SubMenu/PopupTrigger.js  vite:resolve 1ms   ./rtl -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/spin/style/rtl.less +1s
transforming (596) node_modules/rc-rate/es/util.js  vite:resolve 1ms   ./rtl -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/alert/style/rtl.less +371ms
  vite:resolve 1ms   ./rtl -> /Users/JounQin/Workspaces/Local/test/node_modules/antd/es/skeleton/style/rtl.less +108ms

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.

The text was updated successfully, but these errors were encountered:

JounQin · 2021-09-04T04:10:57Z

In my true app (it's a bit huge for a reproduction), they are bundled as prism.*.js chunks correctly, but the public path seems broken

If I set base: 'http://localhost:3000/' it will result http://localhost:3000/http://localhost:3000/assets/prism-dracula.a4e77483.css...

JounQin · 2021-09-04T04:31:06Z

The problem is here

It results

JounQin · 2021-09-04T04:45:33Z

I finished up by patch vite for now.

diff --git a/node_modules/vite/dist/node/chunks/dep-1be34a63.js b/node_modules/vite/dist/node/chunks/dep-1be34a63.js
index e0418aa..64f4a95 100644
--- a/node_modules/vite/dist/node/chunks/dep-1be34a63.js
+++ b/node_modules/vite/dist/node/chunks/dep-1be34a63.js
@@ -34720,7 +34720,7 @@ function preload(baseModule, deps) {
     }
     return Promise.all(deps.map((dep) => {
         // @ts-ignore
-        dep = `${base}${dep}`;
+        dep = /^(https?:\/)?\//.test(dep) ? dep : `${base}${dep}`;
         // @ts-ignore
         if (dep in seen)
             return;

But it still does not work in my reproduction, that seems two different problems.

hex-ci · 2021-09-10T17:58:32Z

This is a bug introduced by #3333, I have submitted pr #4740

JounQin · 2021-09-11T02:41:40Z

@hex-ci Is the reproduction related too? It seems two different issues, because in the reproduction, there is no prism chunks generated at all.

hex-ci · 2021-09-11T06:08:30Z

The bug introduced by #3333 will affect all dynamically imported .css files, because only the dynamically imported .css file part of the code writes a duplicate config.base attribute. Why does this bug occur? I have a simple analysis in #4731.

hex-ci · 2021-09-13T14:34:31Z

Vite 2.5.7 version has been released, you can try to see if this version solves your problem.

JounQin · 2021-09-14T00:48:36Z

@hex-ci Hi, I tried my local project, it seems working now.

However, it is still broken on the reproduction, as I said before, it seems a different issue.

hex-ci · 2021-09-14T02:43:46Z

Vite 2.5.7 fixes the problem of .css dynamic import failure caused by incorrect base. If you have this problem, it should be fixed. I took a look at the code repository you provided, and it seems that there is no css dynamic import code, it does not seem to have anything to do with this problem, haha.

JounQin · 2021-09-14T02:56:42Z

@hex-ci

As the issue description

https://github.com/JounQin/test/blob/5460d970ae15d81a497eebff744ab40bf3845dbd/src/components/Prism.tsx#L21-L35

hex-ci · 2021-09-14T03:20:20Z

I took a look, the path of ../../../node_modules/prismjs/themes/prism-${theme}.css in the code you mentioned is wrong, you wrote an extra ../ , Written as ../../node_modules/prismjs/themes/prism-${theme}.css, I just tried it, no problem. There are also several other paths with more ../.

JounQin · 2021-09-14T03:41:39Z

@hex-ci Hmmm, but it works on development?

hex-ci · 2021-09-14T05:05:19Z

I tried the development environment, and I found that /node_modules/prismjs/themes/prism-dracula.css this is a 404, but this file does not exist in the file system, so this 404 is normal. Then, I did not find any other problems.

hex-ci · 2021-09-14T05:10:58Z

As for why writing an extra ../ is normal in the development environment, I guess it is because the root directory in the development environment has been restricted to the project directory, so how many ../ you write will not exceed the project Directory, I tried to write multiple ../ and it didn't matter, but if you write less ../, an error will be reported.

hex-ci · 2021-09-14T05:33:37Z

@hex-ci Hmmm, but it works on development?

I think that after modifying the path, the development environment is OK. Vite 2.5.7 solves your problem.

JounQin · 2021-09-14T05:43:14Z

@hex-ci Hmmm, but it works on development?

I think that after modifying the path, the development environment is OK. Vite 2.5.7 solves your problem.

Without modifying or upgrading to 2.5.7, it is still working on development when using 2.5.6.

JounQin · 2021-09-14T05:44:49Z

As for why writing an extra ../ is normal in the development environment, I guess it is because the root directory in the development environment has been restricted to the project directory, so how many ../ you write will not exceed the project Directory, I tried to write multiple ../ and it didn't matter, but if you write less ../, an error will be reported.

I think it's the root cause, so vite should warn about incorrect ../ levels, right?

hex-ci · 2021-09-14T05:58:38Z

As for why writing an extra ../ is normal in the development environment, I guess it is because the root directory in the development environment has been restricted to the project directory, so how many ../ you write will not exceed the project Directory, I tried to write multiple ../ and it didn't matter, but if you write less ../, an error will be reported.

I think it's the root cause, so vite should warn about incorrect ../ levels, right?

Maybe Vite needs to warn that your path exceeds the project root directory.

hex-ci · 2021-09-14T06:01:13Z

@hex-ci Hmmm, but it works on development?

I think that after modifying the path, the development environment is OK. Vite 2.5.7 solves your problem.

Without modifying or upgrading to 2.5.7, it is still working on development when using 2.5.6.

Your problem is actually caused by two aspects. One is a bug in Vite, and the other is that your path is written incorrectly. After both of these problems are fixed, your project will be normal.

benmccann · 2021-10-06T20:54:57Z

#4740 was released in 2.5.7 so it sounds like this is fixed https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#257-2021-09-13

I'll close this as a result. Please file a new issue requesting a warning when an extra .. is provided since that is a separate issue

JounQin added the pending triage label Sep 4, 2021

JounQin mentioned this issue Sep 4, 2021

fix: dep path could already absolute #4841

Closed

9 tasks

sodatea added inconsistency Inconsistency between dev & build feat: css has pr labels Sep 11, 2021

zongzi531 mentioned this issue Sep 16, 2021

Some styles are lost after packaging（打包之后部分样式丢失） element-plus/unplugin-element-plus#4

Closed

benmccann closed this as completed Oct 6, 2021

github-actions bot locked and limited conversation to collaborators Oct 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lazy imported modules are not bundled correctly on building #4840

lazy imported modules are not bundled correctly on building #4840

JounQin commented Sep 4, 2021 •

edited

JounQin commented Sep 4, 2021

JounQin commented Sep 4, 2021

JounQin commented Sep 4, 2021 •

edited

hex-ci commented Sep 10, 2021 •

edited

JounQin commented Sep 11, 2021

hex-ci commented Sep 11, 2021 •

edited

hex-ci commented Sep 13, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021 •

edited

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

JounQin commented Sep 14, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

benmccann commented Oct 6, 2021

lazy imported modules are not bundled correctly on building #4840

lazy imported modules are not bundled correctly on building #4840

Comments

JounQin commented Sep 4, 2021 • edited

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

JounQin commented Sep 4, 2021

JounQin commented Sep 4, 2021

JounQin commented Sep 4, 2021 • edited

hex-ci commented Sep 10, 2021 • edited

JounQin commented Sep 11, 2021

hex-ci commented Sep 11, 2021 • edited

hex-ci commented Sep 13, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021 • edited

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

JounQin commented Sep 14, 2021

JounQin commented Sep 14, 2021

hex-ci commented Sep 14, 2021

hex-ci commented Sep 14, 2021

benmccann commented Oct 6, 2021

JounQin commented Sep 4, 2021 •

edited

JounQin commented Sep 4, 2021 •

edited

hex-ci commented Sep 10, 2021 •

edited

hex-ci commented Sep 11, 2021 •

edited

hex-ci commented Sep 14, 2021 •

edited