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.

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

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"
    ]
  }
}

Josh Aguilar · Accepted Answer · 2021-02-08 09:52:22Z

1

+350

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']
  }
};

answered Feb 8, 2021 at 9:52

Josh Aguilar

2,2911 gold badge12 silver badges18 bronze badges

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

4 Comments

kevzettler Over a year ago

thanks @JoshA I was indeed missing .jsx resolve in the host project. But furthermore I added "jsx": "react", to the module tsconfig so that it would export default es5. The host project is unfortunately still missing types on the module that should be included. Any thoughts? I added more detail to the question

Josh Aguilar Over a year ago

I can't really say what's causing the Property .. does not exist on type ... errors unless I see more of the source code unfortunately. I assume the ReactRegl being mentioned in the error message is some sort of wrapper for the regl library? How is it being referenced inside Ground.ts?

Josh Aguilar Over a year ago

Good call on adding "jsx": "react" btw!

kevzettler Over a year ago

ok I figured out the typing issue. I had a conflicting type definition for deferred-regl in both the host project and the module project. The copy in the host project did not have the correct implementation

Arie Azhari · Accepted Answer · 2021-02-04 05:11:50Z

0

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

global.d.ts

declare module "your-module-name";

answered Feb 4, 2021 at 5:11

Arie Azhari

512 bronze badges

2 Comments

kevzettler Over a year ago

The module has its own .d.ts file that it exports and I do not want to commit a {{name}}.d.ts file to the host project because it will eventually npm install the module

Arie Azhari Over a year ago

you can add include in your tsconfig

"include": [     "src/**/*.ts",     "src/**/*.tsx",     "src/**/*.vue",     "tests/**/*.ts",     "tests/**/*.tsx" , "src/public-path.ts", "src/public-path.ts", "src/main.ts"  ]

Collectives™ on Stack Overflow

How to import local typescript module?

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related