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.
Related
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.
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 am learning to use webpack to develop a react project, but I cannot start local services locally. It reports the following error.
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from './App';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
I suspect this is a babel compilation problem, but I have configured babel-loader, but it does not work. I Googled this issue for a long time, but I still didn't find the problem. Can you help me? Thanks!
And this is my configuration files.
// webpack.common.js
const path = require('path');
const commonConfig = {
entry: [
'babel-polyfill',
'../src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'dist/index.html')
})
],
module: {
rules: [{
test: /\.(jsx?|tsx?)$/,
loader: 'babel-loader',
exclude: /node_modules/,
}]
}
};
module.exports = commonConfig;
// webpack.dev.js
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const path = require('path');
const devConfig = merge(commonConfig, {
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000
}
})
module.exports = devConfig;
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
},
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
// .babelrc
{
"presets": ["env", "react"]
}
I found out where the problem was. I didn’t specify the webpack.dev.js file for the npm run start command in the scripts of package.json, and it worked after making the following changes.
"scripts": {
"start": "webpack-dev-server --config webpack/webpack.dev.js",
},
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'
}
};