I recently upgraded to webpack 4. The page is getting loaded successfully and whenever changes happened it refreshes the page automatically using webpack-dev-server. It does very nice but in the console it shows below error
GET http://localhost:8090/build/bundle.js 404 (Not Found)
And some times when ever there is id in the URL it appends the id to bundle js url like below
http://localhost:8090/16/build/bundle.js
I tried many ways with Stack Overflow answers and GitHub solutions but none of them working for me. Below are module details
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
module.exports = {
target: "web",
entry: [
"whatwg-fetch",
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server',
'babel-polyfill',
"./src/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: "/"
//make sure port 8090 is used when launching webpack-dev-server
},
plugins: [new HtmlWebpackPlugin({
template: "index.html"
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.jsx$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
modules: [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: [".js", ".jsx"]
},
devServer: {
watchOptions: {
// Needed for Windows Subsystem for Linux dev environment:
poll: true
},
contentBase: "/build"
},
devtool: "cheap-module-eval-source-map",
node: {
child_process : "empty",
fs: "empty"
}
};
My index.html is placed in root directory
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="App">
<!-- this is where the root react component will get rendered -->
</div>
<script type="text/javascript" src="./build/bundle.js"></script></body>
</html>
I found answer after going through all the github answers related to this issue. I finally end up in figuring out the issue in in my index.html
The problem mostly with pointing bundle js in index.html. The reason webpack bundle.js not found because I specified wrong path in my index.html.
The below one resolved my issue.
<script src="/bundle.js"></script>
Related
I'm getting this below error when I upgraded my project from webpack 3.x to webpack 4.0.0
ERROR in multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx
Module not found: Error: Can't resolve 'babel-loader' in 'C:\projects\rebasing\uisrc'
# multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx
The rules configurations is as shown below in config file
rules: [
{
test: /\.(jsx?)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
]
Package.json have following libraries
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.8.0",
"babel-eslint": "7.0.0",
"babel-loader": "7.1.5",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-2": "6.17.0",
"babel-register": "6.26.0",
}
Any help would be appreciated.
In webpack4 the configuration should be loader: "babel-loader" but not use: "babel-loader"
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
]
Here is my working demo of webpack4
Versions I am using
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server":"^3.1.4",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
module.exports = {
target: "web",
entry: [
"whatwg-fetch",
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server',
'babel-polyfill',
"./src/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: "/"
//make sure port 8090 is used when launching webpack-dev-server
},
plugins: [new HtmlWebpackPlugin({
template: "index.html"
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.jsx$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
modules: [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: [".js", ".jsx"]
},
devServer: {
watchOptions: {
// Needed for Windows Subsystem for Linux dev environment:
poll: true
},
contentBase: "/build"
},
devtool: "cheap-module-eval-source-map",
node: {
child_process : "empty",
fs: "empty"
}
};
Try clearing your node_modules cache and re-installing if you haven't yet:
rm -rf node_modules/
rm -rf ~/.npm
npm cache verify
npm install
i am trying react lazy component loading ,that will load component separately and then I got
unexpected token import
i changed my babel file and now error is
ReferenceError: [BABEL] E:\projectSir\latestProject1\tools\startMsg.js: Unknown option: base.__esModule. Check out http://babeljs.io/docs/usage/options/ for more info
at Logger.error (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\logger.js:43:11)
at OptionManager.mergeOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:307:20)
at OptionManager.init (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:506:10)
at File.initOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:243:89)
at new File (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:159:72)
at Pipeline.transform (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\pipeline.js:49:16)
at Object.transformFileSync (E:\projectSir\latestProject1\node_modules\babel-core\lib\api\node.js:152:10)
at compile (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:129:20)
at loader (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:158:14)
at Object.require.extensions.(anonymous function) [as .js] (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:168:7)
my babel file is
{
"plugins": ["syntax-dynamic-import"],
"presets": ["env","react","es2015"],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
my react code for this is
async loadLazyComponent () {
if(this.state.animation == null){
try{
const LazyComponent = await import('./animation.js')
this.setState({animation:React.createElement(LazyComponent.default)})
}catch(e){
this.setState({animation:<div>`failed ${e}`</div>})
}
}
}
and package.json file is
"babel-polyfill": "6.8.0",
"babel-preset-env": "^1.6.1",
and devDependencies are
"babel-cli": "^6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
and webpack.confg.dev.js file is
import webpack from 'webpack';
import path from 'path';
export default {
debug: true,
devtool: 'inline-source-map',
noInfo: false,
entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
path.resolve(__dirname, 'src/index')
],
target: 'web',
output: {
path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'src')
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{test: /\.js$/, include: path.join(__dirname, 'src'), exclude: /node_modules/, loaders: ['babel','babel-loader']},
{test: /(\.css)$/, loaders: ['style', 'css']},
{test: /\.(jpe?g|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
},
node: {
fs: 'empty',
child_process:'empty'
}
};
i am in just learning phase so any help will be appreciated.
**
the error was that i am using older version of webpack, upgrading it
solved my issue.
**
i think code splitting was not allowed or syntax
import('./someModule.js')
is not allowed in webpack 1.X version
now i have webpack 3.X and error is resolved
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/
},
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.
I have started with webpack today and I'm having some problems to get it running.
Basically I need an application using react & es6. Bellow you can see the error:
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/app.js',
output: {
path: 'dist',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
stage: 0
},
include: __dirname + '/app'
},
]
},
plugins: [new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
hash: true,
filename: 'index.html',
inject: 'body'
})]
};
so far what I have tried is install es2015 and configured as
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
but I still getting the same error.
Any idea how can I fix it?
Dependencies
"dependencies": {
"react": "^0.14.0",
"react-dom": "^0.14.2",
"react-redux": "^4.0.0",
"webpack-dev-server": "^1.12.1"
},
"devDependencies": {
"babel-loader": "^5.3.2",
"history": "^1.13.0",
"html-webpack-plugin": "^1.6.2",
"webpack": "^1.12.2"
}
1. npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
webpack.config.js should look like this one:
module.exports = {
//.. some stuff before
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["babel"],
query: {
presets: ['es2015','react'] // here you can add your stage-0 preset
}
}]
}
//.. some stuff after
}
If you would like to use babel-stage-0 you have to install it throug npm and include stage-0 into `presets' .
And also possible you will find some useful infomation oj this Link
Thanks!