Vue-loader: Getting warnings for `export 'default' (imported as 'mod') was not found`

[amir20]

Version

15.9.3

Reproduction link

https://github.com/amir20/dozzle/tree/webpack5

Steps to reproduce

git clone https://github.com/amir20/dozzle/tree/webpack5
yarn
yarn build

What is expected?

No warnings

What is actually happening?

I am getting a lot of warnings that look like

WARNING in ./assets/components/SideMenu.vue?vue&type=style&index=0&id=59920051&scoped=true&lang=scss& 1:495-498
export 'default' (imported as 'mod') was not found in '-!../../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-1[0].rules[0].use[0]!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??clonedRuleSet-1[0].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SideMenu.vue?vue&type=style&index=0&id=59920051&scoped=true&lang=scss&' (possible exports: )
 @ ./assets/components/SideMenu.vue 4:0-93
 @ ./node_modules/vue-loader/lib/index.js??vue-loader-options!./assets/App.vue?vue&type=script&lang=js& 46:0-45 55:4-12
 @ ./assets/App.vue?vue&type=script&lang=js& 1:0-115 1:131-134 1:136-248 1:136-248
 @ ./assets/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./assets/main.js 8:0-28 59:19-22

WARNING in ./assets/pages/Index.vue?vue&type=style&index=0&id=ee5d2aae&lang=scss&scoped=true& 1:492-495
export 'default' (imported as 'mod') was not found in '-!../../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-1[0].rules[0].use[0]!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??clonedRuleSet-1[0].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Index.vue?vue&type=style&index=0&id=ee5d2aae&lang=scss&scoped=true&' (possible exports: )
 @ ./assets/pages/Index.vue 4:0-90
 @ ./assets/pages/index.js 1:0-47 1:0-47
 @ ./assets/main.js 9:0-92 19:15-20 24:15-24 30:15-32 35:15-23 40:15-19 45:15-27

WARNING in ./assets/pages/Settings.vue?vue&type=style&index=0&id=8dc7fec8&lang=scss&scoped=true& 1:495-498
export 'default' (imported as 'mod') was not found in '-!../../node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-1[0].rules[0].use[0]!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??clonedRuleSet-1[0].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Settings.vue?vue&type=style&index=0&id=8dc7fec8&lang=scss&scoped=true&' (possible exports: )
 @ ./assets/pages/Settings.vue 4:0-93
 @ ./assets/pages/index.js 5:0-53 5:0-53
 @ ./assets/main.js 9:0-92 19:15-20 24:15-24 30:15-32 35:15-23 40:15-19 45:15-27

---

I created this issue at https://github.com/webpack-contrib/mini-css-extract-plugin/issues/625 but suggestion was to do it here instead

[lllopo]

Yup. I can confirm. Having similar problem, reported it here : webpack-contrib/mini-css-extract-plugin#622 and got also redirected to vue-loader by the mini-css-extract developer.

[dboonstra177]

I have the same issue which I somewhat fixed, I think it is a combined issue between css-loader and mini-css-extract-plugin.

My Fix: I moved all of my css to an actual css file instead of declaring it locally or scoped. This removed every warning/error I had which was 150+ errors after the package upgrade.

I am still having an issue though I am trying to use vue-multiselect which requires css initialization which doesn't work from the css file so I haven't figured out how to resolve that so hopefully someone posts more information about that.

[amir20]

My Fix: I moved all of my css to an actual css file instead of declaring it locally or scoped. This removed every warning/error I had which was 150+ errors after the package upgrade.

That's not a fix. That's a workaround. :)

[lllopo]

For me it works more or less fine without warnings with mini-css-extract 0.12.0, but this is again a temporary workaround and also not the best one. Hope this will get fixed soon.

[cjingle]

I'm having the same issue. Please let us know when you have a resolution.

[dineug]

I have the same problem.
I looked it up.
There was an esModule in mini-css-extract-plugin v1.0.0
I solved it with this.

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    esModule: false,
  },
}

[ribatugo]

Setting 'esModule: false' does not change anything on my side...

[thecrypticace]

I've done a bit of digging around this. Not 100% sure what the issue is but hopefully this'll help.

This is the line it's complaining about
https://github.com/vuejs/vue-loader/blob/e9e038d3639bcbb5d1d17067ee576896bed94c75/lib/loaders/pitcher.js#L123

Webpack sees the following as the source of the module:

// extracted by mini-css-extract-plugin
export {};

So mini-css-extract-plugin is extracting the styles and replacing it with an empty export causing it to complain b/c of the import vue-loader is using.

[lllopo]

Still there with rc1 for me. esModule:false helps, though.

[emgyrz]

In my case, the replacement of imports helped

//  from
import * as ST from './styles.scss

// to
import ST from './styles.scss

and without

options: {
  esModule: false,
},

[Zertz]

For me, this error unclearly but rightfully happened when I used a default export on a CSS Module that only had :global selectors and I was mistakenly using styles.something (which didn't exist)

Example:

Component.module.css

:global .legacy-global-selector {
    outine: 1px solid tomato;
}

Component.jsx

import styles from "./Component.module.css";

export function Component() {
  return (
    <span className={styles.span}>This selector doesn't exist!</span>
  );
}

To fix it, I changed Component.jsx to:

import "./Component.module.css";

export function Component() {
  return (
    <span>This selector doesn't exist!</span>
  );
}

[ETSVSCode]

I was getting this error with below class syntax:

export class User { }

Solved By this syntax:

class User {}
export default User;