Reputation: 61

Spree -4.4 - Fresh install gives sprocket error re: spree-dashboard.js

enter image description here

Im facing missing 'spree-dashboard.js' file not found on fresh spree 4.4. Its not fixed by runing yarn install.

Upvotes: 4

Answers (6)

Arsii Rasheed

Reputation: 351

If you are setting up spree without docker then you need to compile assets

running rails assets:precompile will resolve the issue

Upvotes: 1

Robert Martínez

Reputation: 21

running the following command worked for me

yarn build

Upvotes: 2

Mohamed ABDELLANI

Reputation: 63

I faced the same issue, webpack was looking for "@spree/dashboard".

The installation of that package solved the issue

yarn add @spree/dashboard

Upvotes: 0

Kulgar

Reputation: 1875

I faced the same issue and found the solution. The Spree documentation guides us to install esbuild. But the documentation never explains how to actually use esbuild to build our JS.

You normally have jsbundling-rails added in your Gemfile.lock. You can find more info about that gem here: https://github.com/rails/jsbundling-rails

To start a new Spree project, it is best to generate the rails project using esbuild, thanks to this command:

rails new myapp -j esbuild

That way the app will already be using esbuild which is the tech used by spree.

Otherwise, you would have to migrate from webpacker to esbuild. I found a nice tuto here: https://dev.to/thomasvanholder/how-to-migrate-from-webpacker-to-jsbundling-rails-esbuild-5f2

And finally, to build JS with esbuild, you can add this line to your "scripts" in package.json:

"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"

It is normally printed in the terminal when you install esbuild, but you may easily miss it.

And when you run yarn build this command will generate the proper spree-dashboard.js file within app/assets/builds.

Also, the esbuild install command adds a line in Procfile.dev with a "watch" option. You'll eventually want to start the project using ./bin/dev which starts a Foreman process that handles what's in Procfile.dev.

Finally, as a bonus, I also followed this nice tutorial: https://noelrappin.com/blog/2021/12/typescript-and-jsbundling-and-rails-7/

Which helps you set up esbuild + jsbundling-rails + typescript. If you like typescript, this is an easy way to use it with esbuild in a Rails project.

Upvotes: 0