App crashes after upgrade expo sdk from 30 to 31 - react-native

I have updated the SDK using this instruction. And I ran the app. The app shows this error in red screen:
babelHelpers.readOnlyError is not a function. (In
‘babelHelpers.readOnlyError(“newSize”)’, ‘babelHelpers.readOnlyError’
is undefined )
How can I solve this error?
I tried clearing the yarn cache, installing yarn packages again but do not work.

I found this webpage solving my problem.
Add the following in package.json:
"devDependencies": {
"babel-plugin-transform-remove-console": "6.9.4",
"babel-preset-expo": "^5.0.0"
}
make the .babelrc:
{
"presets": ["babel-preset-expo"],
"env": {
"production": {
"plugins": [
"transform-remove-console"
]
}
}
}
Update .babelrc and package.json
Delete node_modules folder
Install babel-plugin-transform-remove-console, babel-preset-expo. Run yarn or npm.
Run expo clearing cache using expo start -c

Related

Failed to load plugin 'react' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-react'

When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it

babel-plugin-transform-remove-console in production mode React Native

I have installed
npm i babel-plugin-transform-remove-console --save
Also added below code in .babelrc:
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
But in production mode, its not removing console.log.
Also in some sample project .babelrc file is not getting generated after doing npm installation.Am I missing anything?
Reference link

Yarn installing multiple versions of the same package

I have angular in my dependencies at 1.5.11:
{
"dependencies": {
"angular": "1.5.11",
"angular-foundation": "0.7.0"
}
}
angular-foundation happens to depend on angular#>=1.3.0.
Why does Yarn install angular#1.6.9 as a nested dependency of angular-foundation instead of using the project's version? This causes angular to exist twice in the app and doesn't work properly:
node_modules
angular (1.5.11)
angular-foundation (0.7.0)
node_modules
angular (1.6.9)
This doesn't happen with npm#5.6.0 - npm uses 1.5.11 for both the app and the package.
You need to use Yarn resolutions for this
https://yarnpkg.com/lang/en/docs/selective-version-resolutions/
So your package.json will become like this
{
"name": "depdencies",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"angular": "1.5.11",
"angular-foundation": "0.7.0"
},
"resolutions": {
"**/angular": "1.5.11"
}
}
Which tells yarn that any child angular dependency will be set to 1.5.11. After updating this run below
$ rm yarn.lock
$ yarn
https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias
yarn add <alias-package>#npm:<package>
yarn add react17#npm:react#17

Build error: missing babel-preset-expo in expo mobile app

I'm new to react-native and am in the early stages of creating an app with Expo. I had a working app until installing redux. Currently I am getting the following error from the XDE:
Problem checking node_modules dependencies: Unexpected end of JSON input
and the following from the ios simulator:
Building JavaScript bundle: error
TransformError: ../app/main.js: Couldn't find preset "babel-preset-expo" relative to directory "../app/"
I believe my node modules contain valid JSON. It should be noted that I'm using a more current version of react-native than expo.
I experienced this issue when I tried moving to expo version 21.0.0.
You should try to delete your node modules and use yarn to install.
package.json
dependencies:{
"babel-preset-expo" : "^4.0.0",
"expo": "^21.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-21-0.2.tar.gz"
}
my .babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}

Babel CLI is extremely slow

So I follow the installation here, but babel takes very long time to compile, even small files:
app.js
let app = 1;
.babelrc
{ "presets": ["es2015"] }
package.json
"scripts": {
"build": "babel app.js -o dist/app.js"
},
"devDependencies": {
"babel-cli": "^6.4.5",
"babel-preset-es2015": "^6.3.13"
}
Then npm run build will take ~30s to compile.
I'm using npm#3.3.12
You might be compiling node_modules and bower_components too.
You can try adding the ignore property in your projects .babelrc like so:
{
...
"ignore": /(node_modules|bower_components)/
...
}
Hope this solves your issue
Update September 2019
Found upgrading to Babel 7 solved this. Perhaps try:
$ npm install --save-dev #babel/core #babel/node #babel/preset-env
Your package.json should contain something like:
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/node": "^7.6.1",
"#babel/preset-env": "^7.6.0"
}
My .babelrc file is as follows:
{
"presets": ["#babel/preset-env"]
}
Now, when I run:
npx babel-node src/index.js
the performance is almost instantaneous (it was taking 20+ seconds with babel 6).
See the babel 7.5 docs for more details on this.
Also, for reference on the upgrade, see this stackoverflow question & answer.