Extract CSS - Didn't get a result from child compiler

[mjmnagy]

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)

---

1. How can i configure it to use the weback module correctly?

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

---

This might be a fix to what you are seeing: #11609

[mjmnagy]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

This might be a fix to what you are seeing: #11609

This is for vue-ssr where the vue app is being loaded using the '.json`. However, i want to create a component library.
vue.txt

I believe the correct plugin is mini-css-extract-plugin https://webpack.js.org/plugins/mini-css-extract-plugin/

Unfortunately, i have tried reading the docs and adjusting vue.config.js (vue.txt attached) only to get the error reported above