如何在 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 (ie 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 (eg 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"
  ]
}

Answer 1

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
}