Unable to use fcl-js with gatsby

Steps to reproduce (create a stock gatsby app and add fcl dependencies):

• install gatsby globally npm install -g gatsby
• follow command line prompts, any choices from the prompt are fine
• cd to created project and run npm install
• create new gatsby project npm init gatsby
• add fcl dependencies npm install --save @onflow/fcl @onflow/types
• start server npm run develop
• there’s an error seen at http://localhost:8000/

Error seen in terminal:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/Users/aniket/projects/learning/gatsby-fcl/src/pages/index.js
  20:18  error  'pageStyles' is not defined  no-undef

✖ 2 problems (1 error, 1 warning)


failed Re-building development bundle - 1.320s
ERROR in ./node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js 4:11-26
Module not found: Error: Can't resolve 'http' in '/Users/aniket/projects/learning/gatsby-fcl/node_modules/@improbable-eng/grpc-web-node-http-transport/lib'

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }
 @ ./node_modules/@onflow/sdk/dist/sdk.module.js 1:864-945 1:11380-11381
 @ ./node_modules/@onflow/fcl/dist/fcl.module.js 1:0-30 1:30-254 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714
1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714 1:254-714
1:254-714 1:254-714 1:254-714 1:1314-1315 1:1768-1769 1:2019-2024 1:2255-2267 1:2535-2541 1:2543-2551 1:2563-2569 1:2620-2627 1:2644-2652 1:25335-25336 1:27174-27181 1:27267-27272 1:27344-27351 1:27620-27625 1:29365-29370 1:30130-30137
1:30922-30929 1:31165-31172 1:32825-32826 1:32828-32829 1:32840-32841 1:34719-34731 1:35015-35023 1:35087-35093 1:35095-35108 1:35120-35126 1:35163-35170 1:35180-35190 1:35215-35222 1:35244-35260 1:35300-35308 1:35515-35522 1:35550-35551
1:35652-35653 1:35727-35728 1:35729-35730 1:35891-35892 1:36183-36184 1:36328-36329 1:36388-36389 1:36391-36392 1:36430-36431 1:37246-37251 1:37391-37396 1:40092-40093
 @ ./src/pages/index.js 9:0-37 10:0-35 11:0-6 29:11-36
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 16:11-18:5
 @ ./.cache/app.js 16:0-52 29:87-33:1 32:29-42 35:27-40 29:0-33:2

[neelkamal0666]

Thanks @10thfloor. It worked for me. I added gatsby-node.js in the root directory of my project. Installed node-polyfill-webpack-plugin (npm install node-polyfill-webpack-plugin).

Then added this in gatsby-node.js `const NodePolyfillPlugin = require(“node-polyfill-webpack-plugin”)

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

There are other approach as well as mentioned in this article :https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error

[chasefleming]

Thanks for adding the link @10thfloor . It’s a top priority and in active development. @anikets you can track progress on this issue here: https://github.com/onflow/fcl-js/issues/982