[REACTJS] Module not found: Error: Can't resolve 'process/browser'

[saurav2799]

EDIT: this issue affects 0.18.1 and 0.18.2. Upgrade to the latest version if you are encountering this issue

config:

"react": "^17.0.2",
"xlsx": "^0.18.2",
"react-scripts": "5.0.0",

with latest webpack version

the following shows up as the error with npm start. XLSX is imported into a react component via import XLSX from 'xlsx';
switched to xlsx: 0.17.4 and the error seems to go away.

Module not found: Error: Can't resolve 'process/browser' in '/Users/0xsaurav/code/wiseid/wiseid-snbx/node_modules/xlsx'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[SheetJSDev]

This seems to be a webpack 5 issue: https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed

Searching for that specific error message revealed microsoft/PowerBI-visuals-tools#365 (comment) , which recommends adding a ProvidePlugin.

Can you test and see if that resolves the issue? If so we can update the docs

[SheetJSDev]

To use the module in 0.18.1+ you will have to replace the import with

import * as XLSX from 'xlsx';

Using that, we can't reproduce in a fresh project:

$ npx create-react-app my-app
$ cd my-app
$ npm i --save xlsx
$ cat <<EOF >src/App.js 
import './App.css';
import * as XLSX from 'xlsx'

function App() { return ( <div className="App">{XLSX.version}</div> ); }

export default App;
EOF
$ npm start

You should see "0.18.2" (the version number embedded in the script)

The terminal output shows webpack 5.69.1 and the package list is:

$ npm ls
my-app@0.1.0 /private/tmp/my-app
├── @testing-library/jest-dom@5.16.2
├── @testing-library/react@12.1.3
├── @testing-library/user-event@13.5.0
├── cra-template@1.1.3
├── react-dom@17.0.2
├── react-scripts@5.0.0
├── react@17.0.2
├── web-vitals@2.1.4
└── xlsx@0.18.2

Any info to help reproduce the issue would be helpful, as it seems to affect other projects as well facebook/create-react-app#12072

[SheetJSDev]

Given the number of projects affected and issues reported to create-react-app, as seen in issues like facebook/create-react-app#11756, this is almost certainly something that needs to be resolved in create-react-app. A number of workarounds have been presented in that thread, from ejecting to @craco/craco. While waiting for a fix, please try one of the workarounds and report back with results.

[LauLogisch]

The following worked for me. At this to your webpack.mix.js .

mix.options({
legacyNodePolyfills: false
});

[mshuber1981]

I ran into this problem when trying to use this https://v4.mui.com/components/drawers/#swipeable

I used this as a workaround https://www.npmjs.com/package/process

[gvdhorst]

I ran into the same issue but only in combination with the following line in my Webpack configuration:
plugins: [new webpack.ProvidePlugin({ process: 'process/browser' })]

Removing this line from my Webpack configuration allowed me to import the xlsx module, but stopped me from importing the avsc module I also use.
So it's not a good solution for me, but it might explain why other people are seeing this error.

[SheetJSDev]

@gvdhorst Update to the latest version of the library. 0.18.3 fully removed references to process in the ESM build so it should just work in Webpack 5

[vebinua]

The following worked for me. At this to your webpack.mix.js .

mix.options({ legacyNodePolyfills: false });

Worked for me as well :)

[SheetJSDev]

0.18.3 removed process from the ESM build so it should "just work" without any node polyfill override.

What is webpack.mix.js? Can anyone share a sample project or way to reproduce the issue using the latest SheetJS version?

[TranNgocKhoa]

Seems it's still not resolved on CRA 5.0.1

[SheetJSDev]

The latest version works in CRA 5.0.1 . https://docs.sheetjs.com/docs/getting-started/installation/frameworks more details on upgrading

[TranNgocKhoa]

@SheetJSDev yes, I confirmed. Because it conflicts with my another fix for CRA 5.0.1. It works now

[rabira-hierpa]

Ran into the same issue on Mac M1 Pro (Ventura) and I was trying to integrate Kepler.gl into a react typescript project. Here is the version details for CRA, Webpack and React.

"react": "^18.0.0",
"react-scripts": "5.0.1",
"webpack": "5.74.0"

Followed the post by @SheetJSDev solved it by

yarn remove xlsx
yarn add https://cdn.sheetjs.com/xlsx-0.19.1/xlsx-0.19.1.tgz

more details on https://docs.sheetjs.com/docs/getting-started/installation/frameworks/

Thanks @SheetJSDev