React and ReactDOM not loading using webpack, babel - javascript

I am setting up a React project using webpack and babel, but I am getting the error that React and ReactDOM can't be resolved.
Is the problem is with the version of Webpack or Babel?
PS C:\Users\abhi\Desktop\mern-app> npm run webpack
> mern-app#1.0.0 webpack C:\Users\abhi\Desktop\mern-app
> webpack
ERROR in ./app.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\abhi\Desktop\mern-app'
# ./app.js 5:13-29
ERROR in ./app.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\abhi\Desktop\mern-app'
# ./app.js 9:16-36
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-app#1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-app#1.0.0 webpack 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\abhi\AppData\Roaming\npm-cache\_logs\2018-04-21T14_25_50_508Z-debug.log
the configs and files are as belows
package.json
{
"name": "mern-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
},
"author": "Abhishek Kulshrestha",
"license": "ISC",
"dependencies": {
"npm": "^5.8.0",
"react": "^16.3.2",
"react-dom": "^16.3.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports ={
entry:'./app.js',
output:{
filename:'bundle.js',
path:__dirname
},
resolve:{
extensions:['.js']
},
module:{
rules:[{
test:/.jsx?$/,
use:{
loader:'babel-loader',
options:{
presets: ['env',
'react']
}
},
exclude:/.node_modules/
}]
}
}
app.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return '<h1>Hello </h1>'
}
}
ReactDOM.render(<App/>,document.getElementById('app'));
All files (package.json,webpack.config.js,app.js,index.html) are in same main folder
Please Help

This code looks fine to me. I think you have missed the dependency installation step before running webpack command.
Please try and follow the below steps in order and see if it resolves the error.
Run npm install inside the directory this will make sure all the dependencies you have mentioned in package.json are downloaded to node_modules directory.
Then run npm run webpack to generate the bundle.js

Related

ESLint: Failed to load config "next/babel"

I'm facing this problem deploying my site on vercel from my Github repo.
Here is my complete vercel log file.
[22:42:45.867] Cloning github.com/hammadsohail/ecommerce_sanity_stripe
(Branch: main, Commit: e24ccfc) [22:42:46.012] Previous build cache
not available [22:42:46.658] Cloning completed: 790.981ms
[22:42:46.946] Running "vercel build" [22:42:47.589] Vercel CLI 28.9.0
[22:42:47.997] Running "install" command: npm install --legacy-peer-deps... [22:43:00.681] [22:43:00.681] added 331 packages, and audited 332 packages in 12s [22:43:00.681]
[22:43:00.681] 82 packages are looking for funding [22:43:00.682]
run npm fund for details [22:43:00.683] [22:43:00.683] found 0
vulnerabilities [22:43:00.708] Detected Next.js version: 13.0.6
[22:43:00.713] Detected package-lock.json generated by npm 7+...
[22:43:00.714] Running "npm run build" [22:43:01.111] [22:43:01.111]
ecommerce#0.1.0 build [22:43:01.111] > next build [22:43:01.111] [22:43:01.480] info - Loaded env from /vercel/path0/.env
[22:43:01.665] Attention: Next.js now collects completely anonymous
telemetry regarding usage. [22:43:01.666] This information is used to
shape Next.js' roadmap and prioritize features. [22:43:01.667] You can
learn more, including how to opt-out if you'd not like to participate
in this anonymous program, by visiting the following URL:
[22:43:01.668] https://nextjs.org/telemetry [22:43:01.668]
[22:43:01.956] info - Linting and checking validity of types...
[22:43:02.455] error - ESLint: Failed to load config "next/babel" to
extend from. Referenced from: /vercel/path0/.eslintrc.json
[22:43:02.463] info - Creating an optimized production build...
[22:43:02.518] info - Disabled SWC as replacement for Babel because
of custom Babel configuration ".babelrc"
https://nextjs.org/docs/messages/swc-disabled [22:43:03.248] info -
Using external babel configuration from /vercel/path0/.babelrc
[22:43:08.424] Failed to compile. [22:43:08.424] [22:43:08.424]
./components/Navbar.jsx [22:43:08.425] Module not found: Can't resolve
'next/Link' in '/vercel/path0/components' [22:43:08.425]
[22:43:08.425] Import trace for requested module: [22:43:08.425]
./components/Navbar.jsx [22:43:08.425] ./components/index.js
[22:43:08.425] [22:43:08.426] ./lib/client.js [22:43:08.426] Module
not found: Can't resolve '#sanity/Client' in '/vercel/path0/lib'
[22:43:08.426] [22:43:08.426] Import trace for requested module:
[22:43:08.426] ./lib/client.js [22:43:08.426] [22:43:08.426]
[22:43:08.426] > Build failed because of webpack errors [22:43:08.465]
Error: Command "npm run build" exited with 1
Also in my Vscode its giving me
error:error - ESLint: Failed to load config "next/babel" to extend
from. Referenced from: C:\Users\hammad
sohail\Desktop\ecommerce\Ecommerce.eslintrc.json
My packages.json:
{
"name": "ecommerce",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#babel/core": "^7.17.9",
"#sanity/client": "^3.2.0",
"#sanity/image-url": "^1.0.1",
"#stripe/stripe-js": "^1.25.0",
"canvas-confetti": "^1.5.1",
"next": "12.1.0",
"next-sanity-image": "^3.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"stripe": "^8.209.0"
},
"devDependencies": {
"#babel/preset-react": "^7.18.6",
"eslint": "8.13.0",
"eslint-config-next": "12.1.4",
"next": "13.0.6"
}
}
My .eslintrc:
"extends":["next/babel","next/core-web-vitals"]
I am trying to deploy my site on vercel. Anyone has this similar issue?

React Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined

I am having an npm run build error. I didn't get this error on localhost, I got the error while deploying my .NetCore React app. I ran an npm update but that didn't fix anything. Could I please no what's failing here?
Here's my package.json:
{
"name": "InfrastructureConnect",
"version": "0.1.0",
"private": true,
"dependencies": {
"#progress/kendo-react-dialogs": "^2.8.0",
"react": "^16.0.0",
"react-cookie": "^4.0.3",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-select": "^3.1.0",
"rimraf": "^2.6.2",
"swagger-ui": "^3.44.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Here is the error I get after I run npm run build:
Creating an optimized production build...
Failed to compile.
./node_modules/swagger-ui/dist/swagger-ui.css
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'toFixed' of undefined
at Array.filter (<anonymous>)
at Array.filter (<anonymous>)
at Array.filter (<anonymous>)
at Array.forEach (<anonymous>)
at runMicrotasks (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! InfrastructureConnect#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the InfrastructureConnect#0.1.0 build 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\abhiredd\AppData\Roaming\npm-cache\_logs\2021-03-10T21_51_45_254Z-debug.log
After multiple attempts to solve this, here's a few things that fixed it:
Package.json:
"swagger-ui": "^3.52.2"
Some sort of swagger component:
import React, { Component } from 'react';
import SwaggerUi, { presets } from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
class SwaggerHelp extends Component {
displayName = SwaggerHelp.name;
componentDidMount() {
SwaggerUi({
dom_id: '#swaggerContainer',
url: `/swagger/v1/swagger.json`,
presets: [presets.apis],
docExpansion: 'none',
});
}
render() {
return (
<div id="swaggerContainer" />
);
}
}
export default SwaggerHelp;
Hopefully, this helps.

Unable to run dev

I am currently taking a course on Udemy and I am stuck, I am having a problem running script. When I run the command npm run dev, I get this error message:
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! forkify#1.0.0 dev: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the forkify#1.0.0 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\user\AppData\Roaming\npm-cache\_logs\2020-05-01T10_10_11_136Z-debug.log
What would be wrong? This is my package.json code:
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "Marv",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
Here is the webpack.config.js code:
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
mode: 'development'
};
What could be wrong?
UPDATE: Some way I was able to finally npm run dev but it is being created in the wrong directory. How can I solve this?
I need it to appear under the starter > dist > js
Your path are not good replace entry: './src/js/index.js' by entry: './started/src/js/index.js'

I get an error when I run Reactjs project from command line: npm run it

Failed at the reactjs#1.0.0 it script 'webpack-dev-server'.
Make sure you have the latest version of node.js and npm installed.
If you do, this is most likely a problem with the reactjs package,
not with npm itself. Tell the author that this fails on your system:
webpack-dev-server You can get information on how to open an issue for this project with:npm bugs reactjs Or if that isn't available, you can get their info via: npm owner ls reactjs There is likely additional logging output above.
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! reactjs#1.0.0 it: `webpack-dev-server`
npm ERR! Exit status 1
My Webpack.config.js
var path = require("webpack");
module.exports = {
entry: "./script.js",
output: {
path: path.resolve(__dirname, + "/build"),
filename: "index.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react"]
}
}
]
}
}
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "Starter kit for React course by Jack",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server", "<----- something wrong here"
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "VladBelo",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^7.0.0",
"webpack": "^2.4.2"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
Looks like webpack-dev-erver isn't installed. Please install it globally and retry.
In commandline, install Webpack Dev Server via
npm install --save webpack-dev-server

Error with watchify when trying to execute npm run watch

Good day, i'm currently doing a tutorial on scotch.io where i'm trying to make a music player using electron and react, but when i try to execute 'npm run watch' i get this error message:
electron-quick-start#1.0.0 watch: watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-quick-start#1.0.0 watch script 'watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose'.
npm ERR! This is most likely a problem with the electron-quick-start package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs electron-quick-start
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls electron-quick-start
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Alejandro\Documents\Proyectos\music-player\npm-debug.log
This is my package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron/electron-quick-start.git"
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial"
],
"author": "GitHub",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/electron/electron-quick-start/issues"
},
"homepage": "https://github.com/electron/electron-quick-start#readme",
"devDependencies": {
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"electron-prebuilt": "^1.2.0"
},
"dependencies": {
"axios": "^0.13.1",
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"classnames": "^2.2.5",
"electron-prebuilt": "^1.2.7",
"electron-reload": "^1.0.0",
"jquery": "^3.1.0",
"react": "^15.2.1",
"react-autocomplete": "^1.0.1",
"react-dom": "^15.2.1",
"react-sound": "^0.5.0",
"soundmanager2": "^2.97.20150601-a"
}
}
From what i've read in the tutorial browserify is supposed to come with watchify as well, however when i installed it as a separate module it worked but then i got the following error:
console.error("SyntaxError: C:/Users/Alejandro/Documents/Proyectos/music-player/app/app.js: Unexpected token (12:10) while parsing file: C:\Users\Alejandro\Documents\Proyectos\music-player\app\app.js");
I used the same tutorial, but I could not get everything working by applying the code snippets from the tutorial.
Do this instead:
install both browserify and watchify:
npm install -g browserify watchify
clone the author's music player github repository instead of electron-quick-start. Then add or modify the tutorial code snippets.

Categories