I am getting uncaught reference error in react native why so ? I am able to build successfully but the bundler is showing this error. How can I fix it ?
Note: I am using windows 10
Screenshot:
package.json:
{
"name": "rchampz",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"lodash": "^4.17.11",
"moment": "^2.22.2",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-dash": "^0.0.9",
"react-native-dropdownalert": "^3.5.0",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-paper": "^2.0.1",
"react-native-render-html": "^3.10.0",
"react-native-timeline-theme": "^0.0.9",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.14.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
.babelrc :
{
"presets": ["module:react-native"]
}
Either include preset of react-native in .bablerc or export presets from babel.config.js like below
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-transform-runtime'
],
}
When in doubt, use react-native-cli to create a new ReactNative project, and see the build files. I just did that, and here's what I have :
package.json
{
"name": "someproject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.47.1",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
.babelrc :
{
"presets": ["module:metro-react-native-babel-preset"]
}
Note that if you changed your package.json, some cleaning might be needed first
Related
I have created an alias for react and react-dom in my next.config.js. This is my next.config.js:
var path = require("path");
module.exports = (phase) => {
return {
// typescript: {
// ignoreBuildErrors: false,
// },
webpack5: true,
webpack(config, options) {
// const { isServer } = options;
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
config.module.rules.push({
test: /\.svg$/,
loader: "#svgr/webpack",
});
config.resolve.alias["react"] = path.resolve(
__dirname,
"shared-js/node_modules/react"
);
config.resolve.alias["react-dom"] = path.resolve(
__dirname,
"shared-js/node_modules/react-dom"
);
console.log(path.resolve(__dirname, "shared-js/node_modules/react-dom"));
return config;
},
};
};
Why am I doing this?
I have a component library, which is based on material ui. This is imported to my nextjs app via a submodule (shared-js). This is the package.json for my component library:
{
"name": "my-component-library",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd": "dist/index.min.js",
"source": "src/index.js",
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build-dev": "NODE_ENV=develop rollup -c --minifyInternalExports=false",
"prettier": "prettier --write ./src"
},
"peerDependencies": {
"eslint": "^8.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.1",
"#mui/styles": "^5.4.2",
"#mui/x-data-grid": "^5.7.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"prop-types": "^15.8.1",
"react-beautiful-dnd": "^13.1.0",
"react-grid-layout": "^1.3.4",
"react-resizable": "^3.0.4",
"recharts": "^2.1.9",
"rollup-plugin-import-css": "^3.0.3",
"styled-components": "^5.3.3",
"use-react-screenshot": "^3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.17.10",
"#babel/plugin-transform-runtime": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.2",
"#svgr/rollup": "^6.2.1",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^5.0.0",
"prettier": "^2.6.2",
"rollup": "^2.72.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.6.0"
},
"files": [
"dist"
]
}
Here is my package.json for my nextjs app:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"dependencies": {
"next": "^12.1.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
And my folder structure for the project:
-.next
-node_modules
-pages
-shared-js
--node_modules
--package.json
package.json
next.config.js
The problem is, that I have two conflicting versions of react and react-dom (I guess) in my shared-js/node_modules and the other ones in the node_modules folder of my nextjs app. This caused the error "Invalid hook call" whenever I tried to import a component to my nextjs app. I looked into the documentation and saw that this might be because of two conflicting react / react-dom versions, which is indeed the case. So I tried to avoid this by defining this alias in my next.config.js.
Which led me here. Whenever I run npm run dev or npm run build for my nextjs app, I get this error, telling me that react-dom is apparently missing:
wait - compiling /_error (client and server)...
wait - compiling...
error - ./node_modules/next/dist/client/index.js:513:35
Module not found: Can't resolve 'react-dom/client'
Why is that? The path is correct, the dependency is there but still I get this error. Is there anything I am missing? Or something I am doing wrong?
What I already tried: Deleting node_mdoules and package-lock.json from both nextjs and my component library and reinstall them. Deleting .next and restart via npm run dev
that's how I solved the problem with the conflicting versions.
Good description of the problem: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/
My next.config.js
var path = require("path");
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};
Im new to react-native. I keep getting this error when I run
react-native run-android
This is my last package.json, that was working Ok the last time I pushed changes but now it seems to have broken.
my package.json
{
"name": "taxiapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.0.0",
"native-base": "^2.8.0",
"react": "16.5.0",
"react-addons-update": "^15.6.2",
"react-native": "^0.54.1",
"react-native-maps": "^0.21.0",
"react-native-router-flux": "^4.0.5",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "^0.48.1",
"react-test-renderer": "16.5.0",
"redux-logger": "^3.0.6"
},
"jest": {
"preset": "react-native"
}
}
Try to run:
del %appdata%\Temp\react-* & del %appdata%\Temp\metro-* & del %appdata%\Temp\haste-* & watchman watch-del-all & npm start -- --reset-cache
If it still doesn't work you could try 2 solutions here:
Upgrade react-native to 0.57.2
or downgrade babel, from what I know RN 0.54 uses babel 6 not 7.
Here is a configuration that worked for me for RN 0.57:
React native upgrade from babel 6 to babel 7
Please try adding these transform rules into your package.json:
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)"
]
},
Everything in my project was working until randomly everything crashed upon launch. I am guessing that this has something to do with babel because it was working on second and now it isn't. As you can see the error persists throughout different parts of my application.
Something to note is it says "check the render method of 'SceneView'", but I do not have a SceneView.
I was getting this error: undefined is not an object (evaluating 'regeneratorRuntime.mark'), until I decided to switch from npm to yarn and now I am getting the error you are currently seeing.
package.json:
{
"name": "roam",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.2.0",
"babel-preset-react-native": "^2.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^22.4.4",
"jest-enzyme": "^6.0.2",
"jest-react-native": "^18.0.0",
"react-test-renderer": "^16.4.1",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
},
"dependencies": {
"axios": "^0.18.0",
"babel-preset-env": "^1.6.1",
"expo": "^28.0.0",
"native-base": "^2.6.1",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.4.1",
"react-native": "^0.49.5",
"react-native-elements": "^0.19.1",
"react-native-pages": "^0.7.0",
"react-native-sensitive-info": "^5.1.0",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-axios-middleware": "^4.0.0",
"redux-persist": "^5.10.0",
"redux-persist-sensitive-storage": "^1.0.0",
"redux-thunk": "^2.3.0",
"tcomb-form-native": "^0.6.14",
"util": "*"
}
}
.babelrc:
{
"presets": [["env", {"modules": false}], "react-native"],
"env": {
"test": {
"presets": [["env", {"modules": false}], "react-native"]
}
}
}
Fixed the bug by downgrading react dependency.
I'm facing this issue in react native v-0.56.0. Please Help me out. When i am downgrading to 50 or 49 it's working fine, but on latest version it's giving this error when creating build !
cmd npm run ios
My babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
And my package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native": "^5.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^23.3.0",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"react": "^16.3.0",
"react-native": "^0.56.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}
We have a small hackaton in our office and I have some problem with react-native-maps. I am getting error: undefined is not an object (evaluating 'PropTypes.string') which is going to MapMaker.js file from MapView.
There is my package.json file:
{
"name": "niehandlowa",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"native-base": "^2.3.10",
"prop-types": "^15.6.1",
"react": "16.3.0-alpha.3",
"react-native": "^0.54.2",
"react-native-elements": "^0.19.0",
"react-native-maps": "^0.4.2",
"react-native-router-flux": "^4.0.0-beta.30",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.0-alpha.3"
},
"jest": {
"preset": "react-native"
}
}
I will be glad because today our team want to finish great app that we started yesterday :)
Have a nice day everybody!
It is most likely related to the version of react-native-maps you are using. v0.4.2 is using PropTypes from react and the library separated now. You should use a more resent version of the react-native-maps library