ReactJS copy text file content into component on build

user_8277574 0
Viewed 373

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.
reactjs include text dom
2 Answers

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)

user_82775740

You can simply use "embedding" to display your static file within a React component.

Using <embed>:

const Tos = () => {
    return (
        <Container className="flex-grow-1 tos">
            <h2>Terms of Service</h2>
            <embed type="text/html" src={TosText} />
        </Container>
    )
}

Note that with this approach you can't use any markup in your imported text file -- it will not render as markup, but simply as text, that's why the title is outside the <embed> in the example above.

This should render something like:

rendering with

The content will be scrollable if it doesn't fit in the default <embed> box -- but you can control its size with styles or width and height attributes.

Using <iframe>:

Move your static document to the public folder of your app, and change the extension to .html, and then link to it simply:

const Tos = () => {
    return (
        <Container className="flex-grow-1 tos">
            <iframe title="Terms of Service" src="./tos-text.html" />
        </Container>
    )
}

And this should look like this:

rendering using

Again, this is just default look, you can change it with styling.

You can also use <embed> with the second approach (file in the public folder):

<embed type="text/html" src="./tos-text.html" />

You can see a live example on codesandbox.

user_95086350
Related