Can't build with webpack


Topic: Can't build with webpack

MadFox asked 5 years ago

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 worksenter image description here


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.


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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags