Vue production build errors in example

[eephillip]

I'm having an issue building the vue hello world example using the npm run build Running in serve mode works as designed.

git clone https://github.com/webdiscus/pug-loader
cd ./pug-loader/examples/hello-world-vue
nvm install v16.17.1

Downloading and installing node v16.17.1...
Downloading https://nodejs.org/dist/v16.17.1/node-v16.17.1-darwin-arm64.tar.xz...
############################################################################################################################################################################################################## 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.17.1 (npm v8.15.0)

npm i; npm ls

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 996 packages, and audited 997 packages in 3s

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

found 0 vulnerabilities
hello-world-vue@1.0.0 /Users/null/pug-loader/examples/hello-world-vue
├── @babel/core@7.19.3
├── @babel/eslint-parser@7.19.1
├── @vue/cli-plugin-babel@5.0.8
├── @vue/cli-plugin-eslint@5.0.8
├── @vue/cli-service@5.0.8
├── @webdiscus/pug-loader@2.9.3
├── core-js@3.25.3
├── css-loader@6.7.1
├── eslint-plugin-vue@9.5.1
├── eslint@8.24.0
├── html-loader@4.2.0
├── markdown-it@13.0.1
├── prismjs@1.29.0
├── sass-loader@13.0.2
├── sass@1.55.0
├── vue@3.2.40
├── webpack-cli@4.10.0
├── webpack-dev-server@4.11.1
└── webpack@5.74.0

npm run build

> hello-world-vue@1.0.0 build
> vue-cli-service build

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.

⠼  Building for production...

 ERROR  Failed to compile with 1 error                                                                                                                                                                    12:39:40 PM

 error  in ./src/components/HelloWorld.vue?vue&type=template&id=a771edd6&lang=pug

Syntax Error: Thread Loader (Worker 0)
Cannot read properties of undefined (reading 'options')

 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/webpack.js:148:8
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Cache.js:150:23)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:1225:15
    at Hook.eval [as callAsync] (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:1218:23)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/webpack.js:147:16
    at finalCallback (/Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:458:13
    at Hook.eval [as callAsync] (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/Hook.js:18:14)
    at onCompiled (/Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:456:21)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:1196:17
    at Hook.eval [as callAsync] (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compiler.js:1192:33
    at finalCallback (/Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compilation.js:2787:11)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compilation.js:3092:11
    at Hook.eval [as callAsync] (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/null/pug-loader/examples/hello-world-vue/node_modules/webpack/lib/Compilation.js:3085:38
    at eval (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at eval (eval at create (/Users/null/pug-loader/examples/hello-world-vue/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

[webdiscus]

Hi @eephillip

oh, this is very common problem of Vue in production mode. I can reproduce this issue, but I don't know how to fix this Vue bug.

Please try to build in development mode, it should works:

npx vue-cli-service build --mode development

P.S. if you can fix it in vue.config.js, please create a PR.

[eephillip]

I'll keep digging, see I can come up with something.

[webdiscus]

I'll keep digging, see I can come up with something.

Thanks!

This is very strange issue in Vue config. I see in google that many developers have same issue by build in production mode.

[webdiscus]

@eephillip

I found the problem. That was the fault of the thread-loader that using in production mode only.

Here you can generate final Webpack config for Prod and Dev modes to compare both files:

npx vue-cli-service inspect --mode devolopment > config.dev.js
npx vue-cli-service inspect --mode production > config.prod.js

The thread-loader try to call all loaders via Worker, but the @webdiscus/pug-loader can't work in Worker, because is async and use Webpack API.

Also, this is really an evil Vue bug, that use buggy thread-loader in production mode :-/

I am trying to find a workaround for this. Perhaps can by disabled this plugin in the Vue config.

[webdiscus]

@eephillip

I have fixed the Vue example for npm run build. See the comments in fixed vue.config.js. Please git pull new version from GitHub.

Thanks, Dimitri

[eephillip]

awesome!, well done, confirmed functional