Question

I'm stuck trying to add Bootstrap to my index.js file as per instructions on Bootstrap's site. Their suggestion errors out when I try it. I'm pretty sure there's something I'm missing, but I don't know what.

index.js is:

const express = require('express');
const hbs = require('hbs');
import 'bootstrap';

const app = express();

hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'hbs');

app.get('/', (req, res) => res.render('index'));

app.listen(3000, () => {
  console.log('App listening at port 3000!')
});

Error out is:

import 'bootstrap';
^^^^^^

SyntaxError: Unexpected token import

My package.json is:

"dependencies": {
    "bootstrap": "^4.0.0",
    "express": "^4.16.2",
    "hbs": "^4.0.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9"
  },

Hmm! When I added the following to the head of my index.hbs file it seems that bootstrap works for rendering the navbar properly now, but I'd like to achieve the same by using bootstrap installed through node npm.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 1

You can't use imports in nodejs environment if you don't use babel. You should use require.

Also, you are trying to import bootstrap in your server.js file.

I believe you want to import bootstrap in your app.js file. Your entry javascript file.

In your case I would just use CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 2

If you want to use the import keyword, you either have to use babel to transpile the code, OR use the .mjs file format. But this is not the main issue in your code.

You are trying to import bootstrap to NodeJs, which doesn't make much sense. NodeJs is server side javascript, bootstrap is for the frontend.

You should be using some kind of view engine in your application for handling frontend components. Checkout embedded javascript or pug for example.

However, nowadays people tend to use a frontend framework instead. Checkout popular choices like React, Vue, or Angular. React has a tool called create-react-app which makes it really easy to get started with.

Lastly, if you can give some insight on what you are trying to do with bootstrap, we may be able to give some more help.

Adding Bootstrap to index.js

2 个答案: