I upgraded my react version to 56, I have done clean set up. Now I'm facing with this issue and I have no idea how to solve that.
I even Installed this https://www.npmjs.com/package/babel-preset-react-native.
error: bundling failed: Error: Cannot find module 'metro-react-native-babel-preset' from 'D:\React\Snap'
at Function.module.exports [as sync] (D:\React\Snap\node_modules\resolve\lib\sync.js:43:15)
at resolveStandardizedName (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:100:31)
at resolvePreset (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:57:10)
at loadPreset (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:76:20)
at createDescriptor (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:135:21)
at items.map (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:87:50)
at Array.map (<anonymous>)
at createDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:87:29)
at createPresetDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:79:10)
BUNDLE [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
package.json
{
"name": "SnapHaber",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.0"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "^5.0.2",
"jest": "23.2.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}
after npm i metro-react-native-babel-preset --save-dev :
Loading dependency graph, done.
error: bundling failed: Error: [BABEL] D:\React\Snap\index.js: .overrides is not allowed in preset options
at Object.keys.forEach.key (D:\React\Snap\node_modules\#babel\core\lib\config\validation\options.js:71:13)
at Array.forEach (<anonymous>)
at validate (D:\React\Snap\node_modules\#babel\core\lib\config\validation\options.js:69:21)
at instantiatePreset (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:242:36)
at cachedFunction (D:\React\Snap\node_modules\#babel\core\lib\config\caching.js:42:19)
at loadPresetDescriptor (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:233:45)
at config.presets.map.descriptor (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:66:38)
BUNDLE [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
You have installed the wrong dependendcies, you have install react-native babel preset, try by installing correct dependencies i.e metro-react-native-babel-preset.
You can install that by
npm i metro-react-native-babel-preset --save-dev
For more details refer this link - https://www.npmjs.com/package/metro-react-native-babel-preset
Related
I tried to create a shared component using a storybook with react-redux. I am using rollup to create a shared component. due to some error unable to create the shared component.
package.json
{
"name": "story1",
"version": "0.1.0",
"private": false,
"main": "./build/index.js",
"module": "./build/index.es.js",
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"rollup": "2.30",
"typescript": "^4.0.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "start-storybook -p 6006 -s public",
"build": "rollup -c",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-commonjs": "^17.0.0",
"#rollup/plugin-node-resolve": "^11.0.1",
"#storybook/addon-actions": "^6.1.11",
"#storybook/addon-essentials": "^6.1.11",
"#storybook/addon-links": "^6.1.11",
"#storybook/node-logger": "^6.1.11",
"#storybook/preset-create-react-app": "^3.1.5",
"#storybook/react": "^6.1.11",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.29.0"
}
}
rollup.config.js
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import packageJson from "./package.json";
// eslint-disable-next-line import/no-anonymous-default-export
export default {
input: "./src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [peerDepsExternal(), resolve(), commonjs(), typescript()]
};
and I run the yarn add stroy1 command in my other repository.
when I try to use this component I got an error
ERROR in ./node_modules/story1/build/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/gowthamv/Documents/Workspace/my-app/node_modules/story1/build'
# ./node_modules/story1/build/index.es.js 1:0-56 47:12-15 52:12-15 52:38-42 52:98-102 52:123-126 52:245-249 52:316-319 53:36-39 54:36-39 55:24-27 56:16-19 56:47-50 56:127-131 56:132-140 56:155-158 57:28-31 62:12-16 62:41-44 63:12-16 63:41-44 64:20-24 64:84-87 64:201-204 65:20-23 66:20-24 66:44-47 67:28-31 68:20-24 68:108-111 68:286-289 69:20-24 69:84-87 69:207-210 69:329-332 69:398-401
How to fix this error?
What the React version of the project you import the component?
I got the same error and found 2 solutions
Use React < 17 & Typescript < 4.1.0 with the following tsconfig change:
"jsx": "react" // from jsx-react
Use React 17 on both the library and the other repository with
"jsx": "react-jsx"
Updating your react version possibily can resolve your problem.
Command line: npm install --save react#latest.
If you wish to specific a version, you need to run:
npm install --save react#
e.g. npm install --save react#17.0.2
I had a similar problem which i could not figure out the cause.
In order to solve this problem i
deleted the node modules and package.lock.json
deleted npm and npm-cache folder in C:\Users\user\AppData\Roaming and rebooted the PC
Then ran npm cache clean to make sure the cache was correctly cleaned.
Updated the react and react-dom version to ^17.0.0
Updated my npm version to the most recent too, perhaps this might not be a reason for the error, but i found useful to perform the update.
After that i ran:
npm install
And my project was back up and running. I believe following this might might help one with a similar problem.
I do not understand what was the main cause of the error since it occurred with no tangible reason since the project was working just fine and out of a sudden the error appeared. I believe that the file got corrupted, and i think that the new jsx transform as from react 17 kind of solved the problem, since having react in scope was not more an absolute necessity for jsx compilation. details on the new jsx transform can be read on https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html .
To solve the error "Module not found: Error: Can't resolve 'react/jsx-runtime'", make sure to update the react package by opening your terminal in your project's root directory and running the command npm install react#latest react-dom#latest and restart your dev server.
Open your terminal in your project's root directory (where your package.json file is located) and run the following commands:
👇️ with NPM
npm install react#latest react-dom#latest
👇️ ONLY If you use TypeScript
npm install --save-dev #types/react#latest #types/react-dom#latest
----------------------------------------------
👇️ with YARN
yarn add react#latest react-dom#latest
👇️ ONLY If you use TypeScript
yarn add #types/react#latest #types/react-dom#latest --dev
credits: https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-react-jsx-runtime
I've running npm run dev command to run my react app. BUT then it pops up this Error: Cannot find module 'webpack/bin/config-yargs'. I've googled this error. Many people who solve this error tell me to install webpack and webpack-cli. Therefore, I went to install webpack and webpack-cli. However, the error still pops up. PLEASE HELP!
I've tried several solution, such as this
Cannot find module 'webpack/bin/config-yargs'
and this
How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs?
NOW I've installed webpack and webpack-cli.
My cmd
C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master>npm run dev
> truffle-init-webpack#0.0.2 dev C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master
> webpack-dev-server
internal/modules/cjs/loader.js:613
throw err;
^
Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
at Function.Module._load (internal/modules/cjs/loader.js:526:27)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:824:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! truffle-init-webpack#0.0.2 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the truffle-init-webpack#0.0.2 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2019-08-30T09_10_59_739Z-debug.log
My package.json
{
"name": "truffle-init-webpack",
"version": "0.0.2",
"description": "Frontend example using truffle v3",
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.26.3",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^3.2.0",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.11",
"web3": "^0.20.7",
"webpack": "^4.0.0",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^2.11.5"
},
"dependencies": {
"ajv": "^5.5.2",
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"ipfs-api": "^19.0.0",
"jquery": "^3.4.1",
"node-sass": "^4.8.3",
"popper.js": "^1.15.0",
"postcss-loader": "^2.1.6",
"precss": "^3.1.2",
"sass-loader": "^6.0.7"
}
}
I had the same problem and it was because the webpack version was not stable
I used the lower version and the problem was solved
npm install webpack#4.32.2 --save-dev
npm install webpack-cli#3.3.2 --save-dev
npm install webpack-dev-server#3.5.1 --save-dev
In your package.json file just change "dev": "webpack-dev-server" to "dev": "webpack serve"
If you have the error for the issues described here: https://github.com/webpack/webpack-dev-server/issues/2029
I wrote a python script to fix the problem until it's patched.
You can just add the command to your package.json script after adding the file to your project (assuming you have python installed).
https://github.com/bigbizze/FixWebPackError-Cannot-find-module-webpack-cli-bin-config-yargs
Try the following. Its worked for me
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack serve"
},
I had the same problem, try npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge
I think it's related to webpack version only. Can you please update the webpack, webpack-cli and webpack-dev-server with latest version and check it.
Hope this will work for you!
in package.json
use "dev":"webpack serve" instead of "webpack-dev-server"
Don't play with the webpack module for a while you are learning because it is tricky to do this stuff.
I have the same problem that you listed before
// change your mode to development in package.json
// make everything in devDependencies
{
"name": "timer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
...
}
}
In your webpack.config
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
}
This may work for you.
This is my package.json
{
"name": "Locals",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.3.1",
"react": "16.6.3",
"react-native": "0.58.3",
"react-native-elements": "^1.0.0",
"react-native-vector-icons": "^6.2.0"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
And I get following logs of failure:
Loading dependency graph, done. error: bundling failed: Error: Cannot
find module 'NativeModules'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.get NativeModules [as NativeModules] (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native/Libraries/react-native/react-native-implementation.js:313:12)
at Object.get [as NativeModules] (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native-vector-icons/dist/lib/react-native.js:1:344)
at Object. (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native-vector-icons/dist/lib/ensure-native-module-available.js:1:238)
at Module._compile (internal/modules/cjs/loader.js:689:30)
Run rm -rf node_modules && npm install to reinstall the dependencies.
Make sure that react-native-vector-icons is properly linked. Usually you should have this line within android/app/build.gradle:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
More info here:
https://github.com/oblador/react-native-vector-icons#android
Kill the npm server (ctrl+c or just run kill -15 [pid]) and restart it using npm start -- --reset-cache
Finally, don't forget to rebuild your app:
./android/gradlew clean && react-native run-android
I am trying to setup React/Apollo frontend with graphql backend(elixir/phoenix). I did npm install apollo-boost react-apollo graphql --save and then tried to import ApolloClient from "apollo-boost"; in my index.js but I am getting
Uncaught Error: Cannot find module 'graphql' from 'apollo-link-state/lib/bundle.umd.js'
at require (app.js:61)
at expanded (app.js:34)
at app.js:148
at connectionRemoveConfig.test (bundle.umd.js:6)
at bundle.umd.js:9
at bundle.umd.js:151
at initModule (app.js:42)
at require (app.js:59)
at expanded (app.js:34)
at app.js:148
in my browser console. I couldn't find any related question. Can you point what went wrong?
Here is my package.json.
{
"repository": {},
"license": "MIT",
"scripts": {
"deploy": "brunch build --production",
"watch": "brunch watch --stdin"
},
"dependencies": {
"apollo-boost": "^0.1.16",
"babel-preset-react": "^6.24.1",
"graphql": "^14.0.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"react": "^16.5.1",
"react-apollo": "^2.1.11",
"react-dom": "^16.5.1"
},
"devDependencies": {
"babel-brunch": "6.1.1",
"brunch": "2.10.9",
"clean-css-brunch": "2.10.0",
"uglify-js-brunch": "2.10.0"
}
}
Thank you for your time.
I solved it by installing them separately.npm install apollo-client apollo-cache-inmemory apollo-link-http react-apollo graphql-tag graphql --save
I tried to learn simple project with MERN stack by doing example.
But i don't know why webpack didn't work and throw an error like this in terminal.
I'm using Ubuntu v16.04.
npm run dev
mern-stack#1.0.0 dev /home/trungh13/Dev/mern-stack
webpack -wd
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (NormalModuleFactory).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-stack#1.0.0 dev: webpack -wd
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mern-stack#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is my package.json file:
{
"name": "mern-stack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node ./server/server.js --ignore public/",
"dev": "webpack -wd"
},
"author": "trungh13",
"license": "ISC",
"dependencies": {
"ejs": "^2.5.7",
"express": "^4.16.3",
"mongodb": "^3.0.5",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"nodemon": "^1.17.2",
"webpack": "^4.2.0"
}
}
Here is my webpack.config.js:
module.exports={
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader'
}
]
}
};
Thanks a lot.
The problem is inside the module object. The loaders property is invalid and you should use the rules property instead. Also, in webpack-4 you need to provide the mode property (possible values are development, production and none).
Another thing to mention is that you need to include the webpack-cli package in your devDependencies because in the latest version of webpack, the CLI tool was moved to this package: webpack-cli
Check this webpack-demo project using Webpack 4 configuration objects (for development and production environments).
I think the previous tutorial project could be helpful.