I am having some problem in my ReactJs code. Everything is compiling without any error using webpack. But after webpack dev server started and when I am browsing to localhost:9000 nothing is inserted into the DOM from ReactJs.
I am running npm start on terminal.
Here is all the code that i have written -
.babelrc
{
"presets": ["es2015", "react", "stage-0"]
}
.eslintrc
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
.jslintrc
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
index.html
<html>
<head>
<title>Forms in React Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div id='root' class="container">
</div>
</body>
<script src="/static/bundle.js" type="text/javascript"></script>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component{
render() {
return (
<div>
<input type="text" value="Shawn" />
</div>
);
}
}
ReactDOM.render(<IndexComponent />, document.getElementById('root'));
**package.json**
{
"name": "chapter4",
"version": "0.0.1",
"description": "ReactJS forms example",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"author": "",
"license": "MIT",
"homepage": "",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.2",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^3.19.0",
"eslint-plugin-react": "^6.10.3",
"react-hot-loader": "^1.3.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src')],
},
{
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
// cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}
]
}
]
}
};
Thank you all in advance.
In your webpack.confg.js you have the following:
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
'./src/index' // <-- no src dir in project
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src')], // <-- no src dir in project
},
{
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
// cacheDirectory: 'babel_cache',
presets: ['react', 'es2015']
}
}
]
}
]
}
};
You don't have a src directory in this project.
Fix: Make a src directory and move your index.js file in it. You also have a problem with the way you're trying to bring in react-hot-loader and not excluding node_modules. Try this for your module section:
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot-loader', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2&presets[]=stage-0'],
include: [path.join(__dirname, 'src')],
exclude: '/node_modules/'
}
]
}
Tested and it works on my local.
Got the solution.
In the rules part I am doing some mistake. Following will be the correct rules.
rules: [{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src/')],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
}
]
}]
This will be the correct webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:9000',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [{
test: /\.jsx?$/,
include: [path.join(__dirname, 'src/')],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
}
]
}]
}
};
Thanks to all for the help.
Related
I am new to react, trying to learn webpack configuration. I am using webpack4 for my project, however, after setting up webpack, the bundle files are not generated, neither the js file nor the html file and there is no error.
The output on the console says "compiled successfully". How do i fix this. I have been struggling for about a week and no online resource seems to give me what i want.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js')
}
const htmlPlugin = new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
mode: 'development',
entry: path.join(paths.JS, 'index.js'),
output: {
path: paths.DIST,
filename: 'app.bundle.js'
},
module:{
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options:{
modules: true,
importLoaders: 1,
localIndentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true,
camelCase:true
}
}
]
}
]
},
plugins: [htmlPlugin],
devServer: {
publicPath: paths.DIST,
host: 'localhost',
port: port,
historyApiFallback: true,
open:true,
hot: true
}
};
Make sure all path correctly, not have missing file.
src/js/index.js
src/index.html
make sure run webpack correctly to show log like:
package.json
"scripts": {
"start": "webpack --config webpack.config.js --bail --progress --profile"
},
and run by npm start, then will show the log.
if you want, you can use new babel version. change your bable with this:
"dependencies": {
"#babel/core": "^7.0.0-beta.42",
"#babel/preset-env": "^7.0.0-beta.42",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.0",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.1.0",
...
"style-loader": "^0.20.3",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
},
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": ["#babel/plugin-proposal-object-rest-spread"]
}
then update your webpack rule:
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [require('#babel/plugin-proposal-object-rest-spread')]
}
},
exclude: /node_modules/
},
when i tried to import css file it showed error that loaders are missing. so i have installed css-loader and style-loader packages. if i add those packages to webpack.config.js i get following error. i dont know how to resolve it.
ERROR in ./node_modules/css-loader!./src/index.js
Module build failed: Unknown word (1:1)
> 1 | import React from 'react';
| ^
2 | import ReactDOM from 'react-dom';
3 | import {App} from './components/App';
4 |
# ./src/index.js 3:14-73
# multi (webpack)-dev-server/client?http://localhost:8080
./src/index.js
Webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader","style-loader","css-loader"],
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
i have installed following dependecies
package.json
{
"name": "Reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode
development"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"style-loader": "^0.20.3",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2"
}
}
Modifie your webpack.config.js to this and import your css file on your App component like this import './file.css'; (assuming that the css file is in the same directory as your App component)
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
You need to add a separate rule for css to your webpack.config in order to load css into your project.
...
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
...
You're using style-loader and css-loader to transform your .jsx files which is going to throw an error.
I have the following configuration for a react based application that is failing JSX parsing during webpack build:
ERROR in ./src/App.jsx
Module parse failed: /Users/sangupta/git/plx/ui2/src/App.jsx Unexpected token (9:15)
You may need an appropriate loader to handle this file type.
|
| render() {
| return <div class='hello'>Hello World</div>;
| }
|
# multi (webpack)-dev-server/client?http://localhost:9000 webpack/hot/dev-server src/App.jsx
Any suggestions on what might be wrong?
The following is the package.json file:
{
"name": "Test-Project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "6.4.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "0.28.4",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.30.1",
"less": "2.7.1",
"less-loader": "2.2.3",
"postcss-loader": "2.0.5",
"style-loader": "0.13.2",
"webpack": "3.4.1",
"webpack-dev-server": "2.6.1"
},
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"scripts": {
"build": "webpack",
"build-production": "NODE_ENV=production npm run build",
"watch": "webpack-dev-server --hot --progress"
}
}
The following is webpack.config.json file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
context: __dirname,
entry: {
app: 'src/App.jsx',
vendor: [ "react", "react-dom" ]
},
devServer: {
contentBase: path.join(__dirname, 'assets'),
compress: true,
port: 9000,
hot: true,
https: false,
noInfo: false,
historyApiFallback: true
},
resolve: {
extensions: [ '.js', '.jsx' ],
alias: {
src: './src'
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, "src")
],
exclude: /node_modules/,
loader: [
'babel-loader',
],
options: {
presets: [ "es2015" ]
}
},
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|css)$/,
use: [
"file-loader"
]
}
]
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
module: {
rules: []
},
// Tell webpack to use html plugin
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.ProvidePlugin({
'React': 'react',
}),
new UglifyJsPlugin({ sourceMap: !isProduction }),
new HtmlWebpackPlugin({ title: 'MultiPLX', template: 'src/index.ejs', inject : 'body' })
]
};
You should be using the react babel preset:
npm install --save-dev babel-preset-react
webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, "src")
],
exclude: /node_modules/,
loader: [
'babel-loader',
],
options: {
presets: [ "react", "es2015" ]
}
},
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|css)$/,
use: [
"file-loader"
]
}
]
},
This question already has answers here:
Webpack + Babel error
(2 answers)
Closed 5 years ago.
I decided to rewrite my existing React App from ES5 to ES6. Below is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import ToDoList from './to-do-list.jsx';
//Put the components into HTML
ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));
However when I try to build with webpack and launch the app I get the error that:
ERROR in ./src/app/index.js
Module parse failed: /home/sam/devzone/github/simple-react-todo-app/src/app/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
|
| //Put the components into HTML
| ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));
I have selected babel-preset-env instead of babel-preset-es2015, but I highly doubt that this is the cause. Below are snapshots of my package.json and my webpack.config.js respectively.
package.json
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
...
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.7.2",
"eslint-plugin-react": "^7.4.0",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
"presets": [
["env", {
"loose": true,
"modules": false,
"useBuiltIns": true,
"debug": true,
"include": ["transform-es2015-classes"]
}],
"react"
],
"plugins": [
"babel-plugin-transform-es2015-parameters",
"babel-plugin-transform-es2015-destructuring"
]
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
As it might be evident that I did a bit trial and error myself, but I seem to be totally lost now.
The app folder structure and other relevant files can be seen inside my repo here.
Any pointers would be appreciated.
Your webpack's config is wrong (it's old config from Webpack 1)
You should change it to:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
options: {
"presets": [
["env", {
"loose": true,
"modules": false,
"useBuiltIns": true,
"debug": true,
"include": ["transform-es2015-classes"]
}],
"react"
],
"plugins": [
"babel-plugin-transform-es2015-parameters",
"babel-plugin-transform-es2015-destructuring"
]
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
Just change
test: /\.jsx?$/,
To
test: /.(js|jsx)?$/,
Very simple app here. Started with the demo found here, and modified it to use Babel 6. The problem I have is that the output of webpack puts my HTML files in a subdirectory of the output Dist directory.
Starting with this file structure:
Test|
|package.json
|webpack.config.js
|app|
|index.html
|js|
|app.js
|greeting.js
What I end up with after running webpack is this in my dist directory:
dist|
|app.js
|app|
|index.html
Seems odd to me. What I want is this:
dist|
|index.html
|app|
|app.js
Here's the webpack.config.js file:
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"file-loader": "^0.8.5",
"react-dom": "^0.14.8",
"webpack": "^1.12.14"
},
"dependencies": {
"react": "^0.14.8"
}
}
I'm close to getting this where I can get to the next step. How do I get webpack to pack the output like I want?
I'm new to webpack, so I don't know if this is the best solution, but this should work (output.path and file loader have been modified) :
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=../[name].[ext]",
}
],
}
};
According to the documentation, the context option is only used to resolve the entry point.
One way to do it, is get the htmlwepackplugin, and adjust your config as below. this would also inject the script build, so you dont have to have it on your index.html ;)
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./js/app.js",
html: "./index.html",
},
output: {
filename: "app.js",
path: __dirname + "/dist/app",
},
module: {
plugins: [
new HtmlWebpackPlugin({filename: '../index.html', template: './test/app/index.html', chunksSortMode: 'none'}),
],
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:
{
cacheDirectory: true,
presets: [ 'react', 'es2015' ]
}
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
}
],
}
}