英文:
Unable to resolve "../Utilities/Platform" error with Metro bundler
问题
我使用React Native与Expo、Expo Router和Metro构建地图应用程序。我使用了react-native-maps包。React-native-maps不支持Web（https://docs.expo.dev/versions/latest/sdk/map-view/），因此我选择在Web上使用React Leaflet。然后，在我的应用程序中，我进行条件渲染，以在Web上渲染Leaflet，在Android和iOS上渲染React Native Maps。
我的问题是，当我尝试构建Web应用程序时，出现错误“无法解析“node_modules\react-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js”中的“../Utilities/Platform””错误。
我在GitHub上找到了相同问题的问题：https://github.com/react-native-maps/react-native-maps/issues/4641。为了解决这个问题，有人建议运行一个postinstall脚本。我是一个新手，不确定我是否做对了。
我做了什么：
- 在我的项目根目录创建了一个postinstall.js脚本
- 粘贴了postinstall脚本的内容
- 运行了
node postinstall.js
这并没有解决我的问题。我相当确定这不是正确的解决方法。
我希望的是不再出现错误，并能够构建Web应用程序。
英文:
I use React Native with Expo, Expo Router and Metro to build a map application. I used react-native-maps package. React-native-maps is not available for the web (https://docs.expo.dev/versions/latest/sdk/map-view/), so I choose to use React Leaflet for the web. Then, in my app I do conditional rendering for rendering Leaflet on web and React Native Maps on Android and iOS.
My problem is that I have an error Unable to resolve "../Utilities/Platform" from "node_modules\react-native\Libraries\ReactPrivate\ReactNativePrivateInterface.js" error when I try to build for the web.
I found issues on Gihub with same problem : https://github.com/react-native-maps/react-native-maps/issues/4641. To resolve the problem, the person suggest to run a postinstall script. I am a big newbie and I'm not sure I did the things right.
What I did :
- Create a postinstall.js script at the root of my project
- Past the content of the postinstall script
- Run
node postinstall.js
This did not solve my problem. I am pretty sure that was not the right way to do it.
What I expect to happen, is to not have the error, and being able to build for the web.
答案1
得分: 2
Sure, here is the translated content:
你是否将这个脚本添加到 package.json 的 post-install 脚本中，就像这样：
Package.json
"scripts": {
....
"postinstall": "node postinstall.js",
....
}
postinstall.js
const chalk = require('chalk')
const { readFile, writeFile, copyFile } = require('fs').promises
console.log(chalk.green('这里'))
function log(...args) {
console.log(chalk.yellow('[react-native-maps]'), ...args)
}
reactNativeMaps = async function() {
log('🚆 创建 react-native-maps 的 web 兼容版本，使用空模块加载到 web 构建中')
const modulePath = 'node_modules/react-native-maps'
await writeFile(`${modulePath}/lib/index.web.js`, 'module.exports = {}', 'utf-8')
await copyFile(`${modulePath}/lib/index.d.ts`, `${modulePath}/lib/index.web.d.ts`)
const pkg = JSON.parse(await readFile(`${modulePath}/package.json`))
pkg['react-native'] = 'lib/index.js'
pkg['main'] = 'lib/index.web.js'
await writeFile(`${modulePath}/package.json`, JSON.stringify(pkg, null, 2), 'utf-8')
log('✅ 脚本成功运行')
}
reactNativeMaps()
之后，通过 npm i 或 yarn install 安装 node_modules，安装 node_module 会运行这个补丁。
不要忘记运行 npx react-native start --reset-cache 命令。
注意： 成功运行补丁后，只需验证是否存在此文件 node_modules/react-native-maps/lib/index.web.js。
英文:
did you add this script into package.json post-install script like this
Package.json
"scripts": {
....
"postinstall": "node postinstall.js",
....
}
postinstall.js
const chalk = require('chalk')
const { readFile, writeFile, copyFile } = require('fs').promises
console.log(chalk.green('here'))
function log(...args) {
console.log(chalk.yellow('[react-native-maps]'), ...args)
}
reactNativeMaps = async function() {
log('📦 Creating web compatibility of react-native-maps using an empty module loaded on web builds')
const modulePath = 'node_modules/react-native-maps'
await writeFile(`${modulePath}/lib/index.web.js`, 'module.exports = {}', 'utf-8')
await copyFile(`${modulePath}/lib/index.d.ts`, `${modulePath}/lib/index.web.d.ts`)
const pkg = JSON.parse(await readFile(`${modulePath}/package.json`))
pkg['react-native'] = 'lib/index.js'
pkg['main'] = 'lib/index.web.js'
await writeFile(`${modulePath}/package.json`, JSON.stringify(pkg, null, 2), 'utf-8')
log('✅ script ran successfully')
}
reactNativeMaps()
after this install node_modules by npm i or yarn install, installing node_module will run this patch
Don't forget to run npx react-native start --reset-cache command
Note: After running the patch successfully, just verify that if this file exists or not node_modules/react-native-maps/lib/index.web.js
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论