How to import a self-made module in create-react-app?

Question

I'm using create-react-app in my ReactJS app with TypeScript, and I would like to import a TypeScript/JavaScript module that I created in another project.

The module consists of a file mymodule.js, in which the code looks approximately like this:

var mymodule;
(function (mymodule) {
    var MyClass = /** @class */ (function () {
        function MyClass() {
        }
        MyClass.myMethod = function () {
            // code
        };
        return MyClass;
    }());
    mymodule.MyClass = MyClass;
})(mymodule || (mymodule = {}));

Then there is the type definition file mymodule.d.ts, which looks like this:

declare module mymodule {
    class MyClass {
        private static myMethod;
    }
}

In my create-react-app project, I placed these two files in the folder /src/vendor, and I want to use the module like this:

import { MyClass } from '../vendor/mymodule';

...

However, Visual Studio Code (i.e. the TypeScript compiler) says

File '.../vendor/mymodule.d.ts' is not a module. ts(2306)

When I run the project, the variables from the module (e.g. the class MyClass) are undefined.

This might be the reason for the error: The library is generated using module: "AMD", but create-react-app seems to enforce module: "esnext".

Edit: Here's the tsconfig.json of the create-react-app project:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "src"
  ]
}

Is there any reason why don't you just copy paste the module into the new app and just use it as any other module ? — Benjamin Barbé, Jan 15 '20 at 16:47
@BenjaminBarbé Isn't that what I'm doing? I'm copying the two files of the module to `src/vendor/mymodule`. — Jonas Sourlier, Jan 15 '20 at 17:11

score 2 · Answer 1 · answered Jan 15 '20 at 17:11

2

You can't import the file due to the fact that you are not exporting the module. In order for module loading to work, you should have an export at the bottom of your myModule class file.

export {
  mymodule
}

answered Jan 15 '20 at 17:11

Chris Hawkes

11,923
6
58
68

Thanks a lot, this might be the reason. However, my module consists of more than one file (I'm using TypeScript's `--outFile` feature). Should I add these three lines at the end of all source files? – Jonas Sourlier Jan 15 '20 at 17:16
That just tells TypeScript to concatenate and emit output to single file. I have to export explicitly in my TypeScript files. As far as I know that statement has to be at the bottom of every file you want to be importable. – Chris Hawkes Jan 15 '20 at 17:21
I'm not familiar with create-react-app but there is also this issue which you may have even after exporting. https://stackoverflow.com/questions/54949876/create-react-app-typescript-does-not-load-d-ts-file' – Chris Hawkes Jan 15 '20 at 17:25

How to import a self-made module in create-react-app?

1 Answers1