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?

Answer 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

Answer 2

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