Rails 6 + Webpacker add and use yaml-loader

Question

I'm trying to load a YAML file from one of the packs in my project, currently is this:

import SwaggerUI from 'swagger-ui';

const spec = require('./swagger-config.yaml');

const ui = SwaggerUI({
  spec,
  dom_id: '#swagger',
});

This is to initialize swagger-ui, and I have no problems calling SwaggerUI with the given dom_id, but when I try to add the spec file, to render something (which is the functionality) I receive this:

                       ERROR in ./app/javascript/packs/swagger-config.yaml 7:7
XX:53:17 webpacker.1 | Module parse failed: Unexpected token (7:7)
XX:53:17 webpacker.1 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

If I add the yaml-loader to the project:

// package.json
{
  ...
  "dependencies": {
    ...
    "yaml-loader": "^0.6.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const yamlLoader = {
  test: /\.yaml$/,
  use: 'yaml-loader'
}

environment.loaders.append('yaml', yamlLoader)

module.exports = environment

then I get this message:

xx:55:35 webpacker.1 | ERROR in ./app/javascript/packs/swagger-config.yaml 1:10
xx:55:35 webpacker.1 | Module parse failed: Unexpected token (1:10)
xx:55:35 webpacker.1 | File was processed with these loaders:
xx:55:35 webpacker.1 |  * ./node_modules/yaml-loader/index.js
xx:55:35 webpacker.1 | You may need an additional loader to handle the result of these loaders.

Is there something specific to do related to Rails in order to load such a YAML file within a pack?

user_8431259 · Answer

The answer is in the README from the repo:

... For Webpack v4, you'll need to set the rule to have type: "json"

with the config/webpack/environment.js file looking like:

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

environment.loaders.append(
  'yaml', 
  { test: /\.ya?ml$/,  use: 'yaml-loader', type: 'json' }
)

module.exports = environment

Rails 6 + Webpacker add and use yaml-loader

1 Answers