I am getting this error in IE when I try run my react site. It works in all other browsers and I have tried to load babel-polyfill multiple ways.
IE 11 error:
Here is my webpack.dev.config.js file
const path = require('path');
module.exports = {
devtool: "source-map",
mode: 'production',
entry: {
app: ['babel-polyfill', './index.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist')
},
module: {
rules: [{
test: /\.js$/,
enforce: "pre",
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}]
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}]
},
};
I just can't seem to fix this error any help would be appreciated
Apologies, I didn't really post enough information for anyone to fix this as the problem didn't reside in the webpack.dev.config.js file. The problem resided in one of my React files:
publicIP().then(ip =>{
//code here
});
As IE doesn't have support for ES6 the => was causing the error!
Related
We are creating a react component, for some reason, we need it can be used in HTML directly. Like this one https://github.com/mui/material-ui/blob/master/examples/cdn/index.html. I am trying to use webpack to package my script, but it can't be used in HTML.
Here is my simple webpack config
const path = require('path');
module.exports = {
entry: glob.sync('./core/test/index.jsx'),
output: {
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'global',
filename: 'test.development.js',
},
devtool : 'source-map',
module: {
rules:[
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(css|sass|scss)$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
}
]
},
mode: 'development'
};
How should I do with the script?
I'm a really beginner in Webpack and React.
I want to use some npm (carousel multi react), but I can't. It's something wrong with my webpack.config.
Unfortunetly I can't resolve this on my own, and I saw some similiar topics, but it doesn't working for me... or I just don't know how to implement solutions in my file.
ERROR in ./node_modules/react-multi-carousel/lib/styles.css 1:0
Module parse failed: Unexpected character '#' (1:0)
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
const path = require("path");
const Html = require('html-webpack-plugin');
module.exports = {
entry: [
"whatwg-fetch",
"./js/index.js",
],
output: {
filename: "js/out.js",
path: path.resolve(__dirname, "build")
},
devServer: {
port: 3001,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'images',
outputPath: 'images',
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: 'fonts',
outputPath: 'fonts',
}
}
},
]
},
plugins: [
new Html({
filename: 'index.html',
template: './index.html',
})
]
};
Try adding the below json to the rules array.
{
test: /\.(sass|less|css)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
}
Also install the required npm modules for the above loaders,
or else you can also try with adding test: /\.(sass|css)$/, to your current setup.
Thank You! It's working. ;)
{
test: /\.(sass|css|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: () => [
require("autoprefixer")()
],
},
},
'sass-loader',
]
},
Try,
npm install --save-dev css-loader style-loader sass-loader sass webpack
Then add this code into your webpack config file,
{
test: /\.(sass|less|css)$/,
use: ["style-loader", "css-loader", 'sass-loader'],
},
I'm using webpack config for my react.js application. When i run the command npm run build my images and font files are not build under media directory as i defined in my webpack:
module.exports = {
entry: {
app: ['./app/main.js']
},
output: {
path: path.resolve(process.cwd(), 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: [
'transform-runtime',
'transform-object-rest-spread'
]
}
},
{
test: /\.(css|scss)$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.(eot|woff|woff2|svg|ttf|png|jpg|gif)([\?]?.*)$/,
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: /\.html$/,
loader: 'html'
},
{ // Load JSON-files into code base.
test: /\.json$/,
exclude: /node_modules/,
loader: 'json',
},
]
},
plugins: getPlugins(),
devtool: 'source-map',
};
But the files are placed just inside my dist. What am i missing?
That is the right behaviour. webpack outputs everything fist for your output path, then from that it starts to create folders for loaders. You can't have javascript under /dist and force it to output all other files to /media. It is always going to be everything under your dist.
When i run build of my react app i got: ERROR in bundle.js from UglifyJs
Unexpected token: name i found this https://github.com/joeeames/WebpackFundamentalsCourse/issues/3
they suggest use babel-reset-es2015 but i need babel-preset-react.
My webpack config:
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractSass = new ExtractTextPlugin({
filename: "style.css",
disable: process.env.NODE_ENV === "development"
});
const config = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {presets:['react']}
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{ test: /\.html$/,
use:[{
loader: 'html-loader',
options: {
minimize:true
}
}]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]},
plugins: [
extractSass
],
node:{
fs: "empty"
}
}
module.exports = config
You can have both, they are not mutually exclusive. Also query has been replaced with options in webpack 2, just as you're using it in your other loaders already. query still exists for compatibility reasons, but you should just use options.
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['es2015', 'react']
}
},
I have installed bootstrap and when I run the application using webpack I am facing this error:
Angularjs: Cannot find module “../../node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot”
Webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'./app/app.js',
'./app/index.html',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081/'
],
output: {
filename: 'bundle.js',
path: __dirname + './js'
},
module: {
loaders: [
// Exports Angular
{ test: /[\/]angular\.js$/, loader: "exports?angular" },
// Script Loaders
{ test: /\.coffee$/, loader: "coffee" },
{ test: /\.html/, loader: 'file?name=[name].[ext]' },
// Style Loaders, style! inlines the css into the bundle files
{ test: /\.css$/, loader: "style!css!less" },
{ test: /\.scss$/, loader: "style!css!sass" },
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
// activate source maps via loader query
'css?sourceMap!' +
'less?sourceMap'
)
},
{ test: /\.(jpg|png|gif)$/, loader: "file-loader?me=images/[hash]. [ext]"},
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{ test: /\.(woff|woff2)$/, loader: "url?limit=10000&minetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]},
resolve: {
extensions: [
'',
'.js', '.coffee',
'.html',
'.css', '.styl', '.scss', '.less'
]},
plugins: [
// extract inline css into separate 'styles.css'
new ExtractTextPlugin('styles.css')
]};