Vue upgrade to 2.7 get error: The "from" argument must be of type string. Received undefined

kaizige10 commented 2 years ago

Version

16.8.3

Reproduction link

sfc.vuejs.org/

Steps to reproduce

vue 2.7.10
webpack 4.46.0
vue-loader 15.10.0
vue-loader-v16 16.8.3

my package.json:

    "devDependencies": {
        "@babel/plugin-proposal-do-expressions": "7.14.5",
        "@babel/plugin-proposal-export-default-from": "7.14.5",
        "@babel/plugin-proposal-export-namespace-from": "7.14.5",
        "@babel/plugin-proposal-function-bind": "7.14.5",
        "@babel/plugin-proposal-function-sent": "7.14.5",
        "@babel/plugin-proposal-logical-assignment-operators": "7.14.5",
        "@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
        "@babel/plugin-proposal-optional-chaining": "7.14.5",
        "@babel/plugin-proposal-pipeline-operator": "7.14.5",
        "@babel/plugin-proposal-throw-expressions": "7.14.5",
        "@babel/plugin-syntax-dynamic-import": "7.8.3",
        "@babel/plugin-syntax-import-meta": "7.10.4",
        "@hw-videoserver/hc-vite-plugins": "~1.2.1",
        "@vitejs/plugin-vue2": "1.1.2",
        "@vitejs/plugin-vue2-jsx": "1.0.3",
        "@vue/cli-plugin-babel": "4.5.19",
        "@vue/cli-plugin-eslint": "4.5.19",
        "@vue/cli-service": "4.5.19",
        "babel-eslint": "10.1.0",
        "babel-plugin-component": "1.1.1",
        "clean-webpack-plugin": "3.0.0",
        "eslint": "7.32.0",
        "eslint-plugin-vue": "9.3.0",
        "mockjs": "^1.1.0",
        "sass": "~1.39.2",
        "sass-loader": "8.0.2",
        "speed-measure-webpack-plugin": "^1.5.0",
        "style-loader": "1.3.0",
        "vite": "2.9.15",
        "vite-plugin-mock": "^2.9.6",
        "vite-plugin-vue2": "~1.9.3",
        "vue": "2.7.10",
        "vue-json-editor": "1.4.3",
        "webpack-cli": "3.3.12"
    }

my webpack config js, just show config about thread-loader

    // 使用threadLoader加快打包速度
    const threadPoolConfig = { workers: isWindows ? 4 : os.cpus().length - 1 };
    config.module.rule('vue')
        .use('thread-loader')
        .loader('thread-loader')
        .options(threadPoolConfig)
        .before('vue-loader');
    config.module.rule('js').use('thread-loader')
        .loader('thread-loader')
        .tap(options => ({
            ...options,
            ...threadPoolConfig
        }));

What is expected?

run npx vue-cli-service build success

What is actually happening?

get error:

"./vpages/attention/AttentionList.vue?vue&type=template&id=55c9d1f8& (./node_modules/cache-loader/dist/cjs.js?
{\"cacheDirectory\":\"node_modules/.cache/vue-loader\",\"cacheIdentifier\":\"4e86a2f2-vue-loader-template\"}
!./node_modules/cache-loader/dist/cjs.js??ref--4-0!./node_modules/thread-loader/dist/cjs.js??ref--4-1!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/thread-loader/dist/cjs.js??ref--1-1!./node_modules/vue-loader/lib??vue-loader-options!./vpages/attention/AttentionList.vue?vue&type=template&id=55c9d1f8&)\n

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):\n
Thread Loader (Worker 0)\n
The \"from\" argument must be of type string. Received undefined\n    

at PoolWorker.fromErrorObj (E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\thread-loader\\dist\\WorkerPool.js:262:12)\n    
at E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\thread-loader\\dist\\WorkerPool.js:204:29\n    
at mapSeries (E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\neo-async\\async.js:3625:14)\n    
at PoolWorker.onWorkerMessage (E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\thread-loader\\dist\\WorkerPool.js:170:35)\n    
at new NodeError (internal/errors.js:322:7)\n    
at validateString (internal/validators.js:124:11)\n    
at Object.relative (path.js:492:5)\n    
at getDescriptor (E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\vue-loader\\lib\\descriptorCache.js:28:10)\n    
at Object.module.exports (E:\\Consumer\\codehub\\VideoMonitorService\\hicinema-content-newmonitor\\front_src\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js:41:22)\n 
@ ./vpages/attention/AttentionList.vue?vue&type=template&id=55c9d1f8& 1:0-615 1:0-615\n 
@ ./vpages/attention/AttentionList.vue\n 
@ ./vbusiness/router/monitor.route.js\n 
@ ./routes.js\n 
@ ./main.js\n 
@ multi ./main.js",

Additional Remarks

At first, I thought it was the problem of thread-loader, so I deleted the thread-loader in the Webpack configuration, and the packaging was successful. However, I think it might be that Vue-Loader passed the error to thread-loader, please help to check, thank you.

我一开始认为是thread-loader的问题，于是我把webpack配置中的thread-loader删除了，于是打包成功了。但是我认为这可能还是vue-loader将错误传递给了thread-loader，请帮忙看一下，谢谢。

fazulk commented 2 years ago

I am getting the same sort of error while trying to run storybook

vue 2.7.10
vue-loader 15.10.0
@vue/cli-service: 5.0.8

ModuleBuildError: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read property 'styles' of undefined
    at Object.loader (/Users/f/webz/node_modules/vue-loader/dist/index.js:70:34)

fazulk commented 2 years ago

I ended up adding

  "resolutions": {
    "vue-loader": "^15.10.0"
  }

and its working (if your using vue2)

idumancic commented 2 years ago

@kaizige10 I know it's not ideal but for me setting the parallel option to false in Vue config resolved the case and got my build working.

vuejs / vue-loader