Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Lerna with Yarn, TypeScript and React Native: Cannot find module '@project/common' or its corresponding type declarations.ts(2307)

$
0
0

The project uses Yarn, React Native, Lerna and Typescript. It is structured as a monorepo

Here is the structure:

project|- packages   | - mobile       | - src       | - packages.json       | - tsconfig.json   | - cloud-functions       | - src       | - packages.json       | - tsconfig.json   | - common1       | - lib       | - src       | - packages.json       | - tsconfig.json   | - common2       | - lib       | - src       | - packages.json       | - tsconfig.json| - packages.json| - tsconfig.json| - lerna.json

lerna.json looks like this:

{"packages": ["packages/*"  ],"npmClient": "yarn","version": "0.0.7",}

The root packages.json looks like this:

{"name": "project","private": true,"scripts": {    ...  },"devDependencies": {"@types/node": "^14.0.27","lerna": "^3.22.1","ts-node": "^8.10.2","typescript": "^3.9.7"  }}

The root tsconfig.json looks like this:

{"compilerOptions": {"noImplicitAny": true,"noUnusedLocals": true,"removeComments": true,"noLib": false,"emitDecoratorMetadata": true,"experimentalDecorators": true,"sourceMap": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"resolveJsonModule": true,"baseUrl": "./","paths": {"@project/common1": ["packages/common1/lib"],"@project/common2": ["packages/common2/lib"],"@project/mobile": ["packages/mobile/src"],"@project/cloud-functions": ["packages/cloud-functions/src"],    }  },"exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/*", "babel.config.js", "metro.config.js", "jest.config.js"]}

The typical packages/common/packages.json looks like this:

{"name": "@project/common1","version": "0.0.7","main": "lib/index.js","types": "lib/index.d.ts","files": ["lib/**/*"  ],"private": true,"devDependencies": {"@project/common2": "latest", //for common1 only"@types/node": "^14.0.27","ts-node": "^8.10.2","typescript": "^3.9.7"  },"dependencies": {    ...  }}

The typical packages/common/tsconfig.json looks like this:

{"extends": "../../tsconfig.json","compilerOptions": {"module": "commonjs","outDir": "lib","strict": true,"target": "es6"  },"compileOnSave": true,"include": ["src"]}

The React Native file packages/mobile/packages.json looks like this:

{"name": "@project/mobile","version": "0.0.7","private": true,"dependencies": {"@project/common1": "latest","@project/common2": "latest",        ...    },"devDependencies": {        ..."ts-node": "^8.10.2","typescript": "^3.8.3"    },}

I first ran into:

lerna ERR! yarn install --mutex network:42424 --non-interactive stderr:warning Waiting for the other yarn instance to finish (19560)warning Waiting for the other yarn instance to finish (21568)error An unexpected error occurred: "https://registry.yarnpkg.com/@project%2fcommon1: Not found".

Obviously Yarn is trying to pull the dependencies from its packages registery. This fails.

Then I tried to remove the references to @project/common1 and @project/common2 in the dependencies of the packages.

In the source, VS Code underline the imports in red and prints:

Cannot find module '@project/common1' or its corresponding type declarations.ts(2307)

I also tried to use Yarn Workspace, yet I ran into modules hoisting issues with React Native. I did not want create a list of all possibly incompatible package, since it seems to be difficult to maintain.

"workspaces": {"nohoist": ["react-native", "react-native/**", "@react-native-community/checkbox", "@react-navigation/native"]}

Is there a simple solution ?

Or is it simpler for this use case to abandon Lerna and use GitHub based common repositories?


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>