Rails: Enable Coffeescript with Webpacker

kinopyo avatar
kinopyo

We can already write JavaScript in ES6 syntax with Webpacker. But if you're in the transition phase to migrate an old Rails app from Sprockets (Asset Pipeline) to Webpacker, you might still want to keep your Coffeescript files in use.

The default setting of Webpacker doesn't support Coffeescript. There is a handy command to install it.

Install coffee-loader

Rails Webpacker has provided the installation script to easily enable coffeescript:

Run the command under your rails app directory.

rails webpacker:install:coffee

This will generate the configurations, as well as a test file app/javascript/packs/hello_coffee.coffee for you.

Verify it's working

Include it in the application layout file:

layouts/application.html.erb

<%= javascript_pack_tag 'hello_coffee' %>

Reload the page, you should be able to see this message from the console:

Hello world from coffeescript

Then remove the test file and revert the change:

rm app/javascript/packs/hello_coffee.coffee
git checkout app/views/layouts/application.html.erb

Behind the scenes

The installation script is convenient. But it's still worth to understand what's happening behind the scenes. Webpacker as one of the Rails family members, has its own convention. Getting familiar with it is gonna help you further configure Webpack.

Here is a complete diff of the changes, equivalent of the installation script.

yarn add coffeescript coffee-loader

config/webpack/environment.js

const { environment } = require('@rails/webpacker') const coffee = require('./loaders/coffee') environment.loaders.append('coffee', coffee)

config/webpacker.yml

extensions: - .coffee - .js

config/webpack/loaders/coffee.js

module.exports = { test: /\.coffee(\.erb)?$/, use: [{ loader: 'coffee-loader' }] }

Tested in Rails 5.2 with Webpacker 3.4.

References


kinopyo avatar
Written By

kinopyo

Indoor enthusiast, web developer, and former hardcore RTS gamer. #building-bloggie
Published in Rails

Enjoyed the post?

Clap to support the author, help others find it, and make your opinion count.


kinopyo's recent posts

Comments

unamed avatar

Hello,

I got :

Uncaught Error: Module build failed (from ./node_modules/coffee-loader/dist/cjs.js):
TypeError: this.getOptions is not a function

I have try some research on the internet but found nothing helpfull.
Did you have any idea of where to start to fix this ?
I'm pretty sad to work on an rails 6 app without coffeescript,
is it at least possible to use webpack and assetpipeline (only for coffeescript) at the same time ?

Michael Fehr avatar

Hi,

Had the same issue. This seems to be a "random" error, when the coffee-loader does not work properly. In my case it was a version conflict between coffeescript and coffee-loader (coffe-loader v 2.0 requires coffeescript > 2.0 - but the rails rails webpacker:install:coffee command insralls coffescript 1.12.7 (latest v1).

To solve it, I had to change the line in package.json (in root) from:
"coffee-loader": "^2.0.0",
to
"coffee-loader": "0.9.0",
(0.9.0 is the latest which will work with coffeescript v1)

and then run: yarn install --check-files (to "dowgrade" tha package)

To leave a comment, you need to login first 😉