Menu
There are already other similar questions, but the issue is still haunting me in spite of those answers - I am using webpack and babel on a project, but the browser's console is always showing an error 404 while trying to find bundle.js.
This is my package.json:
{
"name": "node-str",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./bin/server.js"
},
"keywords": [],
"author": "Pedro_Coelho",
"license": "ISC",
"dependencies": {
"babel-register": "^6.26.0",
"body-parser": "^1.18.3",
"create-react-class": "^15.6.3",
"debug": "^3.1.0",
"ejs": "^2.6.1",
"express": "^4.16.3",
"guid": "0.0.12",
"http": "0.0.0",
"md5": "^2.2.1",
"mongoose": "^5.2.4",
"react": "^16.6.1",
"react-dom": "^16.6.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"nodemon": "^1.18.3",
"webpack-cli": "^3.1.2"
}
}
This is my webpack.config.js:
module.exports = {
entry: 'src/client.js',
output: {
filename:'bundle.js',
//path: './public',
path:__dirname + 'dist',
publicPath: "./public"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
},
//devtool: 'source-map',
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: { historyApiFallback: true }, // to serve your index.html in place of 404 responses
};
and this is my about.js file, where bundle.js is being referenced in a script:
var React = require('react');
var createReactClass = require('create-react-class');
module.exports = createReactClass({
_handleClick: function () {
alert("Hello!");
},
render: function () {
return (
<html>
<head>
<title>About - React Page</title>
<link rel='stylesheet' type="text/css" href='/style.css' />
</head>
<body>
<div>
<h1>Hello World!</h1>
<p>Isn't server-side rendering remarkable?</p>
<button onClick={this._handleClick}>Click Me</button>
</div>
<script type="text/javascript" src='/bundle.js' />
</body>
</html>
);
}
});
Project's structure:
>>structure<<
Any clue why is this happening?
644
Use
output: {
...
publicPath: '/',
},
in your webpack config.
150
Try
path.join(__dirname, dist)
And verify if the bundle.js is created at the given path.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
