Critical dependency: the request of a dependency is an expression - Dynamic import

[imagoiq]

Version

4.5.7

Reproduction link

https://github.com/babel/babel/issues/11607

Environment info

  System:
    OS: Linux 4.19 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @ky-is/vue-cli-plugin-tailwind: ^2.0.0 => 2.0.0 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2 
    @vue/babel-plugin-jsx:  1.0.0-rc.3 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.5.7 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.5.7 
    @vue/cli-plugin-babel: ^4.5.7 => 4.5.7 
    @vue/cli-plugin-eslint: ^4.5.7 => 4.5.7 
    @vue/cli-plugin-router:  4.5.7 
    @vue/cli-plugin-vuex:  4.5.7 
    @vue/cli-service: ^4.5.7 => 4.5.7 
    @vue/cli-shared-utils:  4.5.7 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.1 => 7.0.1 
    vue: ^2.6.12 => 2.6.12 
    vue-avatar-component: ^1.3.1 => 1.3.1 
    vue-click-outside: ^1.1.0 => 1.1.0 
    vue-eslint-parser:  7.1.0 
    vue-force-next-tick: ^1.1.0 => 1.1.0 
    vue-global-events: ^1.2.1 => 1.2.1 
    vue-goodshare: ^1.5.1 => 1.5.1 
    vue-gtag: ^1.9.1 => 1.9.1 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.22.0 => 8.22.0 
    vue-inline-svg: ^2.0.0 => 2.0.0 
    vue-lazyload: ^1.3.3 => 1.3.3 
    vue-loader:  15.9.3 (16.0.0-beta.8)
    vue-loading-overlay: ^3.4.2 => 3.4.2 
    vue-meta: ^2.4.0 => 2.4.0 
    vue-multipane: git https://github.com/MediaComem/vue-multipane.git => 1.0.1 
    vue-resize:  0.4.5 
    vue-router: ^3.4.6 => 3.4.6 
    vue-static: 0.0.5 => 0.0.5 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.5.1 => 3.5.1 
    vuex-persist: ^3.1.3 => 3.1.3 
  npmGlobalPackages:
    @vue/cli: 4.5.7

Steps to reproduce

Upgrading from 4.3.1 to 4.4.0 (theoretically. It was tested with the latest version only: 4.5.7.)

What is expected?

No warning

What is actually happening?

A webpack warning at the end of the dev build: Critical dependency: the request of a dependency is an expression.

Modules or files using dynamic import are impacted and doesn't load anymore.

---

Forcing the resolutions of babel-plugin-dynamic-import-node to 2.3.0 fix the issues (vue-cli from 4.4.0 to 4.5.7use 2.3.3).

According to Babel community (https://github.com/babel/babel/issues/11607), vue-cli should not use babel-plugin-dynamic-import-node (or should use the webpack version babel-plugin-dynamic-import-webpack).

[haoqunjiang]

But Vue CLI won't enable this plugin unless NODE_ENV equals test or you are invoking the test:unit command. What's your configuration?

[imagoiq]

Thanks for your quick reply. You actually gave me a good hint. My .env was based on an old configuration provided by vue-element-admin which with vue-cli 3 promoted the use of VUE_CLI_BABEL_TRANSPILE_MODULES for faster compilation which doesn't work as expect with vue-cli 4 according to their doc: https://github.com/PanJiaChen/vue-element-admin-site/blob/master/docs/es/guide/advanced/lazy-loading.md#vue-cli3-the-plan-has-been-eliminated