Metaplex 0.11.x does not work with CRA4

[BDANG]

Appears that metaplex 0.11.x is doing something weird where it's not compatible with CRA4. The error is not reproducible on CRA5

The app will start, but the none of the components render (entirely white page). In the console we have an error related to AWS / S3

Uncaught TypeError: Cannot read properties of undefined (reading 'readFile')
    at ./node_modules/@aws-sdk/shared-ini-file-loader/dist-es/getSSOTokenFromFile.js

This boils down to importing fs as an undefined object.

---

Reproduce:

1. Clone js-examples
2. Version bump / replace the old SDK to @metaplex-foundation/[email protected] for getting-started-react-cra4/
3. You may need to install http2 with npm install http2
4. Modify App.js to import the new package import { Metaplex } from "@metaplex-foundation/js";
5. npm start -- the components do not load and the console will report the error above

[lorisleiva]

Hi there 👋

Thanks for reporting this.

It must be a new AWS update which is annoyingly relying on the fs node library. I'll dig into it when I have some time. Ideally, I'd like to either extract this AWS plugin to its own package or at least try and minimise the AWS dependency in the main package.

[BDANG]

I was able to unblock myself by upgrading to webpack 5

---

Here's how I did it, in case other devs happen to be stuck

// implicitly upgrade to webpack 5 by upgrading react-scripts
npm install react-scripts@latest

// upgraded postcss to version 8 per console recommendation
npm install postcss@latest

// set polyfills in your config according to Metaplex
// https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-react-cra5

// -----------------------------------
NOTE: if you are using craco, the `postcss` key was replaced to `postcssOptions` i.e.
// in craco.config.js
  style: {
> postcssOptions: { <<<<<<<--- key got renamed from `postcss` to `postcssOptions`
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },

---

I was able to upgrade & get it working without having eject or use react-app-rewired

[lorisleiva]

Thanks for the update! I'll close this due to inactivity but feel free to open a new issue referencing the latest version if you need to.