Import a YAML file in React with craco and yaml-loader

Question

I am having a quite difficult time trying to import a YAML file as a JS object in my React code.

I made this simple and reproductible CodeSandbox example built with create-react-app to show my problem.

All I am doing is:

• configuring Webpack in a craco.config.js file (as recommended in the craco docs),
• adding some Webpack configuration code for the YAML loader (as recommended in the yaml-loader docs).
• importing the YAML file in the index.js file so I can use it as a JS object.

// craco.config.js

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            test: /\.yaml$/,
            use: "yaml-loader"
          }
        ],
      },
    },
  },
};

// index.js
...
import testYamlFile from "./testYamlFile.yaml"

ReactDOM.render(
  <>
    <p>Parsed test YAML file object: {testYamlFile}</p>
    <p>Type of parsed object: {typeof testYamlFile}</p>
  </>,
  document.getElementById("root")
);

// Output in CodeSandbox browser:

Parsed test YAML file object: data:application/octet-stream;base64,aGVsbG9Xb3JsZEZvck1vZGVsOiBIZWxsbywgZGVhciBtb2RlbCAhCg==
Type of parsed object: string

In the CodeSandbow example, I am getting a base64 string, so you would tell me that I simply need to decode it and get the content. But there are two things:

• first, this is not what is intended: I should get a JS object according to the yaml-loader docs
• and second, what I get on my PC -- and I can only reproduce it on my machine, despite my best efforts to reproduce the exact same project in CodeSandox -- is even weirder. Actually, I only get the bundled file path, and that's all :

// Output in my own local browser:

Parsed test YAML file object: /static/media/testYamlFile.5a3cab37.yaml
Type of parsed object: string

I suppose that because Webpack added its unique ID to the file name, it is recognizing and bundling the yaml file. But I don't understand why I can't access its content in my code.

Also tried with js-yaml-loader instead of yaml-loader: same issue. What am I doing wrong ? Thanks for your help.

Answer 1

Update, I finally made it work by doing some magic in craco.config.js. The craco helpers did not help much, my goal is to make the assets loader (without loader name, you have to use your own matcher to find the loader) ignore the yaml extensions, then add new rule to resolve the yaml content. Final code is like below:

module.exports = {
    
plugins: [
    {
        plugin: {
            overrideWebpackConfig: ({ context, webpackConfig }) => {
                console.log(webpackConfig.module.rules.find(rule => rule.hasOwnProperty('oneOf')));
                const { isFound, match: fileLoaderMatch } = getLoader(
                    webpackConfig,
                    rule => rule.type === 'asset/resource'
                );

                if (!isFound) {
                    throw {
                        message: `Can't find file-loader in the ${context.env} webpack config!`
                    };
                }

                fileLoaderMatch.loader.exclude.push(/\.ya?ml$/);

                const yamlLoader = {
                    use: 'yaml-loader',
                    test: /\.(ya?ml)$/,
                };
                webpackConfig.module.rules.push(yamlLoader);
                return webpackConfig;
            },
        }
    },
],
}