ReactJS react-app-rewired / config-overrides for raw-loader not working

Question

I'd like to use the raw-loader in my react js project. I'm using the react-app-rewired lib and a config-overrides.js.

When I import the file, I'm hoping to receive the contents of it. Instead, I'm receiving the path to the file.

App.js

import toolboxsrc from './Blockly/toolbox.xml.raw';
....

// setting a prop of a component
toolboxsrc={toolboxsrc}

~ ~ ~ ~ ~
config-overrides.js

module.exports = function override(config, env) {    
    config.module.rules.push (
          {
            test: /\.raw$/i,
            loader: 'raw-loader',
          }
    )

    return config;
}

I'm using the command "start": "react-app-rewired start --scripts-version react-scripts"

There are no errors in the compilation, but the prop is being set to /static/media/toolbox.xml.93a6d25d.raw instead of the hoped-for contents of the file.

Thank you!

Answer 1

The solution I found was to add a raw loader directive to the source. This also requires a compile-time directive:

/* eslint import/no-webpack-loader-syntax: off */
import textFile from '!!raw-loader!./assets/textFile.txt';