CODEWITHSUNDEEP
javascriptreactjswebpackbootstrap-loader
code_dude
code_dude

Reputation: 1111

How to fix Bootstrap error when I run webpack-dev-server?

When I run npm start script command for webpack-dev-server in the console, the localhost:8080 opens in the browser but doesn'render my ./src/index.js file. Instead I get an error pointing to a bootstrap file.

My project's tree

My Project
    /node_modules
    /src
        /components
            Counter.js
        index.html
        index.css
        index.js
    package.json
    package-lock.json
    webpack.config.js

Package.json

{
"name": "react_project", 
"version": "1.0.0",
"description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "bootstrap": "^4.1.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            },
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/Counter';

ReactDOM.render(
    <Counter />,
    document.getElementById('root')
);

.src/index.html

<div id="root"></div>

.src/components/Counter.js

import React, { Component } from 'react';

class Counter extends Component {
    render() {
        return <h1>Hello World</h1>;
    }
}

export default Counter;

This is how the error looks in the terminal

ERROR in ./src/index.js
Module not found: Error: Can't resolve './App' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 4:0-24
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./src/index.js
Module not found: Error: Can't resolve './components/Counter' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 6:0-43 7:36-43
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./src/index.js
Module not found: Error: Can't resolve './src/index.css' in 'C:\Users\cristi\WORK\My Project\src'
 @ ./src/index.js 3:0-25
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
> :root {
|   --blue: #007bff;
|   --indigo: #6610f2;
 @ ./src/index.js 5:0-42
 @ multi (webpack)-dev-server/client?http://localhost:8084 ./src
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 359 bytes {0} [built]
i ?wdm?: Failed to compile.

GitHub project's files if you want to try them out

https://github.com/cristiAndreiTarasi/FStackoverflow

I want to get webpack to work properly with bootstrap and create the ./dist folder in order to get the result in the browser.

Upvotes: 1

Views: 6297

Answers (1)

axm__
axm__

Reputation: 2673

in ./src/index.js you import App:

import App from './App';

But you 1) don't use App and also there is no App.js(x) in your project directory. Remove that line or comment it out (since you're not using it).

Then for the error: Module not found: Error: Can't resolve './components/Counter':

You say in your question that your project directory looks like:

My Project
    /src
        /component
            Counter.js

But your GitHub shows that Counter.js actually is Counter.jsx. If you want to import files without extensions ('./Counter' instead of ./Counter.jsx or ./Counter.js), Webpack - without any tweaking - defaults to one of: ['.wasm', '.mjs', '.js', '.json']. You need to add the following to your webpack config if you want also want to import .jsx without extension:

module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx'] // add .jsx
  }
};

For the error Error: Can't resolve './src/index.css': once again, your GitHub doesn't show an index.css file in your src directory.

You also need css-loader set up to solve the following error:

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0 Module parse failed: Unexpected token (7:0)

The errors you receive are actually very descriptive.

Upvotes: 1

Related Questions