0

I'm currently in the process of transitioning from Sprockets to Shakapacker, and I need to get my view helper files (.js.erb) to be compiled correctly. I've followed the instructions on the rails-erb-loader GH: https://github.com/usabilityhub/rails-erb-loader, but I keep running into the following error when I run ./bin/webpacker-dev-server:

10% building 0/7 entries 28/35 dependencies 3/26 modulesTraceback (most recent call last):
        21: from bin/rails:9:in `<main>'
        20: from /Users/.rvm/gems/ruby-2.7.5/gems/activesupport-6.1.7.2/lib/active_support/dependencies.rb:332:in `require'
        19: from /Users/.rvm/gems/ruby-2.7.5/gems/activesupport-6.1.7.2/lib/active_support/dependencies.rb:299:in `load_dependency'
        18: from /Users/.rvm/gems/ruby-2.7.5/gems/activesupport-6.1.7.2/lib/active_support/dependencies.rb:332:in `block in require'
        17: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:31:in `require'
        16: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:22:in `require_with_bootsnap_lfi'
        15: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/loaded_features_index.rb:92:in `register'
        14: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `block in require_with_bootsnap_lfi'
        13: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require'
        12: from /Users/.rvm/gems/ruby-2.7.5/gems/railties-6.1.7.2/lib/rails/commands.rb:18:in `<main>'
        11: from /Users/.rvm/gems/ruby-2.7.5/gems/railties-6.1.7.2/lib/rails/command.rb:48:in `invoke'
        10: from /Users/.rvm/gems/ruby-2.7.5/gems/railties-6.1.7.2/lib/rails/command/base.rb:69:in `perform'
         9: from /Users/.rvm/gems/ruby-2.7.5/gems/thor-1.2.1/lib/thor.rb:392:in `dispatch'
         8: from /Users/.rvm/gems/ruby-2.7.5/gems/thor-1.2.1/lib/thor/invocation.rb:127:in `invoke_command'
         7: from /Users/.rvm/gems/ruby-2.7.5/gems/thor-1.2.1/lib/thor/command.rb:27:in `run'
         6: from /Users/.rvm/gems/ruby-2.7.5/gems/railties-6.1.7.2/lib/rails/commands/runner/runner_command.rb:42:in `perform'
         5: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:55:in `load'
         4: from /Users/.rvm/gems/ruby-2.7.5/gems/bootsnap-1.4.6/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:55:in `load'
         3: from /Users/node_modules/rails-erb-loader/erb_transformer.rb:19:in `<main>'
         2: from /Users/.rvm/rubies/ruby-2.7.5/lib/ruby/2.7.0/erb.rb:905:in `result'
         1: from /Users/.rvm/rubies/ruby-2.7.5/lib/ruby/2.7.0/erb.rb:905:in `eval'
(erb):42:in `<main>': undefined method `raw' for main:Object (NoMethodError)
Did you mean?  rand

Here's what my /webpack/loaders/erb.js file looks like (I am using the spring gem):

module.exports = {
    module: {
        rules: [
            {
                test: /\.erb$/,
                enforce: "pre",
                exclude: /node_modules/,
                loader: "rails-erb-loader",
                options: {
                    runner: (/^win/.test(process.platform) ? "ruby " : "") + "bin/rails runner",
                    env: {
                        ...process.env,
                        DISABLE_SPRING: 1,
                    },
                },
            },
        ],
    },
};

Here's my webpack.config.js file:

// use the new NPM package name, `shakapacker`.
// merge is webpack-merge from https://github.com/survivejs/webpack-merge
const { webpackConfig, merge } = require('shakapacker')
const erb = require('./loaders/erb')
const sass = require('./loaders/sass')
const coffee = require('./loaders/coffee')
const webpack = require('webpack');

const options = {
    resolve: {
        extensions: ['.css', '.scss', '.erb', '.coffee', '.svg', '.es6', '.js']
    }
}

// Copy the object using merge b/c the baseClientWebpackConfig is a mutable global
// If you want to use this object for client and server rendering configurations,
// having a new object is essential.
module.exports = merge(sass, coffee, erb, options, webpackConfig, {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
});

Inside of app/javascript/packs/application.js, I'm simply importing the js.erb (which is also located in app/javascript/packs), like so:

import './_ahoy_event_tracking.js.erb';

Lastly, once webpack is finished compiling, I receive the following error:

ERROR in ./app/javascript/packs/_ahoy_event_tracking.js.erb
Module build failed (from ./node_modules/rails-erb-loader/index.js):
Error: rails-erb-loader failed with code: 1
    at ChildProcess.<anonymous> (/Users/**/**/node_modules/rails-erb-loader/index.js:128:16)
    at ChildProcess.emit (node:events:526:28)
    at maybeClose (node:internal/child_process:1092:16)
    at Socket.<anonymous> (node:internal/child_process:451:11)
    at Socket.emit (node:events:526:28)
    at Pipe.<anonymous> (node:net:687:12)

webpack 5.75.0 compiled with 1 error and 2 warnings in 40243 ms

Is anyone whose familiar with Shakapacker have an idea of how I get get these js.erb files compiling correctly? I've tried a number of different loader module configurations, but none of them seem to work. Any guidance on this would be much appreciated!

JoshingYou
  • 113
  • 7

0 Answers0