CODEWITHSUNDEEP
ruby-on-railswebpackerbwebpacker
ProxyGear
ProxyGear

Reputation: 835

Rails Webpacker : rails-erb-loader failing parsing .html.erb

I try to use the rails-erb-loader.

In my home.component.ts

import templateString from './home.component.html';

I have a home.component.html.erb

<div class="row">...</div>

I also have a app/javascript/packs/hello_erb.js.erb that was generated by the rake webpacker:install:erb

I get the following error :

ERROR in ./app/javascript/packs/hello_erb.js.erb
Module build failed: Error: rails-erb-loader failed with code: 1

I guess it's a configuration error loading the ruby bin, I guess I can fix this, my real problem is the following error :

ERROR in ./app/javascript/hello_angular/app/home/home.component.html.erb
Module parse failed: Unexpected token (1:0)

Straight forward my config :

config/webpack/loaders/erb.js

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

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const typescript =  require('./loaders/typescript')
environment.loaders.append('typescript', typescript)

const html = require('./loaders/html')
environment.loaders.append('html', html)

const erb =  require('./loaders/erb')
environment.loaders.append('erb', erb)

module.exports = environment

And I have the .erb extension enabled in the config/webpacker.yml

My intuition is that my .html.erb is parsed as a javascript for some reason ... I have no idea why.

I digged into the webpacker and rails_erb_loader issues without success. Any idea ?

BTW, I saw this similar question : Webpacker in Rails Project using angular cannot import .html.erb and .css from external template

Upvotes: 4

Views: 4124

Answers (4)

Matt
Matt

Reputation: 6330

Hoping this may help someone in the future: We had this error because our Ruby was incorrect and wouldn't compile.

Tried everything with configurations, got deep into Webpack(er) internals. In the end, our variable name was typed incorrectly in our erb file.

Upvotes: 0

ytbryan
ytbryan

Reputation: 2694

Also, webpacker provides erb loader if you execute: 

rails webpacker:install:erb

Upvotes: 2

yoones
yoones

Reputation: 2474

I had a similar bug and fixed it by adding the following in config/webpacker.rb:

default:
  extensions:
    - .js.erb # first array entry

And replacing append with prepend for erb in config/webpacker/environments.js:

environment.loaders.prepend('erb', erb)

Upvotes: 1

ProxyGear
ProxyGear

Reputation: 835

Ok, so that's dead simple in the end ...

I created a loader definition html_erb.js

module.exports = {
  test: /\.html.erb$/,
  loader: [
    'rails-erb-loader',
    'html-loader'
  ]
};

And that's it, it catch prior to the classic erb loader and transform the outup into html ... That was what I was hoping the rails-erb-loader would do right of the box but ...

Anyway, it works :D

Upvotes: 0

Related Questions