I am currently working on a TypeScript module with plans to eventually release it on NPM. However, before publishing, I want to import the module into another project hosted locally for testing purposes. Both projects are written in TypeScript.
The TypeScript module successfully compiles using tsc and generates the appropriate files in the dist directory. Additionally, the module includes a storybook that is able to import and compile the module without any issues using relative paths.
In my local host project, I have attempted to import the module using both npm link and by running npm install ../localmodule.
Here is the tsconfig configuration for the module:
{
"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's package.json file contains:
"main": "dist/index.js",
"types": "dist/index.d.ts",
However, when attempting to compile the host project with the imported local module, I encounter numerous errors that were not present during the development or while utilizing the storybook.
- An important error points out that the host project cannot locate one of the module's exports.
<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
I can confirm that this export exists in the dist directory of the module:
kevs-mbp:react-regl kevzettler$ ls dist/components/
ReglFrame.d.ts ReglFrame.d.ts.map ReglFrame.jsx
- In addition, there are type errors indicating differences in type inference between the host project and 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 have verified that these methods, such as clear and texture, are defined in the .d.ts files from the module.
The tsconfig settings for the host project are as follows:
{
"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"
]
}
}