rails: Basic Rails 7 project with Bootstrap fails

Steps to reproduce

rails new testapp -d postgresql -c bootstrap
cd testapp
bin/dev

Expected behavior

App should launch and automatically include the bootstrap/hotwired/stimulus javascript packages

Actual behavior

the yarn build stage reports these errors:

22:01:44 js.1   | ✘ [ERROR] Could not resolve "@hotwired/turbo-rails"
22:01:44 js.1   |
22:01:44 js.1   |     app/javascript/application.js:2:7:
22:01:44 js.1   |       2 │ import "@hotwired/turbo-rails"
22:01:44 js.1   |         ╵        ~~~~~~~~~~~~~~~~~~~~~~~
22:01:44 js.1   |
22:01:44 js.1   |   You can mark the path "@hotwired/turbo-rails" as external to exclude it from the bundle, which will remove this error.
22:01:44 js.1   |
22:01:44 js.1   | ✘ [ERROR] Could not resolve "bootstrap"
22:01:44 js.1   |
22:01:44 js.1   |     app/javascript/application.js:4:27:
22:01:44 js.1   |       4 │ import * as bootstrap from "bootstrap"
22:01:44 js.1   |         ╵                            ~~~~~~~~~~~
22:01:44 js.1   |
22:01:44 js.1   |   You can mark the path "bootstrap" as external to exclude it from the bundle, which will remove this error.
22:01:44 js.1   |
22:01:44 js.1   | ✘ [ERROR] Could not resolve "@hotwired/stimulus"
22:01:44 js.1   |
22:01:44 js.1   |     app/javascript/controllers/hello_controller.js:1:27:
22:01:44 js.1   |       1 │ import { Controller } from "@hotwired/stimulus"
22:01:44 js.1   |         ╵                            ~~~~~~~~~~~~~~~~~~~~
22:01:44 js.1   |
22:01:44 js.1   |   You can mark the path "@hotwired/stimulus" as external to exclude it from the bundle, which will remove this error.
22:01:44 js.1   |
22:01:44 js.1   | ✘ [ERROR] Could not resolve "@hotwired/stimulus"
22:01:44 js.1   |
22:01:44 js.1   |     app/javascript/controllers/application.js:1:28:
22:01:44 js.1   |       1 │ import { Application } from "@hotwired/stimulus"
22:01:44 js.1   |         ╵                             ~~~~~~~~~~~~~~~~~~~~
22:01:44 js.1   |
22:01:44 js.1   |   You can mark the path "@hotwired/stimulus" as external to exclude it from the bundle, which will remove this error.
22:01:44 js.1   |
22:01:44 js.1   | 4 errors
22:01:44 js.1   | [watch] build finished, watching for **changes...**

and the yarn build-css stage reports this error:

22:01:45 css.1  | Error: Can't find stylesheet to import.
22:01:45 css.1  |   ╷
22:01:45 css.1  | 1 │ @import 'bootstrap/scss/bootstrap';
22:01:45 css.1  |   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
22:01:45 css.1  |   ╵
22:01:45 css.1  |   app/assets/stylesheets/application.bootstrap.scss 1:9  root stylesheet
22:01:45 css.1  |
22:01:45 css.1  | Sass is watching for changes. Press Ctrl-C to stop.

System configuration

testapp$ rails -v
Rails 7.0.1

testapp$ ruby -v
ruby 3.1.0p0 (2021-12-25 revision fb4df44d16) [x86_64-linux]

testapp$ node -v
v17.3.1

testapp$ yarn -v
3.1.1

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

This is the generated package.json file with above command

RE: rails new demo -d postgresql --css bootstrap

and if you check this file hotwired/stimulus is missing in the package.json file

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/turbo-rails": "^7.1.1",
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.20",
    "sass": "^1.49.7"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

SOLUTION:

Manually adding @hotwired/stimulus fixed the problem

yarn add @hotwired/stimulus

Now if you run

./bin/dev

Everything works.

+14

przbadu on Feb 8, 2022

After many hours, this somehow fixed it for me:

npm remove yarn
yarn install

I am not sure this should be a closed issue. Or it should be documented in the getting started process.

bradleygauthier on Jul 27, 2022

I got the same problem when I reinstalled the operating system. I recently installed Ubuntu 21.10 from scratch. Then I install nvm, node and yarn my system config:

nvm -v  ---> 0.39.1
node -v ----> v16.14.0
yarn-v  -----> 3.1.1
Rails 7.0.2.2
ruby 3.1.0p0

Then i create rails app with bootstrap

rails new blog -c bootstrap
cd blog
./bin/dev

it`s not working To resolve the issue I did the following

cd blog
npm remove yarn
yarn install

Now `./bin/dev’ command working and start application.

an280420 on Feb 20, 2022

yarn add @hotwired/turbo-rails 
./bin/dev

worked for me

fertobar on Jun 22, 2023