0

Question

How can I import Bootstrap from my node_modules/ into a js file without using node/express?

Introduction

I have installed Bootstrap5 in my Yarn monorepo because I don't wanna use CDNs, and I think is more flexible to configure with SASS if I have all the bootstrap package inside node_modules/.

yarn add bootstrap @popperjs/core

After compiling the Bootstrap scss and merging it with my custom stylesheets, I have created the following html code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Company</title> <link rel="stylesheet" href="css/styles.css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="../assets/images/logo/logo-transparent.png" alt="Company" width="40" height="40" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">About</a> <a class="nav-link" href="#">Careers</a> <a class="nav-link" href="#">Contact</a> </div> </div> </div> </nav> </body> </html>

How can I include the Bootstrap JS modules without using CDNs?

In the official docs of Bootstrap, it says that we can import all the JavaScript stuff with:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous" ></script>

But... as I have added Bootstrap to my project via Yarn (just for customizing the styles), I have thought to create my own script.js file to import everything from node_modules:

  • index.html:

<script type="module" src="js/main.js"></script>

  • js/main.js
import "bootstrap/dist/js/bootstrap.min.js"; // Just import everything from bootstrap

But I am getting the error:

Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../".

Also, inside index.html, if I do:

<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

it works OK, but I don't like the ../../../node_modules/. How can I handle this?

--Note: I am not using node/express in my project, just HTML, JavaScript and SCSS.

Improve this question

1 Answer 1

Reset to default
1

You might download the bootstrap file from the CDN server and serve it with the rest of your project. That way you aren't relying on a CDN or node/node modules.

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

3 Comments

Hey, can you explain me why is better to download the files instead of using a package manager for a HTML5 project?
It's just a bit simpler. If you are already using node/yarn then there's not a huge difference, but if you are only using yarn for this then it makes your project a lot simpler. It also simplifies serving the project. Generally, you don't want to serve node_modules publicly, so importing from node_modules in a properly hardened environment would be impossible.
Downloading the source code is a good idea too, but I think using a package manager is better for monorepos. I have decided to use parcel to build a distributed version of the project, in order to exclude the node_modules. Also, in dev mode, I am able to import js correctly. Thx very much.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.