无法解析自己的模块 - Expo
Unable to resolve own module - Expo
我用纯 javascript（不是打字稿）创建了自己的 expo 项目。我使用 OpenApi Generator.
生成了一个 javascript Api 客户端
要将 api 与我的代码集成，我需要手动 link 该包作为：
To use the library locally without publishing to a remote npm registry, first install the dependencies by changing into the directory containing package.json (and this README). Let's call this JAVASCRIPT_CLIENT_DIR. Then run:
npm install
Next, link it globally in npm with the following, also from JAVASCRIPT_CLIENT_DIR:
npm link
To use the link you just defined in your project, switch to the directory you want to use your wizard_card_game_api from, and run:
npm link /path/to/<JAVASCRIPT_CLIENT_DIR>
Finally, you need to build the module:
npm run build
我设法在 node_modules 文件夹中看到了我的模块。
当我 运行 expo start 总是得到：
Unable to resolve module wizard-card-game-api from C:\Users\myUser\Documents\Code\React-Native\react-native-wizard-client\client\features\login\actions.js: wizard-card-game-api 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 and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
顺便说一句，我没有 tsconfig.json 文件，因为我没有使用打字稿。
我已经为我的模块创建了一个类型，因为 Visual Code 提出了建议。 A 将它放在根文件夹中，名称为 desc.d.ts:
declare module 'wizard-card-game-api';
我也看过：Expo question
另请阅读有关 typescript 和 tsconfig.json 的配置，我无法理解。
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@babel/eslint-parser": "^7.14.7",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"install": "^0.13.0",
"prettier": "^2.3.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"eslint": "^7.31.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.24.0"
},
"private": true
}
loginAction.js
/* tslint:disable */
import WizardCardGameApi from 'wizard-card-game-api'; // <<< --- ERROR HERE
import constants from './constants';
const loginActions = {
login: (playerName, wizardId) => {
let api = new WizardCardGameApi.LobbyControllerApi();
let joinLobbyRequest = new api.JoinLobbyRequest('SlinkmanSorcery', playerName, wizardId);
let callback = function (error, data, response) {
if (error) {
console.error(`Error: ${error}`);
} else {
console.log(`API called successfully. Returned data: ${data}`);
}
};
api.joinLobby(joinLobbyRequest, callback);
return {
type: constants.LOGIN,
playerName,
wizardId,
};
},
logout: () => {
return {
type: constants.LOGOUT,
};
},
};
export default loginActions;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
env: {
production: {
plugins: ['react-native-paper/babel'],
},
},
};
};
Api index.js 文件
/**
* Wizard Card Game API
* This API drives the Wizard Card Game.
*
* The version of the OpenAPI document: 1.0.0
* Contact: rw.slinkman@gmail.com
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*
*/
import ApiClient from './ApiClient';
import CardEntity from './model/CardEntity';
import CreateGameRequest from './model/CreateGameRequest';
/* ... */
import UserRoundStateResponse from './model/UserRoundStateResponse';
import GameControllerApi from './api/GameControllerApi';
import LobbyControllerApi from './api/LobbyControllerApi';
export {
/**
* The ApiClient constructor.
* @property {module:ApiClient}
*/
ApiClient,
/**
* The CardEntity model constructor.
* @property {module:model/CardEntity}
*/
CardEntity,
/**
* The CreateGameRequest model constructor.
* @property {module:model/CreateGameRequest}
*/
CreateGameRequest,
/**
* The EstimateRequest model constructor.
* @property {module:model/EstimateRequest}
*/
EstimateRequest,
/* ... */
/**
* The GameControllerApi service constructor.
* @property {module:api/GameControllerApi}
*/
GameControllerApi,
/**
* The LobbyControllerApi service constructor.
* @property {module:api/LobbyControllerApi}
*/
LobbyControllerApi
};
有什么想法吗？
我解决了我的问题。以下是我执行的步骤：
将我的 api 文件夹更改为 react-native 应用程序。
-
expo install babel-plugin-module-resolver
- 在我的 client app:
的根目录中创建一个 .babelrc.json 文件
{
"presets": ["babel-preset-expo"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"wizard-card-game-api": "./api/WizardApiClient/src"
}
}
]
]
}
- 停止 expo 应用程序并重新运行它：
expo start -c
现在，loginAction.js 效果很好：
import WizardCardGameApi from 'wizard-card-game-api';
干杯。
重要资源：
我用纯 javascript（不是打字稿）创建了自己的 expo 项目。我使用 OpenApi Generator.
生成了一个 javascript Api 客户端要将 api 与我的代码集成，我需要手动 link 该包作为：
To use the library locally without publishing to a remote npm registry, first install the dependencies by changing into the directory containing
package.json(and this README). Let's call thisJAVASCRIPT_CLIENT_DIR. Then run:npm installNext, link it globally in npm with the following, also from
JAVASCRIPT_CLIENT_DIR:npm linkTo use the link you just defined in your project, switch to the directory you want to use your wizard_card_game_api from, and run:
npm link /path/to/<JAVASCRIPT_CLIENT_DIR>Finally, you need to build the module:
npm run build
我设法在 node_modules 文件夹中看到了我的模块。
当我 运行 expo start 总是得到：
Unable to resolve module wizard-card-game-api from C:\Users\myUser\Documents\Code\React-Native\react-native-wizard-client\client\features\login\actions.js: wizard-card-game-api 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 and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
顺便说一句，我没有 tsconfig.json 文件，因为我没有使用打字稿。
我已经为我的模块创建了一个类型，因为 Visual Code 提出了建议。 A 将它放在根文件夹中，名称为 desc.d.ts:
declare module 'wizard-card-game-api';
我也看过：Expo question
另请阅读有关 typescript 和 tsconfig.json 的配置，我无法理解。
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@babel/eslint-parser": "^7.14.7",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.11",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"install": "^0.13.0",
"prettier": "^2.3.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"eslint": "^7.31.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.24.0"
},
"private": true
}
loginAction.js
/* tslint:disable */
import WizardCardGameApi from 'wizard-card-game-api'; // <<< --- ERROR HERE
import constants from './constants';
const loginActions = {
login: (playerName, wizardId) => {
let api = new WizardCardGameApi.LobbyControllerApi();
let joinLobbyRequest = new api.JoinLobbyRequest('SlinkmanSorcery', playerName, wizardId);
let callback = function (error, data, response) {
if (error) {
console.error(`Error: ${error}`);
} else {
console.log(`API called successfully. Returned data: ${data}`);
}
};
api.joinLobby(joinLobbyRequest, callback);
return {
type: constants.LOGIN,
playerName,
wizardId,
};
},
logout: () => {
return {
type: constants.LOGOUT,
};
},
};
export default loginActions;
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
env: {
production: {
plugins: ['react-native-paper/babel'],
},
},
};
};
Api index.js 文件
/**
* Wizard Card Game API
* This API drives the Wizard Card Game.
*
* The version of the OpenAPI document: 1.0.0
* Contact: rw.slinkman@gmail.com
*
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*
*/
import ApiClient from './ApiClient';
import CardEntity from './model/CardEntity';
import CreateGameRequest from './model/CreateGameRequest';
/* ... */
import UserRoundStateResponse from './model/UserRoundStateResponse';
import GameControllerApi from './api/GameControllerApi';
import LobbyControllerApi from './api/LobbyControllerApi';
export {
/**
* The ApiClient constructor.
* @property {module:ApiClient}
*/
ApiClient,
/**
* The CardEntity model constructor.
* @property {module:model/CardEntity}
*/
CardEntity,
/**
* The CreateGameRequest model constructor.
* @property {module:model/CreateGameRequest}
*/
CreateGameRequest,
/**
* The EstimateRequest model constructor.
* @property {module:model/EstimateRequest}
*/
EstimateRequest,
/* ... */
/**
* The GameControllerApi service constructor.
* @property {module:api/GameControllerApi}
*/
GameControllerApi,
/**
* The LobbyControllerApi service constructor.
* @property {module:api/LobbyControllerApi}
*/
LobbyControllerApi
};
有什么想法吗？
我解决了我的问题。以下是我执行的步骤：
将我的 api 文件夹更改为 react-native 应用程序。
expo install babel-plugin-module-resolver
- 在我的 client app: 的根目录中创建一个 .babelrc.json 文件
{
"presets": ["babel-preset-expo"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"wizard-card-game-api": "./api/WizardApiClient/src"
}
}
]
]
}
- 停止 expo 应用程序并重新运行它：
expo start -c
现在，loginAction.js 效果很好：
import WizardCardGameApi from 'wizard-card-game-api';
干杯。
重要资源：