Can't import file with craco in a React app

[JulesLecuir]

Hi guys,

I am having issues using yaml-loader with craco. Basically, even with a proper Webpack config, yaml-loader doesn't actually load the file. All I am getting is the file path of this file, not its content.

I have also submitted a question on StackOverflow, I thought alo about submitting an issue here so you're aware of the problem (and I may have forgotten something in my config as well).

Here's the link, that also contains a reproductible CodeSandbox example: https://stackoverflow.com/questions/74126812/import-a-yaml-file-in-react-with-craco-and-yaml-loader

Thanks in advance for your help :)

[saeidalidadi]

I also had this issue. that is due to the loaders' order inside the webpack.config.js config of react-scripts. just add this config to your craco.config.js.

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const rules = webpackConfig.module.rules;
      const { oneOf } = rules[rules.length - 1];
      oneOf[oneOf.length - 1].exclude.push(/\.ya?ml$/);
      // if you are thinking that using the unshift will solve this issue don't do that. 
      webpackConfig.module.rules.push({  
        test: /\.ya?ml$/,
        use: "yaml-loader"
      });
      return webpackConfig;
    },
  },
};

This will fix that issue 100%.