将 WebStorm 与 Expo 结合使用

分享于2022年07月17日 expo node.js npm react-native webstorm 问答
【问题标题】:将 WebStorm 与 Expo 结合使用(Using WebStorm with Expo)
【发布时间】:2022-06-25 03:41:04
【问题描述】:

如何在托管的 Expo 项目中使用 WebStorm(特别是用于调试、语法检查和 TypeScript 的 eslinting 等)?如果我跟随世博会快速入门

expo init myapp
cd myapp
[myapp] expo start

(并选择使用标签管理)一切都按预期工作。但是,当我使用 myapp 作为现有源在 WebStorm 中设置 React Native 项目时,我遇到了各种问题。首先,该过程添加了我认为我并不真正需要的各种东西,但这是可以恢复的。但是事情很快就会变得致命。现在如果我尝试

[myapp] expo start

有人告诉我, expo 不见了(它不是在那里工作正常吗?)并安装它。如果我这样做

[myapp] npm install expo

我收到一大堆包错误(见下文),然后当我尝试时

[myapp] expo start

我又明白了

watchman warning:  Recrawled this watch 1 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
`watchman watch-del '/Users/Rax/Documents/Projects/Coding/React/learntest' ; watchman watch-project '/Users/Rax/Documents/Projects/Coding/React/learntest'`

Recrawled this watch 1 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
`watchman watch-del '/Users/Rax/Documents/Projects/Coding/React/learntest' ; watchman watch-project '/Users/Rax/Documents/Projects/Coding/React/learntest'`

应用在 Expo 中启动后,最终完全崩溃

Unrecognized event: {"type":"transformer_load_started"}
Unrecognized event: {"type":"transformer_load_done"}
Started Metro Bundler
Error: Problem validating fields in app.json. Learn more: https://docs.expo.dev/workflow/configuration/
 • should NOT have additional property 'displayName'.
iOS Bundling failed 10664ms
Unable to resolve module react-native-safe-area-context from /Users/Roy/Documents/Projects/Coding/React/learntest/App.tsx: react-native-safe-area-context could not be found within the project or in these directories:
  node_modules
  ../../../../../node_modules
  1 | import { StatusBar } from 'expo-status-bar';
> 2 | import { SafeAreaProvider } from 'react-native-safe-area-context';
    |                                   ^
  3 |
  4 | import useCachedResources from './hooks/useCachedResources';
  5 | import useColorScheme from './hooks/useColorScheme';

这里发生了什么?为什么简单地从现有源创建一个 WebStorm 项目会破坏一个正常运行的 Expo 项目?有什么方法可以让 WebStorm 与 Expo 合作?我应该为此目的使用其他 IDE 吗?


npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/eslint-plugin@4.33.0
npm WARN Found: eslint@8.12.0
npm WARN node_modules/eslint
npm WARN   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm WARN   node_modules/babel-eslint
npm WARN     babel-eslint@"^10.1.0" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN   11 more (eslint-plugin-jest, eslint-config-prettier, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/eslint-plugin@4.33.0
npm WARN node_modules/@typescript-eslint/eslint-plugin
npm WARN   @typescript-eslint/eslint-plugin@"^4.22.1" from @react-native-community/eslint-config@3.0.1
npm WARN   node_modules/@react-native-community/eslint-config
npm WARN 
npm WARN Conflicting peer dependency: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/eslint-plugin@4.33.0
npm WARN   node_modules/@typescript-eslint/eslint-plugin
npm WARN     @typescript-eslint/eslint-plugin@"^4.22.1" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/parser@4.33.0
npm WARN Found: eslint@8.12.0
npm WARN node_modules/eslint
npm WARN   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm WARN   node_modules/babel-eslint
npm WARN     babel-eslint@"^10.1.0" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN   11 more (eslint-plugin-jest, eslint-config-prettier, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/parser@4.33.0
npm WARN node_modules/@typescript-eslint/parser
npm WARN   @typescript-eslint/parser@"^4.22.1" from @react-native-community/eslint-config@3.0.1
npm WARN   node_modules/@react-native-community/eslint-config
npm WARN   1 more (@typescript-eslint/eslint-plugin)
npm WARN 
npm WARN Conflicting peer dependency: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/parser@4.33.0
npm WARN   node_modules/@typescript-eslint/parser
npm WARN     @typescript-eslint/parser@"^4.22.1" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN     1 more (@typescript-eslint/eslint-plugin)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-react-native@3.11.0
npm WARN Found: eslint@8.12.0
npm WARN node_modules/eslint
npm WARN   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm WARN   node_modules/babel-eslint
npm WARN     babel-eslint@"^10.1.0" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN   11 more (eslint-plugin-jest, eslint-config-prettier, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^3.17.0 || ^4 || ^5 || ^6 || ^7" from eslint-plugin-react-native@3.11.0
npm WARN node_modules/eslint-plugin-react-native
npm WARN   eslint-plugin-react-native@"^3.10.0" from @react-native-community/eslint-config@3.0.1
npm WARN   node_modules/@react-native-community/eslint-config
npm WARN 
npm WARN Conflicting peer dependency: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^3.17.0 || ^4 || ^5 || ^6 || ^7" from eslint-plugin-react-native@3.11.0
npm WARN   node_modules/eslint-plugin-react-native
npm WARN     eslint-plugin-react-native@"^3.10.0" from @react-native-community/eslint-config@3.0.1
npm WARN     node_modules/@react-native-community/eslint-config
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: use-subscription@1.6.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"17.0.2" from react-native@0.68.0
npm WARN   node_modules/react-native
npm WARN     peer react-native@"*" from @react-native-community/cli@7.0.3
npm WARN     node_modules/@react-native-community/cli
npm WARN     1 more (the root project)
npm WARN   3 more (react-shallow-renderer, react-test-renderer, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^18.0.0" from use-subscription@1.6.0
npm WARN node_modules/use-subscription
npm WARN   use-subscription@"^1.0.0" from react-native@0.68.0
npm WARN   node_modules/react-native
npm WARN 
npm WARN Conflicting peer dependency: react@18.0.0
npm WARN node_modules/react
npm WARN   peer react@"^18.0.0" from use-subscription@1.6.0
npm WARN   node_modules/use-subscription
npm WARN     use-subscription@"^1.0.0" from react-native@0.68.0
npm WARN     node_modules/react-native
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated core-js@1.2.7: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 141 packages, changed 4 packages, and audited 1116 packages in 18s

99 packages are looking for funding
  run `npm fund` for details

5 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.


【解决方案1】:

我不知道实际问题是什么,但我也面临同样的问题,解决方法是使用隧道而不是局域网或本地类型连接。 在此模式更改之前,请安装 @expo/ngrok@^4.1.0 此库用于隧道连接设置