Module not found: Error: Can't resolve 'buffer' in '.../node_modules/shpjs/lib'

[kboul]

I try to upgrade my react project to react-scripts 5.0.0 which uses shpjs but when I do so and try to open it using npm start I get the following along with other errors. I think there is a breaking change on webpack and now does not recognize polyfils and node native variables like process or buffer inside client code.

ERROR in ./node_modules/shpjs/lib/binaryajax-browser.js 7:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

Even after installing the package in the react project the errors insist because buffer is undefined inside the library on the client. Do you have any idea how to resolve this? I have tried many different approaches to resolve the issue. I have opened an issue on create-react-app official repo trying to find a solution describing what I have tried so far.

[SheetJSDev]

The use of async forces node 8+ . Buffer inherits from Uint8Array in the supported node versions, so all of the Buffer operations could be replaced with DataView ops (completely obviating the browser issue)

[sirmspencer]

Add this to your webpack file.

resolve: {
            fallback: {
                buffer: require.resolve("buffer/")
            }
        },
plugins: [
            new webpack.ProvidePlugin({
                Buffer: ["buffer", "Buffer"]
            })
}

[kboul]

Add this to your webpack file.

resolve: {
            fallback: {
                buffer: require.resolve("buffer/")
            }
        },
plugins: [
            new webpack.ProvidePlugin({
                Buffer: ["buffer", "Buffer"]
            })
}

I can't do that as I am using create-react-app and cannot afford to eject neither can I change the webpack file

[alexislopes]

Is there any solutions in a vite environment?

[nboisteault]

I'm building for the web with webpack. To avoid this error message and also this one I have added:

    resolve: {
        fallback: {
            buffer: false
        }
    },
    plugins: [
        new NodePolyfillPlugin()
    ]

[JakobMiksch]

Is there any solutions in a vite environment?

see here https://github.com/calvinmetcalf/shapefile-js/issues/200#issuecomment-1791068291