I get several errors after following the guide on react-rative-web.
I first created a new project: react-native init test --version 0.55.4
Then I installed the dependencies:
yarn add --dev babel-loader url-loader webpack webpack-cli webpack-dev-server babel-plugin-react-native-web
yarn add react react-dom react-native-web
copied the index.web.js and web/webpack.config.js
After executing the command:
webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors
I get the error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'react-art'
OK. So I installed the (optional?) module yarn add react-art
The next run printed:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin 0 specified in "base" provided an invalid property of "createElement"
Now I don't know what to do. How can I fix this error (and maybe the following)?
Related
when I'm try create new react native project
on macos Ventura 13.2
✔ Downloading template
✖ Copying template
error Error: Couldn't find the "/var/folders/mn/m8xhgjss2cj0jf5svmxg_2vm0000gn/T/rncli-init-template-VUPUIq/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template.
Error: Error: Couldn't find the "/var/folders/mn/m8xhgjss2cj0jf5svmxg_2vm0000gn/T/rncli-init-template-VUPUIq/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid. Read more: https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
at createFromTemplate (/Users/imac/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:129:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.initialize [as func] (/Users/imac/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/commands/init/init.js:181:3)
at async Command.handleAction (/Users/imac/.npm/_npx/7930a8670f922cdb/node_modules/#react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details.
I have tried removing and reinstalling the following
sudo npm uninstall -g react-native-cli #react-native-community/cli
Nodejs
The problem has been fixed by updating the system to 13.2.1
Then execute
sudo npm uninstall -g react-native-cli #react-native-community/cli
npx react-native init AwesomeProject --npm
I am currently working on a project following the documentation in this github repo.
github repo
I first clone the repo into a folder. I then cd into the folder and do a run yarn install to get all dependencies. I get the following error. I have node v17.2.0 installed.
(base) Eddys-MacBook-Pro:avalanche-wallet-sdk eddyarce$ yarn install
yarn install v1.22.17
warning ../../../../../package.json: No license field
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
success Already up-to-date.
$ husky install && yarn build:prod
husky - Git hooks installed
yarn run v1.22.17
warning ../../../../../package.json: No license field
$ rollup -c --environment BUILD:production
Error loading `tslib` helper library.
[!] Error: Package subpath './package.json' is not defined by "exports" in /Users/eddyalvarado_1/Documents/GitHub/plasma-wallet-web3/js/avalanche-wallet-sdk/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json
Error: Package subpath './package.json' is not defined by "exports" in /Users/eddyalvarado_1/Documents/GitHub/plasma-wallet-web3/js/avalanche-wallet-sdk/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
at packageExportsResolve (node:internal/modules/esm/resolve:683:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/eddyalvarado_1/Documents/GitHub/plasma-wallet-web3/js/avalanche-wallet-sdk/node_modules/rollup-plugin-typescript2/src/tslib.ts:11:23)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
https://github.com/ezolenko/rollup-plugin-typescript2/issues/286
Upgrade your tslib version (>=0.31.0) or downgrade your node version (<17.0.0)
error: bundling failed:
Error: Unable to resolve module AccessibilityInfo from D:\MyApp\node_modules\react-native\Libraries\react-native\react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map
Its some incompatible versioning problems in React native.Try this it will work
Change versions of following in package.json
In dependencies :-
"react": "16.3.1"
"react-native": "0.55.4"
In devDependencies :-
"babel-preset-react-native": "2.1.0"
Delete node_modules and run npm install --save
Then run application by react-native run-android
It will run fine ...
Heading
first of all try with
npm start -- --reset-cache
If this is not working
than delete node modules & npm install
npm start -- --reset-cache
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module AccessibilityInfo from E:\react-apps\Whatsapp\node_modules\react-native\Libraries\react-native\react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map
As you have react-native version "0.44.0" and react with version "16.3.1", as per the document you must have correct versions dependencies. Please upgrade your react native version.
Please refer this link for more details https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
remove node_modules folder from your project. Also use below commands:
npm prune
npm cache clear
npm cache clean --force
npm start -- --reset-cache
npm i
I'm trying to learn React Native development by following instruction:
nvm install v4.2.6
nvm alias default v4.2.6
npm install -g react-native-cli
react-native init RNApp
cd RNAPP
Then I open iOS app project and compile program. Then I got follow error:
...
++ NVM_NPM_PREFIX=/Users/user/.nvm/versions/node/v4.2.6
++ nvm_tree_contains_path /Users/user/.nvm /Users/user/.nvm/versions/node/v4.2.6
++ '[' -n '' ']'
+ [[ -x /Users/user/.nodenv/bin/nodenv ]]
+ react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app/main.jsbundle --assets-dest /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app
bundle: Created ReactPackager
uncaught error Error: ReferenceError: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
at Logger.error (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
at OptionManager.addConfig (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
at OptionManager.findConfigs (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
at OptionManager.init (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
at File.initOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transform (/Users/user/Desktop/RNApp/node_modules/react-native/packager/transformer.js:59:24)
TransformError: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
See logs /var/folders/g9/m3cmg0m10cl80xt362wpsld00000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:139:23)
at BunserBuf.<anonymous> (SocketClient.js:53:42)
at emitOne (events.js:77:13)
at BunserBuf.emit (events.js:169:7)
at BunserBuf.process (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:289:10)
at /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:244:12
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)
Command /bin/sh failed with exit code 1
Is I do something wrong? or just there is something bug in babel for react-native support?
➜ RNApp react-native --version
react-native-cli: 0.1.10
react-native: 0.18.1
But it seems that run-android is working fine:
:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!
This root cause of the issue is that React Native uses Babel 6, which deprecated the use of the stage option on .babelrc files, and react-deep-force-update, a sub-dependency of React Native, still declares a .babelrc file with that option.
This is an issue with any third party modules that still use an older Babel in their own build process and do not clear the configuration files for the npm publish.
I have worked around the issue by adding the following npm run scripts to my package json:
"scripts": {
"clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
"postinstall": "npm run clean:babelrc"
}
The script nukes all .babelrc files under the node_modules directory after every npm install, except the one under the react-packager directory, which is React Native packager uses to configure its own babel rules.
The issue is being tracked on React Native GitHub repository.
I updated the npm packages.
react-proxy ==> 1.1.2
react-deep-force-update ==> 2.0.1
You need remove the packages files first in node_modules. Then install the new version.
It works for me.