Failed to build for missing `descriptor.scriptCompiled` inside `selectBlock`

[599316527]

Version

16.0.0-beta.6

Steps to reproduce

node_modules/@vue/cli-service/node_modules/vue-loader-v16

 ERROR  Failed to compile with 1 errors       

 error  in ./src/App.vue?vue&type=script&lang=js

Module build failed (from ./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js):
TypeError: Cannot read property 'content' of undefined
    at Object.selectBlock (/Users/hekai/Workspace/baidu/hairuo-uploader/demo/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/select.js:24:45)
    at Object.loader (/Users/hekai/Workspace/baidu/hairuo-uploader/demo/node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js:59:25)

 @ ./src/App.vue?vue&type=script&lang=js 1:0-292 1:0-292 1:293-574 1:293-574
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

I found that selectBlock is invoked while descriptor.scriptCompiled have not been assigned. No more idea about the issue.

vue-loader/src/index.ts

Lines 105 to 108 in f19f2b3

	if (incomingQuery.type) {
	return selectBlock(
	descriptor,
	loaderContext,

vue-loader/src/index.ts

Line 134 in f19f2b3

script = (descriptor as any).scriptCompiled = compileScript(descriptor, {

vue-loader/src/select.ts

Lines 25 to 29 in f19f2b3

	const script = (descriptor as any).scriptCompiled
	if (appendExtension) {
	loaderContext.resourcePath += '.' + (script.lang || 'js')
	}
	loaderContext.callback(null, script.content, script.map)

What is expected?

Build success

What is actually happening?

Build failed

[haoqunjiang]

Do you have a reproduction? Like, what's in the App.vue? I can fix this issue now, but I'm not sure if the error reflects a bug in the implementation of <script setup> support.

[599316527]

I believe it's about race condition. I've reduced App.vue to minimum and the issue still sometimes occurs. I don't find a way to reproduce it stably.

I awared that possibility of occurrence is relative to cpu load. The lower cpu load is, the higher possibility is. It hasn't been confirmed. I'm working on it.

[599316527]

I can't confirm the cpu load theory which I mentioned above. And I found that not only my app but also the original one created by vue-cli without any modification will occur the issue when running build with npm run build.

`vue create app` → `cd app` → `npm run build` → FAIL

/tmp/test-vue-loader                                                                                                                                                      
▶ ls                                                                         

/tmp/test-vue-loader                                                                                                                                                      
▶ vue create app                              


Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.4
✨  Creating project in /private/tmp/test-vue-loader/app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> fsevents@1.2.13 install /private/tmp/test-vue-loader/app/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /private/tmp/test-vue-loader/app/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> core-js@3.6.5 postinstall /private/tmp/test-vue-loader/app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall /private/tmp/test-vue-loader/app/node_modules/ejs
> node ./postinstall.js

added 1210 packages from 909 contributors in 31.065s

46 packages are looking for funding
  run `npm fund` for details

🚀  Invoking generators...
📦  Installing additional dependencies...

added 20 packages from 46 contributors in 5.45s

46 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project app.
👉  Get started with the following commands:

 $ cd app
 $ npm run serve


/tmp/test-vue-loader                                                                                                                                                      
▶ cd app            

/tmp/test-vue-loader/app  master ✔                                                                                                                                   28m  
▶ npm run build

> app@0.1.0 build /private/tmp/test-vue-loader/app
> vue-cli-service build


⠸  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                          8:56:47 PM

 error  in ./src/App.vue?vue&type=script&lang=js

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

 @ ./src/App.vue?vue&type=script&lang=js 1:0-304 1:0-304 1:305-598 1:305-598
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app@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!     /Users/hekai/.npm/_logs/2020-09-09T12_56_47_087Z-debug.log

/tmp/test-vue-loader/app  master ✔                                                                                                                                  28m  ⍉
▶ npm run build 

> app@0.1.0 build /private/tmp/test-vue-loader/app
> vue-cli-service build


⠋  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                          9:02:08 PM

 error  in ./src/App.vue?vue&type=script&lang=js

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

 @ ./src/App.vue?vue&type=script&lang=js 1:0-304 1:0-304 1:305-598 1:305-598
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app@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!     /Users/hekai/.npm/_logs/2020-09-09T13_02_08_218Z-debug.log

/tmp/test-vue-loader/app  master ✔                                                                                                                                  33m  ⍉
▶ npm ls vue-loader-v16
app@0.1.0 /private/tmp/test-vue-loader/app
└─┬ @vue/cli-service@4.5.4
  └── vue-loader-v16@npm:vue-loader@16.0.0-beta.6 


/tmp/test-vue-loader/app  master ✔                                                                                                                                   33m  
▶ npm ls vue           
app@0.1.0 /private/tmp/test-vue-loader/app
└── vue@3.0.0-rc.10 

And a screenrecord of the above actions is here. In the video I demonstrate how the build went wrong again and again, then suddenly turn to success without any changes.

[ux-engineer]

I'm also experiencing this after upgrading an app to Vue 3 with using script setup. Happens for view components.

Some views are added directly to route record's component property, but many routes are async loaded like:

 {
    path: '/',
    name: 'home',
    component: (): Promise<Component> => import(/* webpackChunkName: "solo" */ '@/views/index.vue') as unknown as Promise<Component>,
  },

[ux-engineer]

Happens only when doing production build NODE_ENV = 'production'.

[haoqunjiang]

I've added this paragraph to the release note:

Known Issues

The two new features currently do not work well with thread-loader. In Vue CLI, you may need to set parallel: false for them to work correctly.

I'm sorry for the inconvenience.
If anyone knows how to make the loader code thread-safe, please feel free to open a PR or leave a comment here.

[ux-engineer]

@sodatea setting parallel to false does not work for me, thus I'm unable to build for production.

[ux-engineer]

Interesting - I'm not experiencing this issue anymore. I don't think I've upgraded any package that could have affected this or done any major changes as the problem appeared for a whole bunch of components, however, I did nuke node_modules, remove package-lock.json, and reinstalled packages...

[tcsnyder]

I have been scratching my head at this for days and found this thread from the comment in vue loader source. I am dual booting on my pc and my build works in windows10 but not in linux (manjaro).

The current fix in place doesn't always fix the issue.

https://github.com/vuejs/vue-loader/blob/next/src/select.ts line 28
const script = (descriptor as any).scriptCompiled || descriptor.script

if the component has script setup then the property is descriptor.scriptSetup but i don't think adding that value to the chain would work since script setup does not have a default export.

I have this issue every time i build in my linux environment (it works in my ubuntu based CI/CD pipelines) I can clear node_modules and package-lock.json and reinstall and still have the problem. If there is anything need to troubleshoot this, i am more that happy to help.

EDIT.

just ran a cpu stress test and ran a few builds and every single one of them completed successfully. (I cleared the webpack cache-loader between each build to make sure it didn't pull the cached version).

when i turned the stress test off, they all failed.

CPU is an Intel 6700k
Running Manjaro linux with i3wm so my cpu usage is very low without other programs running.

[haoqunjiang]

Should have been fixed in v16.0.0