error message:
webpack-dev-server
/home/panecitodigital/Desktop/react-course-projects/cse-app/webpack.config.js:35
};
^
my webpack.config.js
It was working fine until i tried to add the file-loader to work with images, every time i try to fix the mistake the cmd tells me i have a new one comes up. A newbie that has tried the solutions that were on the web with no results too. Please help :) will pay foward when im not a newb
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
It looks like you're missing an } after your rules in module. The error is showing up on the last line because it's not expecting the ; it's expecting one more } to close the entire object.
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}, // <---- this is missing
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
},
module: {
rules:[
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}
};
Related
Here's the error I'm receiving:
ERROR in ./src/components/CustomHeader.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (17:10)
15 | class CustomHeader extends Component {
16 |
> 17 | state = {activeItem: 'home'};
| ^
18 |
19 | handleItemClick = (e, {name}) => this.setState({activeItem:name});
20 |
Her is my webpack.config.js file:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: "cheap-eval-source-map",
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js",
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.jsx$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ],
include: path.join(__dirname, 'src'),
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
hot: true,
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
hash: true,
})
]
}
.babelrc file:
{
"presets": [
"react",
"env"
]
}
Do I need to change how I set state? Or is there something else that I need to import to my project? Any help would be appreciated. Thanks.
(Note: Code I'm using is taken straight from Semantic UI Examples at the moment.)
You need either stage-2 preset
OR
You can use babel-plugin-transform-class-properties.
if you don't want to use stage-2 and stick with more stable stages.
Try out your combinations on BabelJS and pick your poison.
I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
I'm having an issue with React/Redux/Webpack/Router.
Any "sub pages", such as: "/home/test", "users/registration" etc... fail to be loaded - and I get errors loading the "bundle.js" file generated by webpack.
The reason seems to be that the request to fetch the "bundle.js" is with the following url:
for path "/home/test": "/home/bundle.js"
for path "/users/registration": "/users/bundle.js"
Same issue occurs with the loading of "css" files and other resources.
This is my webpack configuration:
const { resolve } = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const config = {
devtool: 'cheap-module-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./main.js',
//'./assets/scss/main.scss',
],
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist'),
publicPath: '/',
},
context: resolve(__dirname, 'src'),
devServer: {
hot: true,
contentBase: resolve(__dirname, 'build'),
publicPath: '/',
historyApiFallback: true
},
module: {
rules: [
/* {
enforce: "pre",
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "eslint-loader"
}, */
{
test: /\.(js|jsx)$/,
loaders: [
'babel-loader',
],
exclude: /node_modules/,
},
{
test: /\.(scss|sass)$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'sass-loader',
query: {
sourceMap: false,
},
},
],
publicPath: '../'
}),
},
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=15000&name=images/[name].[ext]' },
{ test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader?&name=fonts/[name].[ext]' },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]' },
{ test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=images/[name].[ext]' },
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
test: /\.js$/,
options: {
eslint: {
configFile: resolve(__dirname, '.eslintrc'),
cache: false,
}
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new ExtractTextPlugin({ filename: './styles/style.css', disable: true, allChunks: true }),
new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]),
new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
new webpack.HotModuleReplacementPlugin(),
],
};
module.exports = config;
It seems as if it always uses "../bundle.js" to find it for some reason.
Any help would be appreciated :)
Thank you,
I'm using react-hot-loader in my react app. I'm using devtool: 'source-maps', but the source-maps don't seem to work. I'm able to view the original source in chrome's dev-tools, but when I get an error, I only see the following:
I've also tried pretty much every other setting for devtool, but I always get this behaviour. What can I do to get source-maps working properly?
Here's my webpack.config.js:
'use strict';
const webpack = require('webpack');
const path = require('path');
const cssModulesLoader =
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]';
const cssLoaders = [
// loaders for loading external css
{
test: /\.s[ac]ss$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader']
},
// loaders for custom css
{
test: /\.css$/,
exclude: path.resolve(__dirname, 'node_modules'),
loaders: ['style-loader', cssModulesLoader]
},
{
test: /\.s[ac]ss$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'ui/src/global.scss')
],
loaders: ['style-loader', cssModulesLoader, 'sass-loader']
},
{
test: /global\.scss$/,
include: path.resolve(__dirname, 'ui/src/global.scss'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
];
module.exports = {
devtool: 'source-maps',
entry: {
app: ['babel-polyfill', 'react-hot-loader/patch', './ui/src/index']
},
output: {
path: path.resolve(__dirname, './ui/assets'),
filename: 'bundle.js',
publicPath: 'assets/'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.json/, loader: 'json-loader' },
...cssLoaders,
{
test: /\.(ttf|eot|woff|svg)/,
include: [path.resolve(__dirname, 'node_modules')],
loader: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
],
devServer: {
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:48763/',
secure: false
},
'/wsapi': {
target: 'ws://localhost:48763',
ws: true
}
}
}
};
I keep getting Cannot GET /task I tried to modify my webpack with solutions I found here but I still get it.
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}, {
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
}
I think client gets index.html only when path is /.
Try to use this setting.
devServer: {
historyApiFallback: true
}