Error: Unable to resolve module 'internal_package'
Error: Unable to resolve module 'internal_package'
背景
我正在使用 yarn 作为包管理器,我正在尝试为 react-native 应用程序创建一个单一的 repo,并结合使用像这样的通用 repo 的 web 应用程序。
问题
我正在使用纱线工作区。我 cd 到 common
目录和 运行 yarn link
然后进入 app
目录并链接包名称就像这个命令 yarn link "@wow/common". Everything seemed to work as "@wow/common" showed up in
mono-repo/packages/app/node_modules. I ran
yarn react-native start --reset-cachethen
yarn android` 我仍然收到这个错误。
yarn run v1.22.4
$ react-native start
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
To reload the app press "r"
To open developer menu press "d"
[Tue Apr 07 2020 22:20:19.850] BUNDLE ./index.js
error: Error: Unable to resolve module `@wow/common` from `App.tsx`: @wow/common could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
at Object.resolve (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/lib/transformHelpers.js:267:42)
at dependencies.map.result (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31)
at Array.map (<anonymous>)
at resolveDependencies (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
at /home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
Done in 20.64s.
这是我的 package.json @wow/common
{
"name": "@wow/common",
"description": "Common codebase for web and native apps",
"version": "1.0.0",
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@types/react-native": "0.62.1",
"bufferutil": "^4.0.1",
"react": "^16.11.0",
"react-native": "^0.62.1",
"utf-8-validate": "^5.0.2"
}
}
我试过的
我尝试了错误输出中的所有推荐步骤
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
我尝试使用 import {App} from '../common/dist/index.js'
而不是 import {App} from '@wow/common'
如果有人能提供任何解决方案,我将不胜感激。
我终于解决了这个错误。我的解决方法如下:
- 进入
@wow/common
和运行yarn link
- 进入
@wow/app
和运行yarn link "@wow/common"
- 使用以下代码在
@wow/app
中更新(或创建)metro.config.js
:
// /**
// * Metro configuration for React Native
// * https://github.com/facebook/react-native
// *
// * @format
// */
const path = require('path');
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders: [
path.resolve(__dirname, '../../../node_modules/@wow/common'),
path.resolve(__dirname, '../../../node_modules'),
],
};
重要的片段是 watchFolders
-- 它告诉应用程序在哪里可以找到公共代码,以及其他节点模块(假设你是 not noHoisting依赖项)。
最后,打开两个终端,进入@wow/app
目录和运行:
yarn start --reset-cache
在航站楼 1
yarn android
在航站楼 2
我得到这个答案部分归功于这个 SO 答案:
背景
我正在使用 yarn 作为包管理器,我正在尝试为 react-native 应用程序创建一个单一的 repo,并结合使用像这样的通用 repo 的 web 应用程序。
问题
我正在使用纱线工作区。我 cd 到 common
目录和 运行 yarn link
然后进入 app
目录并链接包名称就像这个命令 yarn link "@wow/common". Everything seemed to work as "@wow/common" showed up in
mono-repo/packages/app/node_modules. I ran
yarn react-native start --reset-cachethen
yarn android` 我仍然收到这个错误。
yarn run v1.22.4
$ react-native start
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
To reload the app press "r"
To open developer menu press "d"
[Tue Apr 07 2020 22:20:19.850] BUNDLE ./index.js
error: Error: Unable to resolve module `@wow/common` from `App.tsx`: @wow/common could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
at Object.resolve (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/lib/transformHelpers.js:267:42)
at dependencies.map.result (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31)
at Array.map (<anonymous>)
at resolveDependencies (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
at /home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/dkendall/Projects/personal/react-projs/mono-repo/packages/app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
Done in 20.64s.
这是我的 package.json @wow/common
{
"name": "@wow/common",
"description": "Common codebase for web and native apps",
"version": "1.0.0",
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@types/react-native": "0.62.1",
"bufferutil": "^4.0.1",
"react": "^16.11.0",
"react-native": "^0.62.1",
"utf-8-validate": "^5.0.2"
}
}
我试过的
我尝试了错误输出中的所有推荐步骤
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
我尝试使用 import {App} from '../common/dist/index.js'
而不是 import {App} from '@wow/common'
如果有人能提供任何解决方案,我将不胜感激。
我终于解决了这个错误。我的解决方法如下:
- 进入
@wow/common
和运行yarn link
- 进入
@wow/app
和运行yarn link "@wow/common"
- 使用以下代码在
@wow/app
中更新(或创建)metro.config.js
:
// /**
// * Metro configuration for React Native
// * https://github.com/facebook/react-native
// *
// * @format
// */
const path = require('path');
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
watchFolders: [
path.resolve(__dirname, '../../../node_modules/@wow/common'),
path.resolve(__dirname, '../../../node_modules'),
],
};
重要的片段是 watchFolders
-- 它告诉应用程序在哪里可以找到公共代码,以及其他节点模块(假设你是 not noHoisting依赖项)。
最后,打开两个终端,进入@wow/app
目录和运行:
yarn start --reset-cache
在航站楼 1yarn android
在航站楼 2
我得到这个答案部分归功于这个 SO 答案: