I am facing error while getting same bundled image from different route
While my app is in route http://localhost:8080
My image load perfectly from url http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
But as my app route changed to http://localhost:8080/dashboard
My image also loads from url http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg
Since the image is at url location http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
So it shows 404 resource not found error while getting the resources from the given location.
I am using require('../image.jpg') to add image in my app.
This is my webpack.config.js file.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', "env"]
}
},
{ test: /\.(png|jpg|svg)$/i, loader: "file-loader",
options:{outputPath:'images/'}},
{test:/\.json?$/,loader:'json-loader'}
],
},
devServer: {
historyApiFallback: true,
contentBase: './public',
hot:true
},
devtool:"cheap-module-eval-source-map"
}
I am using webpack version: "^3.1.0".
Related
When I'm trying to open my react project in IE11, I get the error 'SCRIPT1014 Invalid Character'.
And every other browser works perfectly even the Edge.
I have tried using 'core.js', 'babel-polyfills', 'babel-plugin-transform-class-properties'.
Here is my webpack.config.js file:
// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'index_bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.styl$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'stylus-loader'],
}),
},
{
test: /\.(png|jp(e*)g|svg|woff|woff2|eot|ttf|otf)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]',
},
}],
},
],
},
devServer: {
port: 8881,
host: '0.0.0.0',
historyApiFallback: true,
},
watch: true,
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new ExtractTextPlugin(
{ filename: 'app.bundle.css' },
),
],
};
I tried solutions from the questions below which did not help me:
react with IE11 is not working, displaying blank screen
IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
Any help would be appreciated. Thanks in advance.
My mistake. I was using the package 'flexbox-polyfills' which is not supported in the IE.
So, I removed this package and added the 'babel-polyfill' package and its configuration in the webpack.config.js file.
It solved my problem.
The errors I get below are shown in the console after I refresh on a nested route (register/email-confirmation). Whereas non-nested routes do not get this error.
I think the main problem is that it's searching for bundle.js and the image in the nested route path, as opposed to the root path.
The errors in my console:
GET http://localhost:3002/register/bundle.js net::ERR_ABORTED
Refused to execute script from 'http://localhost:3002/register/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
GET http://localhost:3002/register/a5e694be93a1c3d22b85658bdc30008b.png 404 (Not Found)
My webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BUILD_PATH = path.resolve( __dirname, "./client/build" );
const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
const PUBLIC_PATH = "/";
...
module.exports = {
devtool: 'eval-source-map',
context: SOURCE_PATH,
entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /server/],
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
plugins: [
'transform-decorators-legacy',
'transform-es2015-destructuring',
'transform-es2015-parameters',
'transform-object-rest-spread'
]
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
],
},
output: {
path: BUILD_PATH,
filename: "bundle.js",
},
devServer: {
compress: true,
port: 3002,
historyApiFallback: true,
contentBase: BUILD_PATH,
publicPath: PUBLIC_PATH,
},
plugins: [
new webpack.DefinePlugin(appConstants),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'client/src/index.html'),
inject: true
}),
],
watch: true,
}
I don't know about this bug, but I highly recommend using fuse-box
fuse-box is the future of the build systems, within few minutes you will be running your project with high speed hot reload and many others utitilites...
check this react example seed, it's incredibly amazing..
This is my webpack.config file. When I run webpack, bundle.js correctly writes to project/dist/assets/bundle.js.
However, when I run npm start to serve up the files, I get an error:
Error: output.path needs to be an absolute path or /.
So... if I make the path absolute: "/dist/assets" or path: __dirname + "/dist/assets" then it serves up the files fine, and emits bundle.js, but it doesn't actually write it to my project/dist/assets folder.
The page looks fine and when I view source, I see <script src="/assets/bundle.js"></script> but it only exists on the localhost (publicPath).
Where am I going wrong? The goal being for npm start to write the bundle to my project folder AND serve it up with devServer.
var webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: "./dist/assets",
filename: "bundle.js",
publicPath: "/assets"
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
},
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader", "babel-loader?presets[]=latest,presets[]=stage-0,presets[]=react"]
}, {
test: /\.json$/,
exclude: /(node_modules)/,
loader: "json-loader"
}, {
test: /\.css$/,
loader: "style-loader!css-loader!autoprefixer-loader"
}, {
test: /\.scss$/,
loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"
}]
}
}
Use path for this:
var path = require('path');
....
output: {
path: path.join(__dirname, './dist/assets'),
I am recently learning React and have problem setting webpack. I wrote a background image in sass file but I can't see this image in browser, I checked the develope tool and saw a strange file name as the attatched picture shows. There's no error when I run webpack. I think I might set the webpack.config.js incorrectly. Can somebody take a look for me? here's the source code:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'eventsource-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.sass$/,
loader: 'style!css?sourceMap!sass'
},
{
test: /\.(jpg|gif|png)$/,
loader: "file"
},
{
test: /\.(jpg|gif|png)$/,
loader: "url"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html',
inject: 'body',
})
]
};
I also put my files on github: https://github.com/john650914/ReactQuestion.git
Thank you very much~~~~~~~~~
Webpack will start looking for your url path at '/' which was set by your publicPath in your webpack.config.js
Looking at your repository with your link provided:
https://github.com/john650914/ReactQuestion.git
It seems like your image isn't in your projects root. You should specify the correct publicPath that leads to where you store your assets. So for example if you stored your images in /src/assets/ then your publicPath should be ./src/assets/ like this:
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './src/assets/'
},
I have a React app I'm porting to Webpack, and I can successfully launch it using webpack-dev-server.
Unfortunately I have to navigate to the public directory to load the app:
localhost:10000/public/
...which interferes with React router. Is it possible to have it mount to / instead? I.e:
localhost:10000/
The publicPath directive in output doesn't seem to influence this.
// webpack.config.js
module.exports = {
devServer: {
inline: true,
port: 10000 // Defaults to 8080
},
entry: {
app: ['./src/app.jsx']
},
devtool: 'source-map',
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: path.resolve(__dirname, "public/scripts"),
publicPath: '/scripts/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
"es2015",
"stage-0",
"react"
],
plugins: [
"transform-flow-strip-types"
]
}
}
]
}
};
Try setting the contentBase to public folder
https://webpack.github.io/docs/configuration.html#devserver