Trying to launch my very first React application, and when I try to launch it using "dev" script in package.json, then it crashes the chrome tab. In task manager ram consumption gets even to 7.5 GB
My code is:
src\index.jsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Header} from "./header";
window.addEventListener('load', ()=>{
ReactDOM.render(<Header />, document.getElementById('react_root'));
})
src\header.jsx
import * as React from "react";
export function Header(){
return (
<Header>
<h1>Reddit for our own</h1>
</Header>
);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<div id="react_root"></div>
</body>
</html>
package.json
{
"name": "skillbox",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "env NODE_ENV=development webpack --config webpack.config.js",
"build:prod": "env NODE_ENV=production webpack --config webpack.config.js",
"dev": "env NODE_ENV=development webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
webpack.config.js
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;
const HTMLWebpackPlugin = require('html-webpack-plugin');
const IS_DEV = NODE_ENV === "developement";
module.exports = {
resolve:{
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
},
mode: NODE_ENV ? NODE_ENV : 'development',
entry: path.resolve(__dirname, 'src/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module:{
rules: [{
test: /\.[tj]sx$/,
use: ['ts-loader']
}]
},
plugins: [
new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'index.html') })
],
devServer:{
port: 8000,
open: true,
hot: false
}
};
Console does not give any error, it is just the browser, which crashes because of memory.
Related
I am learning webpack to start out my react projects without create-react-app. Everything seems to work fine but when I open the console after npm run dev, I see the error message: Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".
Below are my project files.
webpack-react
├── dist
├── package-lock.json
├── package.json
├── public
│ └── index.html
├── src
│ ├── App.js
│ └── index.js
├── webpack.config.js
└── .babelrc
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/index.js"></script>
</body>
</html>
App.js
function App() {
return (
<div>
<h1>Welcome to webpack</h1>
</div>
);
}
export default App;
index.js
import ReactDOM from "react-dom/client";
import App from "./App";
const root = document.querySelector("#root");
ReactDOM.createRoot(root).render(<App />);
.babelrc
{
"presets": [
"#babel/preset-env",
["#babel/preset-react", { "runtime": "automatic" }]
]
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "development",
entry: "./src/index.js",
output: {
filename: "bundle.[hash].js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: [".js", "jsx", ".css"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.html$/,
use: {
loader: "html-loader",
options: {
minimize: true,
},
},
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: "./public/index.html" }),
],
devServer: {
host: "localhost",
port: process.env.PORT || 3000,
open: true,
},
};
package.json
{
"name": "webpack-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack --mode production --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.18.2",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
"dependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
I find it weird that react files are rendered despite the message..
I believe the error comes from this line
<script type="module" src="../src/index.js"></script>
Since you are using Webpack to bundle, the injection is handled by Webpack.
Remove that line, the app should still work and the error should disappear.
I've been trying my first steps with react.js and after playing around a bit (installing Bootstrap, adding some loaders for LESS & Co.) at some point the event handlers (onSubmit, onChange) stopped working. At first, I thought I just messed up my code.
However, when I copy the example for a controlled components form into a freshly initialized npm project with React 17.0.2, these handlers are still not working as expected. E.g. the onSubmit handler:
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
Neither does the alert show, nor is the default event handling prevented. The page simply reloads when I hit the submit button.
For example, if I put an alert into the constructor it is being shown.
Here is the full package.json
{
"name": "app-retry",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.12",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3"
}
}
and here is the full webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
dev: {
hot: true,
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// attach the presets to the loader (most projects use .babelrc file instead)
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
]
},
plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') })]
};
The index.js is
import React from "react";
import ReactDOM from "react-dom";
// lines as copied from the react example
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
and finally the index.html template
<html>
<head>
<title>Hello world App</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
What am I doing wrong? Is the example code wrong or is there a flaw in my setup?
I'm trying to set up ReactJs from scratch but npm start, dev, build, and watch are throwing the error below:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\da4na4\web\stocker\src\index.js: Unexpected character '�' (1:0)
I have setup package.json, webpack.config.js, and .babelrc configurations. I have equally tried out previous answers on Stack Overflow, yet the issue persist. Below are the configurations of the respective files:
package.json
{
"name": "stocker",
"version": "1.0.0",
"description": "A product inventory web app to help you keep track of your stocks and meet demands",
"main": "webpack.config.js",
"scripts": {
"test": "jest ./src/tests",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --watch",
"start": "webpack serve --mode development --open --hot"
},
"keywords": [
"products",
"Inventory"
],
"author": "Emmanuel Joshua",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#babel/preset-react": "^7.12.13",
"#webpack-cli/serve": "^1.3.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0",
"jest": "^26.6.3",
"jsdom": "^16.4.0",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html"
});
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "js/app.min.bundle.js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss|css)$/, use: ["sass-loader", "css-loader", "style-loader"]
},
{
test: /\.(html)$/, use: ["html-loader"]
}
],
},
plugins: [htmlPlugin],
target:"node",
devServer:{
port: 3000,
contentBase: path.resolve(__dirname, "public")
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
These are the index.js and the App.js files
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/App';
ReactDOM.render(
<App firstname={"Joshua"} />,
document.getElementById("root")
)
js/App.js
import React, {Component} from 'react';
class App extends Component{
constructor(props){
super(props);
}
render(){
return(
<h1>Hello {this.props.firstname}, Welcome to our Website!</h1>
)
}
}
export default App;
This tripped me a while. I found out one of the reasons is because of the directory naming path.
I used # for a folder name and it gave me the same error you're reading into.
e.g. my path
C:/Users/johndoes/codes/# wip/project1/sub/
My suggestion is looking at the pathing and seeing if everything is on the right place and referred to correctly.
I'm trying to build an app with reactjs+webpack+babel. My webpack.config.js is:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/bin');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
context: APP_DIR,
entry: {
vendor: ['react', 'react-dom'],
app: APP_DIR + '/index.jsx'
},
resolve: {
extensions: [".webpack.js", ".web.js", ".js", ".jsx"]
},
output: {
path: BUILD_DIR,
filename: '[name].js'
},
devServer: {
inline:true,
port: 9000
},
module : {
loaders : [
{
test : /\.jsx?/,
exclude: /node_modules/,
include : APP_DIR,
loader : 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
module.exports = config;
Then my index.jsx is:
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}
}
render(<App/>, document.getElementById('app'));
And my html file:
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app"></div>
<script async src="bin/bundle.js" type="text/javascript"></script>
</body>
</html>
And this html is in the bin folder. What am I doing wrong, so when I open throw browser (and webpack server) I don't have that html.
EDIT:
{
"main": "index.jsx",
"scripts": {
"start": "webpack-dev-server --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "André Roque Nº31260",
"license": "ISC",
"dependencies": {
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-router": "^4.1.1",
"webpack": "^2.5.1"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.5.1"
}
}
Try serving the contentBase to the devServer from the folder in which the html file is present with you bundled script. You should provide path to the webpack-dev-server such as following example:
devServer: {
contentBase: path.resolve(__dirname, 'src/client/bin'),
inline:true,
port: 9000
},
Hope this helps.
I am just new to webpack and react , just going through the docs and created a example to work. Unfortunately i got stuck and not able to proceed . Th problem is the bundled file is not generated.
The files i created is
package.json
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
module.export = {
entry : './main.js',
output : {
path : './',
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
App.js
import React from 'react';
class App extends React.Component {
render(){
return <div>Hello</div>
}
}
export default App
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('app'));
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Setup</title>
</head>
<body>
<div id = "app"></div>
<script src ="index.js"></script>
</body>
</html>
I am getting that bundle is valid, but no index.js is generated.
can't run in localhost 3333
Thanks,
I think the problem is that you are not giving the absolute output path.
Try this:
var path = require('path');
module.exports = {
entry : './main.js',
output : {
path : path.join(__dirname, './'),
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
Hope it helps :)
In webpack.config.js, use module.exports instead of module.export. See Output filename not configured Error in Webpack
Also be noticed that your package.json lacks some dependencies. Here is the updated package.json that works:
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}
Replace your scripts object with the below:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
Then, run $ npm start
For me the problem was with package.json under that "scripts"
Here is the fix:
Inside your package.json file, under script add the following:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
First I ran the build then start.
yarn build
if you first build then your bundle.js file will be created and after that you can use this command:
yarn start
In case of no output file (bundle.js) and a successful build
Hash: 77a20ba03ab962a1f5be
Version: webpack 4.41.0
Time: 1039ms
Built at: 10/04/2019 5:24:48 PM
Asset Size Chunks Chunk Names
main.js 1.09 MiB main [emitted] main
Entrypoint main = main.js
[./react_rest/frontend/src/index.js] 35 bytes {main} [built]
+ 12 hidden modules
webpack :
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
filename: 'main.js'
}
};
Try to use var path = require('path'); and allocating output directory
var path = require('path');
module.exports = {
entry: './react_rest/frontend/src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
},
output: {
path: path.join(__dirname,'./react_rest/frontend/static/frontend/'),
filename: 'main.js'
}
};