Webpack打破盖茨比网站内置模块的变化
我尝试将我的Gatsby站点部署到Netlify,但每次尝试部署时,我都会收到各种节点模块的这些错误。我尝试制作了一个webpack.config.js文件,并将两个建议的解决方案都包含在内,但都无济于事。我还尝试使用别名而不是回退,将浏览器部分添加到将模块设置为FALSE的Package.json文件中,并像其他一些堆栈溢出答案所建议的那样在webpack.config.js文件中添加一个目标属性,但我仍然很困惑。我之前对webpack没有任何经验,一直在尽我所能寻找答案。我是否错过了Gatsby对此的某种特殊配置?
错误消息
10:37:20 AM: error Generating JavaScript bundles failed
10:37:20 AM: Can't resolve 'stream' in '/opt/build/repo/node_modules/cipher-base'
10:37:20 AM: If you're trying to use a package make sure that 'stream' is installed. If you're trying to use a local file make sure that the path is correct.
10:37:20 AM: BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
10:37:20 AM: This is no longer the case. Verify if you need this module and configure a polyfill for it.
10:37:20 AM: If you want to include a polyfill, you need to:
10:37:20 AM: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
10:37:20 AM: - install 'stream-browserify'
10:37:20 AM: If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
webpack.config.js
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
Package.json
{
"name": "gatsby-starter-default",
"private": true,
"description": "A simple starter to get up and developing quickly with Gatsby",
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"crypto-browserify": "^3.12.0",
"ethers": "^5.4.5",
"gatsby": "^3.11.1",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-image": "^1.11.0",
"gatsby-plugin-manifest": "^3.11.0",
"gatsby-plugin-offline": "^4.11.0",
"gatsby-plugin-react-helmet": "^4.11.0",
"gatsby-plugin-sharp": "^3.11.0",
"gatsby-source-filesystem": "^3.11.0",
"gatsby-transformer-sharp": "^3.11.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"web3": "^1.5.2"
},
"devDependencies": {
"prettier": "2.3.2"
},
"browser": {
"assert": false,
"crypto": false,
"http": false,
"https": false
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
解决方案
在Gatsby中,您不能像以前那样定义webpack配置,因为Gatsby会发送自己的webpack.config.js
,因为您可以读取Gatsby's glossary。
但是,Gatsby允许您通过公开gatsby-node.js
文件中的onCreateWebpackConfig
方法来添加custom webpack configuration。
所以:
module.exports = {
target: 'node14.17',
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
}
应变为:
exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
assert: require.resolve("assert/"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify/browser"),
stream: require.resolve("stream-browserify"),
},
},
})
}
如我所说,onCreateWebpackConfig
是仅在gatsby-node.js
文件中公开的方法,因此必须将代码段放在那里。
相关文章