I can't import Bootstrap in my NPM project

Question

I'm trying to import bootstrap through the npm console, but I don't know how to connect the packages with my project. I've tried to import it in my index.mjs like this: import 'bootstrap', but the console drop me an error saying: Reference error: document is not defined. I'm using Handlebars engine. Thanks!

Bootstrap is for browser environment only. Are you trying to output JavaScript (from Handlebars) that uses Bootstrap? — , Nov 17 '21 at 18:19
To wit: https://stackoverflow.com/questions/32126003/node-js-document-is-not-defined — msanford, Nov 17 '21 at 18:21
I suspect that the poster is trying to add bootstrap to a server-rendered page that used handlebars as its templating engine. — Chris, Nov 17 '21 at 18:30

score 1 · Answer 1 · answered Nov 19 '21 at 03:50

I'm going to assume that you're trying to add bootstrap to a server-rendered page that uses handlebars as its templating engine.

Inside your server page, I'm going to call it app.js you should add the following two lines:

app.use('/css', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css')));
app.use('/js', express.static(path.join(__dirname, 'node_modules/bootstrap/dist/js')));

Then in your master page, and I'm going to call it layout.hbs you would add these references:

<link rel="stylesheet" href="./css/bootstrap.min.css" />
<script src="./js/bootstrap.bundle.js"></script>

Once you have those lines of code in those files, you should now have bootstrap and its accompanying JavaScript files ready for use by your HTML elements.

Good luck and hope this helps you out.

I can't import Bootstrap in my NPM project

1 Answers1