本文介绍了与webpack的ReactJS：未捕获引用错误：未定义请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的webpack.config.js。在浏览器开发工具中，获取"未定义未捕获的ReferenceError：Required"
如果我删除"Target"："node"，则会抛出错误"unauture TypeError：fs.readFileSync is Not a Function"。
var config = {
entry: './main.js',
output: {
filename: './index.js',
},
devServer: {
inline: true,
port: 8080
},
node: {
fs: "empty"
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
target: 'node'
}
module.exports = config;
推荐答案
您需要来自节点的本机模块，并尝试在浏览器中使用它。在这种情况下，您需要fs。
如果为浏览器编写代码，则无法使用节点fs.readFileSync，也不应使用target: 'node'
我可以使用以下main.js文件重新创建您的问题。
const fs = require('fs');
const test = function () {
console.log('this is a test');
var contents = fs.readFileSync('DATA', 'utf8');
}
test();
如果您尝试在浏览器中使用其他文件，则您可以：
生成时需要该文件
这将永久地将文件的数据与您的index.js文件一起发送，例如使用require。如果内容是一些配置并且不会因用户而改变，这是完全可以接受的，例如语言文件等。如果文件上的内容很大，这种方法可以增加您的资产文件并提高首次加载速度。
const data = require('some-data.json`)
console.log(data) // would output the JSON
AJAX内容
使用ajax/fetch可以在页面加载时调用文件的内容。如果此文件对每个访问者都是唯一的，则您需要执行此操作。
这篇关于与webpack的ReactJS：未捕获引用错误：未定义请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！