ReactJS copy text file content into component on build

Question

I am writing a "Terms of Service" page using ReactJS and my idea is to copy the contents of the file tos-text.txt in the component at build time, to avoid fetching time when the page is opened. I tried as follows, but with poor results:

<h2>Terms of Service</h2>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed
    consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac
    habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non
    egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum
    blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class
    aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis
    nibh et mi ullamcorper mattis eu eget lectus.
</p>

import { Container } from 'react-bootstrap'

// Page content
import TosText from 'config/tos-text.txt'

// --- Terms of Service ---
const Tos = () => {
    return (
        <Container className="flex-grow-1 tos">
            <div dangerouslySetInnerHTML={{ __html: TosText }} />
        </Container>
    )
}

export default Tos

Currently the page only shows the link to the generated txt file (/static/media/tos-text.dc220bee.txt).

---

EDIT:
As @jsejcksn suggested (source-assets), I've tried to install react-app-rewired, using this config-overrides.js:

module.exports = function override(config, _env) {
    let rules = config.module.rules[1].oneOf
    rules.splice(rules.length - 1, 0, {
        test: /\.txt/,
        type: 'asset/source',
    })

    return config
}

But when I try to start the test server, it says:

$ react-app-rewired start
Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[8].type should be one of these:
   "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
   -> Module type to use for the module

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

Thanks to the suggestion given to me by @jsejcksn I succeeded in my intent.
I will add the solution for anyone who needs it:

1. Install dependencies

$ yarn add react-app-rewired raw-loader

2. Create config ovverride

config-overrides.js:

module.exports = function override(config, _env) {
    let rules = config.module.rules[1].oneOf
    rules.splice(rules.length - 1, 0, {
        test: /\.txt$/i,
        use: 'raw-loader',
    })

    return config
}

3. Include the txt into the component

// Page text
import PageText from 'content/page.txt'

const Component = () => {
    return (
        <div className="text">
            <div dangerouslySetInnerHTML={{ __html: PageText }} />
        </div>
    )
}

export default Component

(P.S. I bet there's a loader that converts the file to a ReactComponent like for SVG files, but I didn't go any further than that)