ReactJS构建时导入txt文件内容到组件遇配置报错如何解决？

你遇到的Webpack配置报错，是因为当前项目使用的Webpack版本低于5.0：asset/source是Webpack5新增的资产模块类型，低版本Webpack不识别该配置项，因此启动时抛出类型校验错误。
而你最初直接导入txt文件得到的是资源路径，是因为默认配置下CRA会把txt类静态资源当做独立文件打包，导出的是资源的访问地址而非内容。

方案1：零配置适配（最推荐，无需修改构建配置） #

直接将txt文件转为JS/TS文件导出内容，完全不需要调整构建规则：

1. 把tos-text.txt重命名为tos-text.js，内容修改为如下格式：

export default `
<!-- 这里放你原来的所有HTML内容 -->
<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>
`

2. 组件内导入逻辑仅需修改导入路径即可，其余代码不变：

import { Container } from 'react-bootstrap'
// 改为导入js文件
import TosText from 'config/tos-text.js'

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

export default Tos

该方案构建时会直接把字符串内容打入JS包，无额外请求，也不需要调整任何构建依赖和配置。

方案2：保留txt文件格式，适配低版本Webpack #

如果必须保留txt文件格式，可以安装raw-loader来处理txt文件的导入：

1. 安装依赖：

npm install raw-loader --save-dev
# 或者yarn
yarn add raw-loader -D

2. 修改config-overrides.js配置：

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

3. 重启开发服务即可正常导入txt文件的文本内容。

方案3：升级到Webpack5环境 #

如果项目可以升级依赖，将create-react-app升级到5.x及以上版本，CRA5内置Webpack5，你原来写的asset/source配置就可以正常生效，不需要安装额外loader。

内容的提问来源于stack exchange，提问作者Giuseppe