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.
Related
I am new to react and I am trying to set a background image with scss in react. However, I get an error in webpack:
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
# ./src/styles/styles.scss
# ./src/app.js
# multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js
Below is the config file for webpack:
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: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[hash]-[name].[ext]'
}
}]
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8585,
historyApiFallback: true
}
};
Below is the scss for the same:
.header-container{
height: 85%;
background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}
I have spent hours looking for the solution but nothing worked.
Please help.
Thanks in advance!
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'
}
]
}
};
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 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
}