How to import local typescript module?

Question

I am building a TypeScript module and I want to eventually publish to NPM but I first want to import it into another local host project to test. Both projects are in TypeScript.

The module successfully compiles with tsc and outputs what appears to be correct files into the dist directory. The module includes a storybook that imports and compiles the module successfully through relative local paths.

In the host project I have tried both npm link and local npm install ../localmodule to import the module.

The module tsconfig is:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "typeRoots": ["./src/types"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

The module package.json has

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

When I then try to compile the host project with the local module imported I get a bunch of errors that I am not seeing in the modules storybook or during development.

1. A critical path error that indicates the host project is not seeing one of modules exports is missing or not found.

<e> ERROR in ../react-regl/dist/index.js 9:18-51
<e> Module not found: Error: Can't resolve './components/ReglFrame' in '/Users/kevzettler/code/react-regl/dist'
<e>  @ ./src/Ground.ts 6:0-30 11:11-21 12:15-27 20:26-30 31:13-17
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77

This export is confirmed in the modules dist directory:

kevs-mbp:react-regl kevzettler$ ls dist/components/
ReglFrame.d.ts      ReglFrame.d.ts.map  ReglFrame.jsx

1. And some type errors that indicate the host project is missing or infering the types differently than the storybook

<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(17,17)
<e>       TS2339: Property 'clear' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77
<e>
<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(19,21)
<e>       TS2339: Property 'texture' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77

I can confirm these clear and texture methods are defined on the .d.ts files from the module.

The host projects tsconfig looks like

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": true,
    "lib": [
      "es2019",
      "dom"
    ],
    "exclude": [
      "./src/server.worker.ts",
      "./src/server.ts",
      "./src/network/ServerNetwork.ts",
      "./src/Worker/implementation.worker_threads.ts"
    ]
  }
}

Answer 1

I assume you are using webpack during compilation in your host project. If so you will need to specify .jsx in the resolve.extensions property of your webpack config file so that your host project can recognize modules with those extensions. Here's an example webpack.config.js using resolve.extensions with .js, .jsx, and .json.

module.exports = {
  // your other config here...
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

Answer 2

make a file with extension {{name}}.d.ts

global.d.ts

declare module "your-module-name";