15

Newly generated Rails 7.0 with esbuild option errors out on startup.

rails new [project name] --javascript=esbuild --css=tailwind

On creating a new rails 7 project, I try to start the application using bin/dev which uses now uses foreman. However, it errors out with 'error command "build" not found.'

bin/dev
                                                                                                      !10520
16:07:31 web.1  | started with pid 53018
16:07:31 js.1   | started with pid 53019
16:07:31 css.1  | started with pid 53020
16:07:32 js.1   | yarn run v1.22.17
16:07:32 css.1  | yarn run v1.22.17                    **************             
16:07:32 js.1   | error Command "build" not found. <== *****THIS*****
16:07:32 js.1   | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
16:07:32 css.1  | error Command "build:css" not found.
16:07:32 css.1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
16:07:33 css.1  | exited with code 1
16:07:33 system | sending SIGTERM to all processes
16:07:33 js.1   | exited with code 1
16:07:33 web.1  | terminated by SIGTERM
notapatch
  • 6,569
  • 6
  • 41
  • 45

4 Answers4

34

Issue

The problem is that with npm < 7.1 rails generation expects you to add build commands to the package.json scripts.

rails new my_app --javascript=esbuild --css=tailwind
...
Add "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds" } to your package.json
...
Add "scripts": { "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css" } to your package.json

$ cat ol_npm/package.json
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
  ...
  }
  // !! script section missing !!
  // Add the above scripts
}

Later npm (>= 7.1), add it in to package.json for you. The best long term fix is to upgrade npm (solution 1), however, you can still add scripts by hand (see solution 2 below) and it will work.

Solution

1. npm upgrade:

The fix required upgrading npm. Then running the installer again.

  1. js-bundling requires npm 7.1+
  2. run the installer again

Examples of re-running installer

   ./bin/rails javascript:install:[esbuild|rollup|webpack]
   ./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]

With this done Rails automatically updates package.json with the required scripts.

2. Add the script to package.json

If for some reason, you can't upgrade node/npm then you simply have to copy the "Add script" commands into package.json as instructed.

  1. Add script (see below)
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    ...
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}
  1. yarn build
  2. yarn build:css
notapatch
  • 6,569
  • 6
  • 41
  • 45
  • Nicely answered! Just in case you want to deploy your rails app to Heroku, for example, that requires "assets:precompile" task, but you don't really have JS/CSS. Define empty scripts for build and build:css like this: "build": "echo skipped" and "build:css": "echo skipped" – ka8725 Nov 07 '22 at 15:59
2

If you got here like I did for

esbuild: command not found

That is because the build script is there, but you have to do an npm install to install all the packages in package.json.

Mark Swardstrom
  • 17,217
  • 6
  • 62
  • 70
1

I would like to add to @notapatch answer to run the following commands after step 2:

yarn build

and then

yarn build:css

You're welcome.

Nelson Miranda
  • 5,484
  • 5
  • 33
  • 54
0

As already suggested, the problem is that npm --version < 7.1

So the short answer would be:

npm install -g npm@latest

Then repeat rails new ... once again.

valk
  • 9,363
  • 12
  • 59
  • 79