Webpack Error using Client-only routes Filesystem API #32478
Replies: 9 comments
-
|
I have the probably same error. On Windows and MacOS. Have spent about 4 hours pinning it down so far 😢. In my case This error did not help me much, even after lots of googling. On MacOS it fails when running My project worked well until I updated all gatsby dependencies today. I tried reverting gatsby-cli from 3.10.0 to 3.5.0. Now on MacOS I am at a total loss as to how to get this project to build again. |
Beta Was this translation helpful? Give feedback.
-
|
I found the culprit in my case: md5-hex added import crypto from 'node:crypto';when updating from 3.0.1 to 4.0.0. See: https://github.com/sindresorhus/md5-hex/blob/199598328d4d11b938f86a9ba9b82dc0796c8331/index.js, listed in sindresorhus/md5-hex@v3.0.1...v4.0.0 Is this an issue in md5-hex or gatsby? |
Beta Was this translation helpful? Give feedback.
-
|
So it seems that webpack no longer polyfills for node.js beginning at version 5 (source: https://stackoverflow.com/a/67335037/712005). So I had to alter the webpack config to do it like this: exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
fallback: {
// md5-hex uses node:crypto
// webpack v5 does not polyfill for it any more
// so need to do that here
// see: https://github.com/gatsbyjs/gatsby/issues/32465#issuecomment-884255203
// and: https://stackoverflow.com/a/67335037/712005
crypto: require.resolve('crypto-browserify'),
},
},
})
}and add crypto-browserify ad dev dependency: Well, that's what I thought would solve the issue. But id does not 😢. |
Beta Was this translation helpful? Give feedback.
-
|
It seems to me that explicitly requiring from 'node:crypto' overrides any polyfills added for crypto. So that would be the problem. Thus the issue would be in md5-hex as it claims to be usable in the browser too ("Works in the browser too, when used with a bundler like Webpack, Rollup, Browserify."). Does that sound correct? |
Beta Was this translation helpful? Give feedback.
-
|
@pmarxbraun The reproduction you linked doesn't work for me. Can you make sure the link is correct? @barbalex I think your problem is unrelated to this and sindresorhus/md5-hex#17 seems the right place to ask :) |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts can you try this one https://github.com/pmarxbraun/youggy-test ? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
Since this is a project of yours and not a minimal reproduction I moved this to Discussions as the problem most probably lies in your code (my test project worked with client-only without problems). I guess you have some incorrect import/export somewhere or |
Beta Was this translation helpful? Give feedback.
-
|
Ok here's the fix ... |
Beta Was this translation helpful? Give feedback.
-
|
I am not sure if anyone still needs a fix, but this is how I did it: For some reason the exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
const config = getConfig()
if (config.externals && config.externals[0]) {
config.externals[0]["node:crypto"] = require.resolve('crypto-browserify')
}
actions.replaceWebpackConfig(config)
}This |
Beta Was this translation helpful? Give feedback.
-
Preliminary Checks
Description
Hi,
I'm using Filesystem API to create client-only routes with path
/pages/association/[id].jsRunning
gatsby developworks fineRunning
gatsby buildthrows me this errorCan't find any solution. Thanks for you help !
Reproduction Link
https://github.com/pmarxbraun/youggy-test
Steps to Reproduce
Create client only routes using Filesystem API
My template lives in this file
/pages/association/[id].jsExpected Result
Site built normally
Actual Result
Environment
System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn npm: 7.14.0 - ~/.nvm/versions/node/v14.15.0/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Safari: 14.1.2 npmPackages: gatsby: ^3.10.1 => 3.10.1 gatsby-cli: ^3.5.0 => 3.10.0 gatsby-image: ^3.1.0 => 3.5.0 gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.5.0 gatsby-plugin-google-analytics: ^3.1.0 => 3.5.0 gatsby-plugin-image: ^1.5.0 => 1.5.0 gatsby-plugin-manifest: ^3.1.0 => 3.5.0 gatsby-plugin-mdx: ^2.1.0 => 2.5.1 gatsby-plugin-offline: ^4.1.0 => 4.5.1 gatsby-plugin-react-helmet: ^4.1.0 => 4.5.0 gatsby-plugin-sharp: ^3.5.0 => 3.5.0 gatsby-plugin-sitemap: ^4.0.0 => 4.1.0 gatsby-source-filesystem: ^3.1.0 => 3.5.0 gatsby-transformer-sharp: ^3.5.0 => 3.5.0 npmGlobalPackages: gatsby-cli: 3.9.0Config Flags
No response
Beta Was this translation helpful? Give feedback.
All reactions