如何解决这个webpack 5与polyfills的问题？

wnavrhmk 于 2023-08-06 发布在 Webpack

关注(0)|答案(1)|浏览(201)

如果我只是将next js添加到样板Visual-Studio-2022 React JS应用程序中，我就会开始出错。具体来说，在向导中创建项目（并验证它运行）之后，如果我随后在终端中执行此操作

npm i next

字符串
然后将以下行添加到我的App.js

import Image from 'next/image';
import Link from 'next/link';

型
然后我开始得到这个错误

ERROR in ./node_modules/next/dist/compiled/micromatch/index.js 2858:18-33
Module not found: Error: Can't resolve 'path' in 'C:\Users\jmole\source\repos\Main\Mobile\MyConpany\Applications\MyCompany.Mini\ClientApp\node_modules\next\dist\compiled\micromatch'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

型
我的主要问题是我不知道在哪里 * 把 * 它建议的变化。它没有告诉你在哪里。
我读到this post，它说我应该编辑webpack.config.js，但我在我的node_modules子目录下找到了该文件的3个示例。我不能编辑的原因和那篇文章的作者不能编辑的原因一样：它将被再生。
然后，响应者建议使用patch-package来动态应用更改。我可以安装它，但即使在阅读了www.example.com之后readme.md，我仍然不明白我应该做什么，也不明白我应该修补哪个版本的webpack.config.js。
有人能给予我一些指导吗？
编辑添加：

在整个应用程序中，我能看到的唯一引用“path”模块的代码是Visual Studio自动添加到任何此类应用程序的几个脚本。它们被称为aspnetcore-https.js和aspnetcore-react.js。它们为应用程序和代理初始化HTTPS证书，并且工作正常，直到我开始通过npm i添加其他包。它们不import路径模块。他们require它。例如，这里是其中一个的一些样板代码。

// This script sets up HTTPS for the application using the ASP.NET Core HTTPS certificate
const fs = require('fs');
const spawn = require('child_process').spawn;
const path = require('path');

型

webpack

来源：https://stackoverflow.com/questions/76741328/how-do-i-address-this-webpack-5-issue-with-polyfills

1条答案

按热度按时间

pjngdqdw1#

警告：根据版本结果可能有所不同.

如果根目录下有webpack.config.js：

您不应该编辑node_modules目录中的webpack.config.js文件，因为当您更新依赖项时，这些更改将被覆盖。相反，您需要在项目根目录中找到webpack.config.js文件。你有三个选项可供选择。

**选项1：**为“path”模块添加Polyfill。

npm install path-browserify

字符串
webpack.config.js

module.exports = {
  // Your existing webpack config options...

  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
      // Add other polyfills for node.js core modules if needed...
    },
  },

  // Other webpack config options...
}

型

**选项2：**使用空模块作为后备。当你确信你的代码只会在支持“path”模块的环境中运行，或者你的应用程序并不真正依赖于“path”提供的功能，或者没有必要为它包括一个polyfill。

module.exports = {
  // Your other webpack configurations...

  resolve: {
    fallback: {
      "path": false
    }
  }
}

型

**选项3：**使用插件您可以通过node-polyfill-webpack-plugin添加对Node.js核心模块的支持

npm install node-polyfill-webpack-plugin

型
更新你的webpack.config.js

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

型

如果根目录下没有webpack.config.js：

如果由于某种原因（CRA、Next等）webpack.config.js不在项目的根目录中，请安装polyfill

npm install path-browserify

型
在使用“path”模块的文件/files中，在文件的开头添加以下import语句：

import "path-browserify" // Import the polyfill first
import path from 'path' // Then import the 'path' module

型

覆盖方法

警告：我还没有测试。
在创建React App（CRA）的情况下，您还可以使用package.json中的“overrides”字段来自定义webpack配置。

npm install path-browserify

型
package.json

//Look for the "overrides" field. If it doesn't exist, create it.
"overrides": {
  "webpack": {
    "resolve": {
      "fallback": {
        "path": require.resolve("path-browserify")
      }
    }
  }
}

型

补丁打包方式

安装“patch-package”作为开发依赖项

npm install patch-package --save-dev

型
确定导致问题的软件包，然后安装相关的polyfill。在这种情况下，问题似乎与“path”模块有关。由于错误建议使用“path-browserify”安装。

npm install path-browserify

型
打开导致错误的文件，并在文件的开头添加以下import语句：

import "path-browserify" // Import the polyfill first
import path from 'path' // Then import the 'path' module

型
一旦你做了修改，使用“patch-package”为修改后的包创建一个补丁。运行以下命令

npx patch-package package-name

型
将“package-name”替换为导致polyfill问题的软件包的名称。如果错误消息中的包名不清楚，您可以检查package.json文件以识别包。此命令将在项目中创建一个“patches”目录。在这个目录中，您会发现一个新的补丁文件，名称类似于“example-package+version.patch”。使用编辑器打开修补程序文件，以验证它是否包含所做的更改。
若要应用修补程序并对包进行更改，请运行以下命令

npx patch-package

型

关注Github问题

在这个link中有一个CRA github开放问题。在这里可以找到一些有趣的解决方案，可能对你有用。

赞(0）回复(0）举报 2023-08-06

我来回答