CODEWITHSUNDEEP
javascriptbabeljses6-modules
IWI
IWI

Reputation: 1608

module.exports does not contain a default export

I am trying to export my theme in my react app using `module.exports =

 module.exports = {
   defaultFontColor: "#282828",
   name: "Planswell",
   primary: primary,
   deemphasizedPrimary: "#e7f6ee",
   secondary: "#E4A432",
   danger: "#DF5F2B"...}`

in my file whatever.js, and i try to import it in another file using import whatever from "themes/whatever.js";

All was working well, but i updated Babel, and am now getting the error Attempted import error: 'themes/whatever.js' does not contain a default export (imported as 'whatever').

What changed with Babel that caused this error? And how do I fix it?

Upvotes: 1

Views: 10740

Answers (3)

Belhadjer Samir
Belhadjer Samir

Reputation: 1659

in your whatever.js you have exporting the as an object that contain your component so you have to export it like this

import {whatever} from "themes/whatever.js";

for your example to work you have to export your component without brackets

export {whatever}

Upvotes: -1

codemonkey
codemonkey

Reputation: 7905

If the only export in your whatever.js is

module.exports = {mod1, mod2, ...}

Then, assuming whatever is actually a module in your file, you should have never been able to import it using

import whatever from "themes/whatever.js";

The only way that would be possible is if in your whatever.js you did:

export default whatever;

Otherwise, you will have to destructure the import like so:

import {whatever, mod1, mod2, ...} from "themes/whatever.js";

Again, all this assumes that whatever is actually a module inside your whatever.js file e.g const whatever = () => {.... You don't make that part clear.

Upvotes: 3

user3056783
user3056783

Reputation: 2616

The error you're getting should help you guide your way. When using module.exports = {...} syntax, the default export is the object.

You should try importing specific exported properties of the module such as import { someModule } from 'themes/whatever.js'. Optionally you can use

import * as whatever from 'themes/whatever.js'

// Use it

whatever.myFunction()

Babel is pretty complex tool so I would check from which version you upgraded to and then looked at the change log to see what has changed. Babel has plethora of presets and plugins so it could be any combination, sorry no simple answer here. To me it seems like perhaps you're using some different type of module.

Maybe you are using @babel/preset-env with combination of browserslist settings and you transpile to ES6 modules?

Upvotes: 1

Related Questions