Description
Version
2.6.11
Reproduction link
https://github.com/mjmnagy/vue-error-2020-08-26
Steps to reproduce
I am trying to write a vue component library that will work in nuxt and vue.
The issue i was originally having was document is not defined when using Extract CSS. from reading, i understand the css-loader webpack settings need to be adjusted to use a different module (one that isnt using document).
I have downloaded(npm) the new webpack module(https://webpack.js.org/plugins/mini-css-extract-plugin/) and copied in the example code without any luck.
The below is an example of the error i get for every component
I have been looking on the interweb for hours now and cannot seem to find a solution.
I have been looking at the API Docs https://ssr.vuejs.org/guide/build-config.html#server-config and cannot seem to find something that works. Additionally i tied deleting node_modules
//vue.config.js
const path = require('path')
//package.json
"prod": "vue-cli-service build --report --target lib --name sc pkge/index.js",
run via npm run prod
//vue.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
outputDir: 'dist',
lintOnSave: false,
css: {
extract: true //false
},
configureWebpack: {
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false
})
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
resolve: {
alias: {
'@': path.resolve(__dirname)
}
}
}
}
//pkge/index.js
// Used to create imports for vue component library
import * as components from '@/components'
const install = (Vue, options = {}) => {
// Use Components
Object.values(components).forEach(comp => {
Vue.use(comp)
})
}
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default { install }
export * from '@/components'
What is expected?
Extract CSS using webpack module so it is client and server ready
What is actually happening?
error in ./components/layout/row.vue?vue&type=style&index=0&id=08898866&scoped=true&lang=css&
Module build failed (from ./node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Didn't get a result from child compiler
at childCompiler.runAsChild (B:\lib\node_modules\mini-css-extract-plugin\dist\loader.js:159:23)
at compile (B:\lib\node_modules\webpack\lib\Compiler.js:343:11)
at hooks.afterCompile.callAsync.err (B:\lib\node_modules\webpack\lib\Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at compilation.seal.err (B:\lib\node_modules\webpack\lib\Compiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (B:\lib\node_modules\webpack\lib\Compilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (B:\lib\node_modules\webpack\lib\Compilation.js:1414:32)
at _promise0.then._result0 (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
at process._tickCallback (internal/process/next_tick.js:68:7)
at runLoaders (B:\lib\node_modules\webpack\lib\NormalModule.js:316:20)
at B:\lib\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at B:\lib\node_modules\loader-runner\lib\LoaderRunner.js:182:20
at context.callback (B:\lib\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at childCompiler.runAsChild (B:\lib\node_modules\mini-css-extract-plugin\dist\loader.js:159:14)
at compile (B:\lib\node_modules\webpack\lib\Compiler.js:343:11)
at hooks.afterCompile.callAsync.err (B:\lib\node_modules\webpack\lib\Compiler.js:681:15)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at compilation.seal.err (B:\lib\node_modules\webpack\lib\Compiler.js:678:31)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (B:\lib\node_modules\webpack\lib\Compilation.js:1423:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (B:\lib\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (B:\lib\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (B:\lib\node_modules\webpack\lib\Compilation.js:1414:32)
- How can i configure it to use the weback module correctly?