Vue-loader: 编译失败, 报错 TypeError: Cannot read property 'content' of null

Created on 23 Oct 2020 · 8Comments · Source: vuejs/vue-loader

Version

16.0.0-beta.8

Reproduction link

https://github.com/idrunk/vue-loader-bug-reproduction

Steps to reproduce

配置webpack的cache.type为filesystem, 开启缓存
初始化一个Vue3 Typescript的项目, 建立一个根单文件组件并使用ts版setup语法糖, 建立一个子单文件组件并使用ts版setup语法糖, 在根组件中导入子组件
第一次编译, 正常通过能运行
(补充, 这里漏了关键一步, 就是这里需要改动inside.vue的模板内容, 即让缓存失效, 然后再编译才会失败, 否则直接用缓存的话则不会失败)
后续编译, 编译失败, 报下述错误

TypeError: Cannot read property 'content' of null
    at Object.selectBlock (D:\Temp\vue3\1\node_modules\vue-loader\dist\select.js:25:45)
    at Object.loader (D:\Temp\vue3\1\node_modules\vue-loader\dist\index.js:60:25)

What is expected?

编译通过

What is actually happening?

编译失败

经过跟踪排查, 发现在前行(index.js:58)插入下述代码, 多次编译都能正常通过, 但我感觉这不是解决之道

        if (incomingQuery.type === 'script' && !descriptor.scriptCompiled && descriptor.scriptSetup) {
            descriptor.scriptCompiled = compiler_sfc_1.compileScript(descriptor, {
                babelParserPlugins: options.babelParserPlugins,
            })
        }

Source

idrunk

👍5 👀1

Most helpful comment

As said in the release note:

<script setup> support is experimental. It does not work well with thread-loader. In Vue CLI, you need to set parallel: false for this feature to work correctly.

sodatea on 6 Nov 2020

❤5 👍1

All 8 comments

I'm having the same issue when using the yarn build command

https://github.com/bmunoz89/vue3-playground/

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                              10:09:59 PM

 error  in ./src/views/Experimental.vue?vue&type=script&lang=ts&setup=true

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot read property 'content' of null
    at PoolWorker.fromErrorObj (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at /Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at mapSeries (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/neo-async/async.js:3625:14)
    at PoolWorker.onWorkerMessage (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:170:35)
    at /Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:152:14
    at Object.selectBlock (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/vue-loader-v16/dist/select.js:25:45)
    at Object.loader (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/vue-loader-v16/dist/index.js:59:25)

 @ ./src/views/Experimental.vue?vue&type=script&lang=ts&setup=true 1:0-388 1:0-388 1:389-766 1:389-766
 @ ./src/views/Experimental.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.

bmunoz89 on 26 Oct 2020

I'm having the same issue when using the yarn build command

https://github.com/bmunoz89/vue3-playground/

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                              10:09:59 PM

 error  in ./src/views/Experimental.vue?vue&type=script&lang=ts&setup=true

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot read property 'content' of null
    at PoolWorker.fromErrorObj (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:262:12)
    at /Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:204:29
    at mapSeries (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/neo-async/async.js:3625:14)
    at PoolWorker.onWorkerMessage (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:170:35)
    at /Users/BorisM/Documents/Vue3/vue3-playground/node_modules/thread-loader/dist/WorkerPool.js:152:14
    at Object.selectBlock (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/vue-loader-v16/dist/select.js:25:45)
    at Object.loader (/Users/BorisM/Documents/Vue3/vue3-playground/node_modules/vue-loader-v16/dist/index.js:59:25)

 @ ./src/views/Experimental.vue?vue&type=script&lang=ts&setup=true 1:0-388 1:0-388 1:389-766 1:389-766
 @ ./src/views/Experimental.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.

My issue was trigger by the 'cache' option in webpack's config, I saw your project not with webpack, Maybe our issue are different.

idrunk on 26 Oct 2020

@idrunk I made another branch to remove the experimental feature <script setup>, which is the same feature that we are using, and in that branch works without throwing that error.

bmunoz89 on 26 Oct 2020

confirmed same error at vue-cli, setup feature is only support serve mode, not build time.

yoyoys on 27 Oct 2020

👍5

confirmed same error at vue-cli, setup feature is only support serve mode, not build time.

I also have this problem, without typescript

FairyEver on 30 Oct 2020

👍2

As said in the release note:

<script setup> support is experimental. It does not work well with thread-loader. In Vue CLI, you need to set parallel: false for this feature to work correctly.

sodatea on 6 Nov 2020

❤5 👍1

After setting parallel: false in the vue.config.js I also had to rm node_modules/.cache -rf before building worked again.