Webpacker: Module build failed: SyntaxError: Unexpected token for ERB with webpacker 3.1.1

[doits]

I just upgraded to webpacker 3.1.1 and cannot compile .js.erb files anymore.

If have a file ./app/javascript/packs/components/event_fields.js.erb with erb out (<%= ... %>) and it tells me:

ERROR in ./app/javascript/packs/components/event_fields.js.erb
Module build failed: SyntaxError: Unexpected token (47:22)

  45 |     },
  46 |     possible_appointments(ea) {
> 47 |       let intervals = <%= EventAppointment::INTERVALS.to_json %>
     |                       ^
  48 |
  49 |       if(!ea.end_at || !ea.start_at) { return [] }

Has been working fine on 3.0.2.

I followed the upgrade guide and basically freshly installed webpacker (my webpacker.yml has all options default).

[gauravtiwari]

Thanks for report, will take a look 👍

[gauravtiwari]

As a temporary fix, you can add following to your environment.js:

const { environment } = require('@rails/webpacker')
const erb = environment.loaders.get('erb')

// Re-insert back again but before babel loader
environment.loaders.insert('erb', erb, { before: 'babel' })

[doits]

Thanks, works for my .js.erb now!

I think the same happens for other loaders, too? Now my .js.erb compiles, but my .vue.erb is not recognized by vue:

ERROR in ./app/javascript/packs/components/event_custom_question_answers_form.vue.erb
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>

[gauravtiwari]

Yeah, will push a fix later in the evening. To fix all loaders using erb:

environment.config.merge({
  module: {
    rules: [
      environment.loaders.get('erb')
    ]
  }
})

environment.loaders.delete('erb')

[gauravtiwari]

Sorry for trouble folks, will fix new bugs and make a new release soon.