Rails Webpacker：rails-erb-loader 解析 .html.erb 失败答案

【问题标题】：Rails Webpacker : rails-erb-loader failing parsing .html.erbRails Webpacker：rails-erb-loader 解析 .html.erb 失败
【发布时间】：2018-09-16 19:47:07
【问题描述】：

我尝试使用 rails-erb-loader。

在我的 home.component.ts 中

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

我有一个 home.component.html.erb

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

我还有一个由 rake webpacker:install:erb 生成的 app/javascript/packs/hello_erb.js.erb

我收到以下错误：

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

我猜这是加载ruby bin的配置错误，我想我可以解决这个问题，我真正的问题是以下错误：

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

直接介绍我的配置：

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

我在 config/webpacker.yml 中启用了 .erb 扩展

我的直觉是我的.html.erb 出于某种原因被解析为 javascript……我不知道为什么。

我深入研究了webpacker 和rails_erb_loader 问题，但没有成功。有什么想法吗？

顺便说一句，我看到了这个类似的问题： Webpacker in Rails Project using angular cannot import .html.erb and .css from external template

【问题讨论】：

标签： ruby-on-rails webpack erb webpacker

【解决方案1】：

我有一个类似的错误并通过在 config/webpacker.rb 中添加以下内容来修复它：

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

并在 config/webpacker/environments.js 中将 append 替换为 prepend 用于 erb：

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

【讨论】：

【解决方案2】：

另外，如果你执行，webpacker 会提供 erb loader：

rails webpacker:install:erb

【讨论】：

我已经处理了一段时间了。据我记得......我的问题是它只针对.js.erb而不是.html.erb。但是要检查一下，可能我也只是想念它......

【解决方案3】：

好的，最后这很简单......

我创建了一个加载器定义 html_erb.js

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

就是这样，它在经典的 erb 加载器之前捕获并将输出转换为 html ... 这就是我希望 rails-erb-loader 能够立即执行的操作，但是...

无论如何，它有效：D

【讨论】：

那么当.erb 也应该匹配时，为什么html.erb$ 很重要？它确实提取了您的 .js.erb 文件吗？
好问题，我删除了上面提到的.js.erb。通过.js.erb 用 ruby 模板化 js 对我来说感觉很奇怪，只是个人喜好。所以我的项目中没有这样的东西。无法为您提供帮助。

【解决方案4】：

希望这可能对将来的某人有所帮助：我们遇到此错误是因为我们的 Ruby 不正确并且无法编译。

尝试了所有配置，深入研究了 Webpack(er) 内部。最后，我们的 erb 文件中的变量名输入错误。

【讨论】：