Crashed when using Webpack `import()` #2463

fxxjdedd · 2018-09-07T12:35:37Z

Version

3.0.1

Reproduction link

https://github.com/fxxjdedd/vue-cli3-import-test.git

Node and OS info

Node 10.3.0, yarn 1.9.4, Windows10

Steps to reproduce

yarn install && yarn serve

What is expected?

running

What is actually happening?

crashed with error:

 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-import-test]/[@vue]/preload-webpack-plugin/src/lib/extract-chunks.js:35:22

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

概述:

这个问题是在我迁移项目到cli3时遇到的，项目中使用到了import()，并且它的参数是一个变量。
我总结了一下，出现这个问题的需要两个条件：

使用了Webpack的import()动态导入功能，且参数是一个变量（这个变量即使已经限制了文件夹范围，依然会有问题）。
包含上述行为的.js文件在多页面应用中被多个page同时引用（我实验了一下，发现至少需要3个page）。另外，更加奇怪的是，从非pages文件引入就没这个问题。

注意：

需要结合我给的reproduction项目看一下:

写了一个src/common/index.js, 用来引入pages和non-pages里的import-test模块
pages中一共有4个page，在其中A、B、C三个page里的app.js中，引入common/index.js
为了验证从非pages文件夹中引入是否有问题，新建了一个no-pages文件夹

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

LinusBorg · 2018-09-07T19:07:53Z

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

fxxjdedd · 2018-09-08T04:05:42Z

yeah, circular dependency is the point，but isn't it common in projects？

Kocal · 2018-09-08T16:45:28Z

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

fxxjdedd · 2018-09-09T01:24:10Z

you are right, but there is another confusing thing，in the demo project，if we only import '@/common' in pageA， and delete import in pageB and pageC, it won't crash.

Kocal · 2018-09-09T05:17:24Z

Mmmmh, maybe because it's not "cyclic"? 🤔
I'm not sure about dependencies resolving behaviour, but pageA imports common that imports pageA that imports common: so we have pageA <-> common and webpack can resolve it properly.

But when pageA imports common that imports that all pages, all pages will import common that will import all pages... And that's a total mess 😅

LinusBorg · 2018-09-12T08:17:25Z

Maybe it's indeed the preload-plugin we add that creates an infinite loop through the recursive call here:

https://github.com/vuejs/preload-webpack-plugin/blob/master/src/lib/extract-chunks.js#L43-L45

/cc @yyx990803

dabaii · 2018-09-13T07:33:01Z

在使用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.就完全没有这个问题.这让我很迷惑.

fxxjdedd · 2018-09-13T07:43:49Z

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

wuservices · 2018-09-18T02:51:30Z

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?

LinusBorg · 2018-09-18T05:06:36Z

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.

guidetheorient · 2018-09-19T01:40:00Z

cannot delete preload plugin in vue.config.js, i'm so confused.

  // vue.config.js
  chainWebpack: config => {
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
  },

