4.2.3
https://github.com/rslifka/loader-issue
☝️ Your basic vue create
app with a minimal vue.config.js
shown below and a single web worker file under ./workers
. You don't even need to include the file in your app to get the error.
Environment Info:
System:
OS: macOS 10.15.3
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 13.10.1 - /usr/local/bin/node
Yarn: Not Found
npm: 6.13.7 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.132
Firefox: Not Found
Safari: 13.0.5
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 4.2.3
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.2.3
@vue/cli-plugin-babel: ~4.2.0 => 4.2.3
@vue/cli-plugin-eslint: ~4.2.0 => 4.2.3
@vue/cli-plugin-router: 4.2.3
@vue/cli-plugin-vuex: 4.2.3
@vue/cli-service: ~4.2.0 => 4.2.3
@vue/cli-shared-utils: 4.2.3
@vue/component-compiler-utils: 3.1.1
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^6.1.2 => 6.2.2
vue: ^2.6.11 => 2.6.11
vue-eslint-parser: 7.0.0
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.0
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.11 => 2.6.11
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.2.3
In vue.config.js
:
// Generate workers via worker-loader, excluding them from the default 'js'
// loader per advice here - https://github.com/vuejs/vue-cli/issues/2028
chainWebpack: config => {
config.module.rule('webWorker').post().test(/-worker\.js$/).use('worker-loader').loader('worker-loader')
}
vue-cli-service build
The build should complete without errors
The build fails with "Failed to compile with 0 errors"
chainWebpack: config => {
config.plugins.delete('progress')
config.module.rule('webWorker').post().test(/-worker\.js$/).use('worker-loader').loader('worker-loader')
config.plugin('simple-progress-webpack-plugin').use(require.resolve('simple-progress-webpack-plugin'), [
{
format: 'expanded' // options are minimal, compact, expanded, verbose
}
])
}
→ [98%] Asset optimization ...
→ [100%] After asset optimization ...
→ [102%] After seal ...
ERROR Failed to compile with 0 errors
...and again with "verbose" output:
[23:54:01] Webpack (94%) - Optimize modules (asset optimization)
[23:54:01] Webpack (94%) - Optimize modules (after asset optimization)
[23:54:01] Webpack (95%) - Optimize modules (after seal)
ERROR Failed to compile with 0 errors
If I can just blow your mind for a minute... if I set the above plugin to verbose
, the production build passes. I assumed this meant there was an issue with threading so I set parallel: false
however that didn't seem to do anything.
After an evening and afternoon of attempting everything under the sun from various related tickets, I threw in the towel. worker-loader
hasn't been updated in about two years, so I decided to switch to https://github.com/GoogleChromeLabs/worker-plugin. In about ten minutes, I was up and running and pushed to production.
If you're seeing this in early 2020, heads up that you might want to give the Google plugin a shot. Setup was easy and quick and it appears to be actively maintained.
Best of luck out there with your web workers! :)
Thanks @rslifka this saved my day, worker-loader
seems to be nothing but troubles in combination with vue.config.js
.
Most helpful comment
After an evening and afternoon of attempting everything under the sun from various related tickets, I threw in the towel.
worker-loader
hasn't been updated in about two years, so I decided to switch to https://github.com/GoogleChromeLabs/worker-plugin. In about ten minutes, I was up and running and pushed to production.If you're seeing this in early 2020, heads up that you might want to give the Google plugin a shot. Setup was easy and quick and it appears to be actively maintained.
Best of luck out there with your web workers! :)