Javascript module import fails - why?

Question

I'm a javascript newbie and I'm trying to figure out why this import statement fails. I don't know if this is relevant but I'm doing this in the context of a Create React app with its default webpack setup. I have these files:

TestClass.js

export default class TestClass {
    sayHello() {
        console.log("Hello World.");
    }
}

TestModule.js

import TestClass from "./TestClass";

module.exports = {
    MyExport: {
        doSomething: function() {
            let testClass = new TestClass();
            testClass.sayHello();
        }
    }
}

And then my main React Application file, App.js:

import React, { Component } from "react";
import "./App.css";
import { MyExport } from "./TestModule"

class App extends Component {
    constructor(props) {
        super(props);

        MyExport.doSomething();

        ... bla bla bla ...
}

When I attempt to run this in Node.js, it returns

Failed to compile.

./src/App.js
Attempted import error: 'MyExport' is not exported from './TestModule'.

What am I doing wrong?

etarhan · Accepted Answer · 2020-01-28 12:11:08Z

1

You are mixing es6 modules with Commonjs style imports. Your TestModule should be exported as follows:

import { TestClass } from "./TestClass";

export const MyExport = {
  doSomething: function () {
    let testClass = new TestClass();
    testClass.sayHello();
  }
};

This should work while allowing the rest of your code to remain the same

edited Jan 28, 2020 at 12:11

answered Jan 28, 2020 at 12:04

etarhan

4,1762 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user12798778 Over a year ago

You're right. This works - thanks. I'd like to understand more, though. Is mixing of imports this way prohibited? Is this because webpack and/or Node looks at a file when compiling and makes some determination about what kind of "thing" it is?

etarhan Over a year ago

@user12798778 The require type syntax is mainly used within NodeJS and is supported natively by that environment. ES6 style imports as you are attempted to use are resolved during build time by Webpack, which essentially resolves all your imports and pastes them together in one big file. While webpack is able to support both CommonJS and ES6 types of import you are not able to mix and match these different module methods as you have done in your code. You can read more about how Webpack does this here webpack.js.org/api/module-methods

etarhan Over a year ago

@user12798778 the main takeaway is that if you export your module using module.exports you should import it using require('...'), or you can export using the es6 module export syntax which means you have to import your module by import ... from .... Just dont mix different export and import methods because Webpack won't know how to handle these cases.

user12798778 Over a year ago

Got it. Thanks - much appreciated.

Nipun Jain · Accepted Answer · 2020-01-28 12:16:39Z

1

You can try this:

import { TestClass } from "./TestClass";

const Object = {
   MyExport: {
    doSomething: function() {
      let testClass = new TestClass();
      testClass.sayHello();
    }
  }
}
export default MyExport

As you are using two different type of import export

Or if you have to use module.exports you can try this:

import { TestClass } from "./TestClass";

module.exports = function () {
    return {
        MyExport: {
          doSomething: function() {
           let testClass = new TestClass();
           testClass.sayHello();
          }
       }
    }
}

You can try exporting function instead of object

edited Jan 28, 2020 at 12:16

answered Jan 28, 2020 at 12:03

Nipun Jain

1,0248 silver badges13 bronze badges

2 Comments

user12798778 Over a year ago

Is that true that module.exports should export a function, not an object? It seems like I can find lots of examples where that is not the case (e.g. sitepoint.com/understanding-module-exports-exports-node-js).

Nipun Jain Over a year ago

I am not saying you can't use object, I was just suggesting you to use function. Changing that statement in my answer as it can be misguiding.

Collectives™ on Stack Overflow

Javascript module import fails - why?

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related