{"id":138,"date":"2021-12-29T15:00:00","date_gmt":"2021-12-29T15:00:00","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=138"},"modified":"2021-12-30T11:05:02","modified_gmt":"2021-12-30T11:05:02","slug":"warn-export-default-imported-as-content-was-not-found","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/warn-export-default-imported-as-content-was-not-found\/","title":{"rendered":"WARN export ‘default’ (imported as ‘content’) was not found"},"content":{"rendered":"\n

Hello Friends 🙏, today while I was setting up a new React project from scratch without using create-react-app<\/a> and after doing all the required steps when I compiled the React App, I got below warning😮:<\/p>\n\n\n\n

\"\"
export ‘default’ (imported as ‘content’) was not found in ‘!!..\/node_modules\/mini-css-extract-plugin\/dist\/loader.js!..\/node_modules\/css-loader\/dist\/cjs.js!..\/node_modules\/sass-loader\/dist\/cjs.js!.\/styles.scss’ (module has no exports)<\/span><\/figcaption><\/figure>\n\n\n\n

So basically it is related to mini-css-extract-plugin<\/strong>, we have used it to extract the styles from the project to a style file.<\/p>\n\n\n\n

Below is the configuration I had done to setup the CSS loaders along with this plugin<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And as you can see in the warning there is a red color text (module has no exports)<\/span>, it made me think is it related to the way we are importing the css (i.e. directly importing without naming it as SCSS files do not use export syntaxes).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After some googling 🔍 , I found out that there is an option in mini-css-extract-plugin “esModule<\/strong>” and by setting it false warnings were not coming up again😁 🥳🥳.
So basically esModules <\/em>are ECMAScript standard for working with modules. And modules <\/em>is a JS file having variables and methods which must be exported, so that other files can import those methods and reuse it.
And in our case, as we don’t export styles as its not a js file and can be imported directly in the component, we have to turn off the esModule flag for the mini-css-extract plugin.<\/p>\n\n\n\n

Do you know anyother way to resolve this issue, feel free to comment.<\/p>\n\n\n\n

Thanks🙏.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello Friends 🙏, today while I was setting up a new React project from scratch without using create-react-app and after doing all the required steps when I compiled the React App, I got below warning😮: So basically it is related to mini-css-extract-plugin, we have used it to extract the styles from the project to a …<\/p>\n

WARN export ‘default’ (imported as ‘content’) was not found<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[30],"tags":[31,35,27,33,32,23,36],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/138"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}