Webpack compile Vue style “export ‘default’ (imported as’ mod ‘) error

Recently, the code of the scaffold’s compilation layer was upgraded. Vue gave feedback that there was a warning in the compilation style, and recorded the problems and solutions

error message

WARNING in ../vueSample/js/index/_pages/app.vue?vue&type=style&index=0&lang=stylus& 1:469-472
"export 'default' (imported as 'mod') was not found in '-!../../../../../node_modules/mini-css....

Problem webpack configuration

{
  test: /\.styl(us)?$/,
  use: envAttributs('styl', [
    'stylus-loader'
  ])
},

//Auxiliary methods 
function envAttributs(param){
  return ([
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: domain,
      }
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        url: false
      }
    },
    'postcss-loader',
  ]).concat(param)
}

Problem solving

After searching for many times on the Internet, the problem is locatedMiniCssExtractPlugin.loader. Last time, in order to solve the problem that the style background image is not output, it was modifiedMiniCssExtractPlugin.loaderConfiguration of

options: {
  Publicpath: domain, // the domain name points to the development service to solve the problem of URL image location in CSS
}

After the parameter setting is enabled, the Vue style compilation will be prompted with warning information, which will be checked laterMiniCssExtractPluginOfficial documentsMiniCssExtractPlugin.esModuleProperty is true by default. Webpack4 also needs to set esmodule to true to enable tree shaking function, but it is this parameter that causes errors when compiling vue2 style. Modify parameter configuration

options: {
  Publicpath: domain, // the domain name points to the development service
  Esmodule: false, // set this property to false to solve the problem
}

esModule
Esmodule, which is es module syntax, supports loading at compile time, which is different from loading at commonjs runtime. At compile time, you can determine the module dependencies, as well as the input and output variables. ESM can achieve tree shaping. You can load only part of the module

Source code