Can't resolve object.assign/polyfill in Gatsby

[divyesh]

when i am updating 6 to 7 i am getting this error , i am using react gatbyjs
“@web3auth/base”: “^7.0.1”, “@web3auth/modal”: “^7.0.1”, “@web3auth/solana-wallet-connector-plugin”: “^7.0.1”,

Can’t resolve ‘object.assign/polyfill’ in ‘node_modules/assert/build’
@ ./node_modules/@web3auth/modal/node_modules/@web3auth/ethereum-provider/dist/ethereumProvider.esm.js 13:0-28 785:4-13 786:4-13 787:4-13 788:4-13 794:10-29 801:8-17 802:8-27
811:12-31 819:10-19 821:10-28 824:12-21 828:12-30 833:8-19
@ ./node_modules/@web3auth/modal/dist/modal.esm.js 107:14-51
@ ./src/context/index.js 8:0-43 37:21-29
@ ./src/pages/spectate.js?export=default 14:0-48 52:38-50
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 14:45-162
@ ./.cache/app.js 14:0-52 28:87-32:1 31:29-42 34:29-42 28:0-32:2

GIthub issue : Can't resolve object.assign/polyfill · Issue #1604 · Web3Auth/web3auth-web · GitHub

[vjgee]

@divyesh Thanks for reaching out.

Your issue has been forwarded to our Dev team and we will get back with further updates.

[maharshi]

Hey @divyesh,

It seems like you’re encountering a dependency issue related to the object.assign/polyfill while updating your project. This is a common problem when dependencies are not aligned properly. To resolve this, you can add a specific package to your development dependencies.

Firstly, run the following command in your terminal to install the object.assign package as a development dependency:

npm i -D object.assign

After installing the package, you need to update your gatsby-node.js file to ensure that webpack correctly resolves the object.assign/polyfill. Add the line "object.assign/polyfill": require.resolve("object-assign"), to the resolve block in your webpack configuration.

Here’s how your updated gatsby-node.js should look:

exports.onCreateWebpackConfig = ({ actions, plugins }) => {
    const webpack = require('webpack');
    actions.setWebpackConfig({
        resolve: {
            fallback: {
                crypto: require.resolve("crypto-browserify"),
                stream: require.resolve("stream-browserify"),
                assert: require.resolve("assert"),
                http: require.resolve("stream-http"),
                https: require.resolve("https-browserify"),
                os: require.resolve("os-browserify"),
                url: require.resolve("url"),
                zlib: require.resolve("browserify-zlib"),
                "object.assign/polyfill": require.resolve("object-assign"), // Added line
            },
        },
        plugins: [
            plugins.provide({ process: 'process/browser' }),
            new webpack.ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
            })
        ],
    })
}

This configuration should address the issue you’re facing by ensuring that all necessary polyfills are correctly resolved. If you encounter further issues, please don’t hesitate to reach out!

[divyesh]

@maharshi

 "object.assign/polyfill": require.resolve("object-assign"), // Added line
            },

Thanks for help , now we getting this error after project run

helpers.js:123 Uncaught TypeError: Cannot convert undefined or null to object

[shahbaz]

Hey @divyesh

Please use this as your gatsby-node.js file:

exports.onCreateWebpackConfig = ({ actions, plugins, getConfig }) => {
    const webpack = require("webpack");
    const path = require("path");
    const config = getConfig();
    if (config.externals && config.externals[0]) {
        config.externals[0]["node:crypto"] = require.resolve("crypto-browserify");
    }
    actions.setWebpackConfig({
        ...config,
        resolve: {
            fallback: {
                crypto: false,
                stream: false,
                assert: require.resolve("assert/"),
                http: false,
                https: false,
                os: false,
                url: false,
                zlib: false,
                "object.assign/polyfill": path.resolve("./node_modules/object.assign/polyfill.js"),
            },
        },
        plugins: [
            plugins.provide({ process: "process/browser" }),
            new webpack.ProvidePlugin({
                Buffer: ["buffer", "Buffer"],
            }),
        ],
    });
};

[divyesh]

@shahbaz Yes, it’s fixed Thanks