Topic: Can't build with webpack
Hello Recently I decided move to webpack, and ran into some errors. What should I do with bootstrap?
Here is errors
ERROR in ./node_modules/mdbreact/dist/css/mdb.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
> @charset "UTF-8";
| /*!
| * Material Design for Bootstrap 4
@ ./src/index.js 11:0-35
ERROR in ./node_modules/bootstrap-css-only/css/bootstrap.min.css 6:3
Module parse failed: Unexpected token (6:3)
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
| * Copyright 2011-2019 Twitter, Inc.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/
LICENSE)
> */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e...
Webpack config
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
target: "node",
devtool: 'eval-source-map',
module: {
rules: [
{
test: /.js$|.jsx$/,
exclude: /node_modules|\.json$/,
use: {
loader: "babel-loader"
},
resolve: {
extensions: ['.js', '.jsx']
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
},
{loader: 'sass-loader'}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: "file-loader",
options: {
outputPath: 'media',
name: '[name]-[sha1:hash:7].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/public/index.html",
inject: 'body'
})
]
};
.babelrc
{
"presets": [
[
"@babel/env",
{
"debug": true,
"useBuiltIns": "usage",
"modules": false
}
],
"@babel/react"
],
"plugins": [
"@babel/plugin-transform-template-literals",
"@babel/plugin-proposal-class-properties"
]
}
Piotr Glejzer staff answered 5 years ago
Hello,
may you go to our mdb.css file and remove '@charset "UTF-8"' from that file? This is located probably on the top of this file. It should help. Have a nice day.
Best,Piotr
MadFox answered 5 years ago
I deleted exclude: /node_modules/
from css loader and get build without errors.
But looks like it isn't solution, because bootstrap not works
Piotr Glejzer staff commented 5 years ago
Yes, this is not a solution because you will not have CSS styles if you delete this folder. Did you do what suggests before?
MadFox commented 5 years ago
I did not delete the node_modules folder, I deleted the line "exclude: /node_modules/" from the rule. I added file-loader also and have a folder with css files. So this rule now looks like this { test: /.css$/, use: [ {loader: "file-loader", options: { outputPath: 'css', name: "[name]-[sha1:hash:7].[ext]" } }, {loader: 'style-loader'}, { loader: 'css-loader', options: { modules: true } }, {loader: 'sass-loader'} ] }
Piotr Glejzer staff commented 5 years ago
Hello again,
I will check this problem today. I will let you know.
Best, Piotr
MadFox commented 5 years ago
Hello, are there any results?
Piotr Glejzer staff commented 5 years ago
yes, I still don't know why it is not working correctly. It is on our list to do to check it. Sorry about that. Have a nice day.
Verified Answer answered 2 years ago
In order to solve this error Either You need to downgrade the babel/core packages Or you need to downgrade the babel packages will fix your error. You can Read More about this solution at here
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.22.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No