Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?

Question

I am trying to use react-bootstrap-table2 in my project to create a simple bootstrap table, but am getting the error:

Failed to Compile: Module not found: Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css' in '/Users/xxx/Documents/xxx/src/routes/home'.

I did install all the necessary packages and verified that bootstrap.min.css exists where it should.

My code looks like this:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import BootstrapTable from 'react-bootstrap-table-next';

class Home extends React.Component {
  state = {
    products: [
      {
        id: 1,
        name: 'TV',
        'price': 1000
      },
      {
        id: 2,
        name: 'Mobile',
        'price': 500
      },
      {
        id: 3,
        name: 'Book',
        'price': 20
      },
    ],
    columns: [{
      dataField: 'id',
      text: 'Product ID'
    },
    {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price',
      sort: true
    }]
  } 

  render() {
    return (
      <div className="container" style={{ marginTop: 50 }}>
        <BootstrapTable 
        striped
        hover
        keyField='id' 
        data={ this.state.products } 
        columns={ this.state.columns } />
      </div>
    );
  }
}

export default Home;

My package.json file looks like this:

{
  "name": "codist.org",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.0.0",
    "material-ui": "^1.0.0-beta.25",
    "material-ui-icons": "^1.0.0-beta.17",
    "react": "^16.2.0",
    "react-bootstrap-table-next": "^1.1.3",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.5",
    "reactstrap": "^6.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8080"
}

Any suggestions for how to resolve that error?

Directories in node_modules does not need the path prefix. — n8o
– n8o, Commented Aug 29, 2018 at 15:34

sagi · Accepted Answer · 2018-08-29 15:36:07Z

18

Try this:

import 'bootstrap/dist/css/bootstrap.min.css';

When not specifying a path, Node/webpack will search for the import inside node_modules folder. I'm not sure what's going wrong, but this is the correct way to import modules from the node_modules folder.

edited Aug 29, 2018 at 15:36

answered Aug 29, 2018 at 15:32

sagi

40.6k7 gold badges66 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

arcade16 Over a year ago

That fixed it, thanks! Will accept as soon as Stack allows me to.

Razvan Zamfir Over a year ago

Whwew shoud this line go?

Waleed Alrashed Over a year ago

This solution also worked for me when trying to import font-awesome @import 'font-awesome/css/font-awesome.min.css';

krishna · Accepted Answer · 2022-12-31 06:49:59Z

0

If you are using VS code use "node_modules/bootstrap/dist/css/bootstrap.min.css" in styles for angular.json

answered Dec 31, 2022 at 6:49

krishna

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related