vue-cli: Crashed when using Webpack `import()`

Very helpful advice!

In case anybody is having trouble with this, here’s the idea:

  chainWebpack: config => {
    // TODO: Remove this workaround once https://github.com/vuejs/vue-cli/issues/2463 is fixed
    // Remove preload plugins for multi-page build to prevent infinite recursion
    Object.keys(pagesObject).forEach(page => {
      config.plugins.delete(`preload-${page}`)
      config.plugins.delete(`prefetch-${page}`)
    })
  }

This is exploding on me in the same way in my Vue CLI 3 project with a multi-page build. It happens once certain dependencies are included.

@LinusBorg it seems like this would be avoidable if the plugin kept track of what was processed in getNames (groups) to avoid infinite recursion. Or, it could be rewritten without recursion.

I haven’t groked what the plugin does where it’s crashing yet, but when searching around, I found https://github.com/webpack/webpack/blob/master/lib/optimize/EnsureChunkConditionsPlugin.js (potentially very unrelated), but noticed it was tracking chunk groups in a Set().

This might be logically wrong, but at least I was able to get my app running in dev mode temporarily by breaking the recursion by adding a Set() of processedGroups:

const processedGroups = new Set()
function getNames (groups) {
  const Entrypoint = require('webpack/lib/Entrypoint')
  const names = []
  for (const group of groups) {
    if (group instanceof Entrypoint) {
      // entrypoint
      if (group.options.name) {
        names.push(group.options.name)
      }
    } else {
      if (!processedGroups.has(group)) {
        processedGroups.add(group)
        names.push(...getNames(group.parentsIterable))
      }
    }
  }
  return names
}

Seems like this should be addressable by somebody who knows what actually should happen here.

Without a fix, is it impossible to have a multi-page build with circular references?

You are using the pages feature, where each page has its own instance of

• html-webpack-plugin
• preload-plugin
• prefetch-plugin

… and each instance has its own name, as you can see in the output of inspect:

/* config.plugin('preload-index') */
..
 /* config.plugin('preload-alarm') */

You will have to remove all of these.

在使用vue-cli2 迁移到vue-cli3过程中. 我也遇到相同的问题.

vue-cli2中index.html在根目录.

vue-cli3 默认配置中,index.html在public中.

迁移过程中我尝试把index.html移动到public,项目没有任何问题能够启动.

但是我不移动index.html(保持和vue-cli2项目目录),通过配置vue.config.js 的pages选项定义HtmlWebpackPlugin的template. 项目在编译过程中就会无法编译通过:

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                                              15:20:37

  RangeError: Maximum call stack size exceeded

  - Array.join

  - loader.js:228 Function.Module._findPath
    internal/modules/cjs/loader.js:228:56

  - loader.js:591 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:591:25

  - loader.js:520 Function.Module._load
    internal/modules/cjs/loader.js:520:25

  - loader.js:650 Module.require
    internal/modules/cjs/loader.js:650:17

  - helpers.js:20 require
    internal/modules/cjs/helpers.js:20:18

  - extract-chunks.js:35 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:35:22

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

  - extract-chunks.js:44 getNames
    [vue-cli3]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:44:21

整个项目我只有路由配置文件采用了import()语法. 我尝试删减路由配置测试是否是import()语法引起的问题. 在少于4个import()的情况下,项目是可以通过编译的. 4个及以上编译不通过.

但是如果不使用 vue.config.js中配置的pages.就完全没有这个问题.这让我很迷惑.

@LinusBorg I sent @wuservices’s suggested fix as PR here https://github.com/vuejs/preload-webpack-plugin/pull/3.

I think @vue/preload-webpack-plugin should update to support the cicular dependency like: https://github.com/GoogleChromeLabs/preload-webpack-plugin/issues/49

He likely saved the pages config that he used as a variable called pagesObject, which he then used to define the pages options as well as using it in the code above

@wuservices where did you get the pageObject parameter in the Object.keys(pagesObject).forEach(page => { config.plugins.delete(preload-${page}) config.plugins.delete(prefetch-${page}) }) ?

Presumably some sort of cicular dependeny problem.

https://github.com/fxxjdedd/vue-cli3-import-test/blob/master/src/common/index.js#L2-L3

let filename = 'import-test.js'
import(`@/pages/${filename}`)

• this code will create async chunks for all components in /pages, not just import-test.js
• Some of these components import /common/index.js

I can’t judge if this is inevitable or a bug in @vue/preload-webpack-plugin

I had similar problem that managed to workaround by moving the pages inside webpack config in the entry section like this:

  configureWebpack: {
    entry: {
      app: './main.js',
      landing: './landing.js'
    },

Thanks for these valuable pointers, we will check this out as soon as we can.

If you want rot make the multi page build work for now, you could remove this plugin, which is “only” responsible for turning “normal” script tags into “preload” ones, so the build should work with out it if memory serves.

Vue-cli3 is so charming🥞, but it is still under beta, we have to wait😋.

Not really, circular dependencies should be avoided to prevent this kind of problem.

Here for example, you can try to move your import() into a pages.js file, next to common.js. Then you will be able to import your common file in pages