// vue inspect 
/* config.plugin('preload-index') */
    new PreloadPlugin(
      {
        rel: 'preload',
        includeHtmlNames: [
          'mobile.html'
        ],
        include: {
          type: 'initial',
          entries: [
            'index'
          ]
        },
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    /* config.plugin('prefetch-index') */
    new PreloadPlugin(
      {
        rel: 'prefetch',
        includeHtmlNames: [
          'mobile.html'
        ],
        include: {
          type: 'asyncChunks',
          entries: [
            'index'
          ]
        }
      }
    ),
    /* config.plugin('preload-alarm') */
    new PreloadPlugin(
      {
        rel: 'preload',
        includeHtmlNames: [
          'handle-alarm.html'
        ],
        include: {
          type: 'initial',
          entries: [
            'alarm'
          ]
        },
        fileBlacklist: [
          /\.map$/,
          /hot-update\.js$/
        ]
      }
    ),
    /* config.plugin('prefetch-alarm') */
    new PreloadPlugin(
      {
        rel: 'prefetch',
        includeHtmlNames: [
          'handle-alarm.html'
        ],
        include: {
          type: 'asyncChunks',
          entries: [
            'alarm'
          ]
        }
      }
    ),

LinusBorg · 2018-09-19T07:02:06Z

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.

wuservices · 2018-09-22T00:48:58Z

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}`)
    })
  }

lorainwings · 2018-11-08T16:01:50Z

Thanks, it solve my same problem,
looking forward to a better solution

paolog22 · 2018-12-15T14:05:56Z

@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}) }) ?

LinusBorg · 2018-12-15T18:02:05Z

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

nkostadinov · 2019-01-07T09:16:29Z

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'
    },

luxueyan · 2019-01-25T03:05:25Z

I think @vue/preload-webpack-plugin should update to support the cicular dependency like:
GoogleChromeLabs/preload-webpack-plugin#49

viruscamp · 2019-01-28T05:30:27Z

I have made a cli-service : ${projectDir}/build/vue-cli-service/remove-preload-prefetch.js

module.exports = (api, projectOptions) => {
  api.chainWebpack(webpackConfig => {
    // see https://github.com/vuejs/vue-cli/issues/2463
    if (projectOptions.pages) {
      Object.keys(projectOptions.pages).forEach(page => {
        webpackConfig.plugins.delete(`preload-${page}`)
        webpackConfig.plugins.delete(`prefetch-${page}`)
      })
    }
  })
}

Then use it in package.json

  "vuePlugins": {
    "service": [
      "build/vue-cli-service/remove-preload-prefetch.js"
    ]
  },

barakbd-bluevine · 2019-02-01T02:48:45Z

@viruscamp - I get this error on build
` this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
^

TypeError: Cannot destructure property defaultModes of 'undefined' or 'null'.
at Service.modes.plugins.reduce (/opt/bluevine/node_modules/@vue/cli-service/lib/Service.js:37:48)
at Array.reduce ()
at new Service (/opt/bluevine/node_modules/@vue/cli-service/lib/Service.js:37:31)
at Object. (/opt/bluevine/node_modules/@vue/cli-service/bin/vue-cli-service.js:16:17)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! deposit_accounts_dashboard@0.1.0 build: vue-cli-service build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the deposit_accounts_dashboard@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /opt/bluevine/.npm/_logs/2019-02-01T02_29_03_707Z-debug.log`

haoqunjiang · 2019-02-15T05:45:48Z

@luxueyan last time I checked it was in sync with the upstream package, so I believe that commit did not fully fixed the circular dependency issue, we need to investigate further.

paulohlimamaia · 2019-04-04T14:27:36Z

@wuservices Thank you so much! Your workaround saved me!

Any expected plans to resolve this issue?
(Sorry if it was already resolved)

AdictoChannel · 2019-05-17T08:31:23Z

@barakbd-bluevine I get the same error when using a custom vue-cli service plugin with node v12. But I don't think it is related to this issue here.
Try again with node v10.

dalezak · 2019-07-26T19:45:45Z

Any update @LinusBorg on this issue? I've started experiencing it as well, but can't find the underlying cause of the circular dependency 😞

The proposed fix by @wuservices to extract-chunks.js works, however since you're modifying the source of node_modules, this doesn't work across different developers sharing a repo.

Is there a better way to disable the preload-webpack-plugin? Or an update on when @vue/preload-webpack-plugin will be patched to resolve this issue?

LinusBorg · 2019-07-26T20:11:40Z

THB no, thia got drowned out a bit. If someone was up for PR what would be welcomed.

dalezak · 2019-07-26T20:38:20Z

@LinusBorg I sent @wuservices's suggested fix as PR here vuejs/preload-webpack-plugin#3.

LinusBorg · 2019-07-26T20:44:58Z

/cc @sodatea

haoqunjiang · 2019-07-31T17:53:03Z

Fixed in @vue/preload-webpack-plugin v1.1.1

2. "pages" option leads to vuejs/vue-cli#2463. Upgrade vue related packages to fix it 3. fix autoprefixer warning https://github.com/postcss/autoprefixer/releases/tag/9.6.0 4. draft dapp Data point rewards screen

fxxjdedd mentioned this issue Sep 7, 2018

preload-webpack-plugin --- RangeError: Maximum call stack size exceeded #2315

Closed

LinusBorg added the needs team repro We acknowledged your report and will soon try to reproduce it label Sep 7, 2018

LinusBorg added the scope: cli-service build label Sep 12, 2018

LinusBorg added bug scope: cli-service serve and removed needs team repro We acknowledged your report and will soon try to reproduce it labels Sep 18, 2018

sendya added a commit to vueComponent/ant-design-vue-pro that referenced this issue Oct 31, 2018

bug: vuejs/vue-cli#2463

06303db

sendya mentioned this issue Nov 8, 2018

request.js 文件依赖import store from '@/store'，会导致编译循环依赖RangeError: Maximum call stack size exceeded vueComponent/ant-design-vue-pro#6

Closed

sendya added a commit to vueComponent/ant-design-vue-pro that referenced this issue Nov 14, 2018

bug: vuejs/vue-cli#2463

7dcc578

haoqunjiang mentioned this issue Dec 25, 2018

multipage RangeError: Maximum call stack size exceeded #3180

Closed

Boom-BO mentioned this issue May 5, 2019

request.js 文件依赖import store from '@/store'，会导致编译循环依赖RangeError: Maximum call stack size exceeded PanJiaChen/vue-element-admin#1984

Open

AdictoChannel mentioned this issue May 17, 2019

defaultModes error on build with node.js v12 #4014

Closed

xiaohaiH mentioned this issue Jul 23, 2019

配置多页应用打包后, chunk-vendors 等文件没有注入到 html 中 PanJiaChen/vue-element-admin#2407

Closed

dalezak mentioned this issue Jul 26, 2019

Updated extract-chunks.js getNames to handle circular dependencies vuejs/preload-webpack-plugin#3

Merged

haoqunjiang closed this as completed Jul 31, 2019

xuxinping mentioned this issue Mar 14, 2020

部署之后为什么主题切换不了 vueComponent/ant-design-vue-pro#390

Closed

vitaliimelnychukpyvud added a commit to vitaliimelnychukpyvud/joymikem that referenced this issue Oct 6, 2022

bug: vuejs/vue-cli#2463

59382a6

genie099 added a commit to genie099/ant-design-vue-pro that referenced this issue Nov 13, 2022

bug: vuejs/vue-cli#2463

28b7041

smartdev924 added a commit to smartdev924/ant-design-vue-pro that referenced this issue Apr 8, 2023

bug: vuejs/vue-cli#2463

b951eb6

nanfb mentioned this issue May 27, 2024

关于jeecg前端vue2项目多页面配置 jeecgboot/jeecgboot-vue2#61

Closed

Watcher919 pushed a commit to Watcher919/Vue-antd that referenced this issue Aug 28, 2024

bug: vuejs/vue-cli#2463

06ac04e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Crashed when using Webpack `import()` #2463

Crashed when using Webpack `import()` #2463

fxxjdedd commented Sep 7, 2018

LinusBorg commented Sep 7, 2018

fxxjdedd commented Sep 8, 2018

Kocal commented Sep 8, 2018 •

edited

Loading

fxxjdedd commented Sep 9, 2018

Kocal commented Sep 9, 2018 •

edited

Loading

LinusBorg commented Sep 12, 2018

dabaii commented Sep 13, 2018

fxxjdedd commented Sep 13, 2018 •

edited

Loading

wuservices commented Sep 18, 2018

LinusBorg commented Sep 18, 2018

guidetheorient commented Sep 19, 2018 •

edited

Loading

LinusBorg commented Sep 19, 2018

wuservices commented Sep 22, 2018 •

edited

Loading

lorainwings commented Nov 8, 2018

paolog22 commented Dec 15, 2018 •

edited

Loading

LinusBorg commented Dec 15, 2018 •

edited

Loading

nkostadinov commented Jan 7, 2019

luxueyan commented Jan 25, 2019 •

edited

Loading

viruscamp commented Jan 28, 2019

barakbd-bluevine commented Feb 1, 2019

haoqunjiang commented Feb 15, 2019 •

edited

Loading

paulohlimamaia commented Apr 4, 2019

AdictoChannel commented May 17, 2019 •

edited

Loading

dalezak commented Jul 26, 2019

LinusBorg commented Jul 26, 2019

dalezak commented Jul 26, 2019

LinusBorg commented Jul 26, 2019

haoqunjiang commented Jul 31, 2019

Crashed when using Webpack import() #2463

Crashed when using Webpack import() #2463

Comments

fxxjdedd commented Sep 7, 2018

Version

Reproduction link

Node and OS info

Steps to reproduce

What is expected?

What is actually happening?

概述:

注意：

LinusBorg commented Sep 7, 2018

fxxjdedd commented Sep 8, 2018

Kocal commented Sep 8, 2018 • edited Loading

fxxjdedd commented Sep 9, 2018

Kocal commented Sep 9, 2018 • edited Loading

LinusBorg commented Sep 12, 2018

dabaii commented Sep 13, 2018

fxxjdedd commented Sep 13, 2018 • edited Loading

wuservices commented Sep 18, 2018

LinusBorg commented Sep 18, 2018

guidetheorient commented Sep 19, 2018 • edited Loading

LinusBorg commented Sep 19, 2018

wuservices commented Sep 22, 2018 • edited Loading

lorainwings commented Nov 8, 2018

paolog22 commented Dec 15, 2018 • edited Loading

LinusBorg commented Dec 15, 2018 • edited Loading

nkostadinov commented Jan 7, 2019

luxueyan commented Jan 25, 2019 • edited Loading

viruscamp commented Jan 28, 2019

barakbd-bluevine commented Feb 1, 2019

haoqunjiang commented Feb 15, 2019 • edited Loading

paulohlimamaia commented Apr 4, 2019

AdictoChannel commented May 17, 2019 • edited Loading

dalezak commented Jul 26, 2019

LinusBorg commented Jul 26, 2019

dalezak commented Jul 26, 2019

LinusBorg commented Jul 26, 2019

haoqunjiang commented Jul 31, 2019

Crashed when using Webpack `import()` #2463

Crashed when using Webpack `import()` #2463

Kocal commented Sep 8, 2018 •

edited

Loading

Kocal commented Sep 9, 2018 •

edited

Loading

fxxjdedd commented Sep 13, 2018 •

edited

Loading

guidetheorient commented Sep 19, 2018 •

edited

Loading

wuservices commented Sep 22, 2018 •

edited

Loading

paolog22 commented Dec 15, 2018 •

edited

Loading

LinusBorg commented Dec 15, 2018 •

edited

Loading

luxueyan commented Jan 25, 2019 •

edited

Loading

haoqunjiang commented Feb 15, 2019 •

edited

Loading

AdictoChannel commented May 17, 2019 •

edited

Loading