webpack升级后，报错Buffer is not defined

最新推荐文章于 2024-02-24 14:30:53 发布
最新推荐文章于 2024-02-24 14:30:53 发布
阅读量557 收藏
点赞数
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46370075/article/details/133739519
版权

现象

在这里插入图片描述

原因

webpack从4升级到5之后，如果用到了Buffer 会报错 Buffer is not defined。 目前看是因为 webpack5 不再默认支持 Buffer，因此需要在配置里增加配置项

方案

webpack.project.js 文件里 的plugins里新增

plugins: [
	new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
	}),
]

新增后 浏览器就支持Buffer了

姝光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite出现global is not defined和Buffer is not defined的解决方法
任磊
12-08 8818
vite出现global is not defined和Buffer is not defined的解决方法
为Webpack5项目引入Buffer Polyfill
小陈的博客
02-24 853
最近在公司的一个项目中使用到了Webpack5， 然而在使用某个npm包的时候，出现了这个问题，原因很明显了，因为浏览器运行时没有Buffer这个API，所以需要为浏览器引入Buffer Polyfill.Webpack5不再自动为我们引入NodeJS Polyfill, 我们可以安装兼容浏览器环境的npm包，然后通过配置resolve.fallback以及providePlugin插件来手动引入；如果配置完成后，某些包还是有问题，可以尝试检查对应包中的package.json browser字段。
webpack5升级踩坑（process、Buffer is not defined）
张兴华的博客
03-30 1136
执行提示@types/node 版本和ts版本问题，https://www.npmjs.com/package/@types/node?activeTab=versions 可查看版本对应的ts版本。
vite搭建vue3的项目中，ReferenceError: Buffer is not defined
热门推荐
weixin_44679078的博客
12-20 2万+
问题： 下载文件，后端返回buffer，前端下载；浏览器报ReferenceError: Buffer is not defined 原因： 在页面中使用了Buffer，但是浏览器中JS没有Buffer对象，它是存在Node中。 解决： 将Buffer对象改用ArrayBuffer对象，ArrayBuffer对象是 ES6 才写入标准的。浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。 接口返回结果： 改写后的下载方法： func
vite 项目提示 Buffer is not defined 问题解决
最新发布
jiangjunyuan168的博客
02-24 2286
在 vite 搭建的 vue3 项目中使用 Buffer 对象报错 Buffer is not defined。1、首先安装...
vue中使用amqplib 会报出Uncaught ReferenceError: Buffer is not defined错误
weixin_35756892的博客
01-13 4591
这个错误是由于Vue项目中缺少Buffer对象导致的。amqplib库在运行时需要使用Buffer对象来处理二进制数据，而在Vue项目中，Buffer对象可能没有被正确引入。 解决方法有两种： 在main.js文件中引入Buffer对象，如：global.Buffer = global.Buffer || require('buffer').Buffer 2.在webpack.config...
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined
weixin_44164032的博客
09-29 1万+
Vue-CLI项目中引用mqtt.js 报错，Buffer is not defined 原因是因为没有在vue.config.js中配置ProvidePlugin // vue.config.js ... configureWebpack: { plugins: [ ... new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ] } Github .
vite打包后出现 buffer is undefined问题修复
qq_34486756的博客
09-21 997
【代码】vite打包后出现 buffer is undefined问题修复。
webpack DllPlugin xxx is not defined解决办法
10-15
当遇到"webpack DllPlugin xxx is not defined"这样的错误时，通常意味着在配置或使用过程中出现了问题。以下是对这个问题的详细分析和解决方法： 1. **context上下文不一致**： 在 `DllPlugin` 和 `...
解决vue项目报错webpackJsonp is not defined问题
01-19
但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。 可以手动改文件引用，但是推荐以下解决办法： 找到build→webpack.prod...
微信小程序 Buffer缓冲区的详解
01-03
微信小程序 Buffer缓冲区的详解 JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。 但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。 在 node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时，就有可能使用 Buffer 库。原始数据存储在 Buffer 类的实例中。一个 Bu
webpack4 配置 ssr 环境遇到“document is not defined”
01-21
ReferenceError: document is not defined 本次package.json使用版本信息： { vue-loader: ^15.4.2, mini-css-extract-plugin: ^0.4.3, webpack: ^4.20.2, webpack-cli: ^3.1.2 ... } 相关代码 问题原因： ...
vue3 Uncaught ReferenceError: Buffer is not defined
zyzhan
05-15 1903
【代码】vue3 Uncaught ReferenceError: Buffer is not defined。
Buffer is not undefined
weixin_44891495的博客
11-26 577
React Buffer is not undefined
【微信小程序】xxx is not defined
weixin_37629807的博客
03-07 1478
文章目录 所有地方 所有！ 用到data里数据的地方都使用 this.data.xxx这种方式 555 血与泪的教训啊
webpack打包流程_[前端进阶课] 构建自己的 webpack 知识体系
weixin_39765588的博客
11-26 150
webpack webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。Webpack 核心概念：Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。Output（出口）：指示 webpack 如何去输出、以及在哪里输出Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。W...
webpack一些理解
weixin_43990297的博客
06-17 169
webpack 它是一个静态模块打包器，当webpack处理应用程序的时候，它会递归的构建应用中的各个模块的依赖关系，形成一个依赖关系图，然后将所有模块打包成一个或多个bundle 它会根据主入口配置，从主入口出发，识别代码中所有的导入语句，递归的找出所有依赖，将入口和其依赖打包到一个单独的文件中 默认支持js、json文件， 支持COMMON esmodel AMD等模块类型 核心概念 chunk 代码块，一个chunk可能由多个模块组成，可以理解为主入口文件，其他依赖资源为module bundl
vue3+vite+ts开发，Buffer不存在问题
biaobiaogege的博客
06-02 3066
typescript，Buffer
compression-webpack-plugin 打包后报错require is not defined
05-20
这个错误可能是因为在打包压缩时，某些模块或文件中使用了 `require` 语句，但是浏览器环境并不支持 `require`。 要解决这个问题，你可以使用 `webpack` 的 `resolve.alias` 配置项将 `require` 替换为 `import`。例如： ```javascript const path = require('path'); module.exports = { // ... resolve: { alias: { // 将 require 替换为 import 'require': 'import', }, }, }; ``` 如果你使用的是 `webpack 4`，则可以使用 `webpack-require-from` 插件来解决这个问题。这个插件会将 `require` 替换为一个全局变量，使得 `require` 在浏览器环境中也可以正常使用。 ```javascript const WebpackRequireFrom = require('webpack-require-from'); module.exports = { // ... plugins: [ new WebpackRequireFrom({ // 指定全局变量名 variableName: 'globalRequire', }), ], }; ``` 你需要在 HTML 文件中手动引入 `require.js` 文件，并将 `globalRequire` 变量指向 `require` 函数。 ```html <script src="/path/to/require.js"></script> <script> window.globalRequire = require; </script> ``` 这样就可以在浏览器环境中使用 `require` 函数了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值