Getting this error with the @metaplex-foundation/js-next SDK

Viewed 134

Currently working on a react app and I'm getting this error after installing metaplex. My react-scripts version is 4.0.3

./node_modules/@metaplex-foundation/js-next/dist/esm/programs/token/gpaBuilders/TokenGpaBuilder.mjs
Can't import the named export 'ACCOUNT_SIZE' from non EcmaScript module (only default export is available)
2 Answers

I found out the solution in the git of metaplex here. I will leave you here the whole answer anyway.

Getting Started with Metaplex and CRA 5 This example sets up a new React app with Metaplex using "Create React App" (CRA) version 5 — i.e. using Webpack 5.

This example has been generated using the following steps:

Create a new project using the "Create React App" command.

npx create-react-app getting-started-react-cra5
cd getting-started-react-cra5

Install the Metaplex and the Solana SDKs.

npm install @metaplex-foundation/js @solana/web3.js

Install some polyfills.

npm install assert util crypto-browserify stream-browserify

Install and use react-app-rewired.

# Installs react-app-rewired.
npm install react-app-rewired

# Replaces "react-scripts" with "react-app-rewired" in package.json scripts.
sed -i '' 's/react-scripts /react-app-rewired /g' package.json

Override Webpack 5 configurations.

Create a new file to override Webpack 5 configurations.

touch config-overrides.js

Copy the following code inside the new config-overrides.js file.

const webpack = require("webpack");

module.exports = function override(webpackConfig) {
  // Disable resolving ESM paths as fully specified.
  // See: https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
  webpackConfig.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });

  // Ignore source map warnings from node_modules.
  // See: https://github.com/facebook/create-react-app/pull/11752
  webpackConfig.ignoreWarnings = [/Failed to parse source map/];

  // Polyfill Buffer.
  webpackConfig.plugins.push(
    new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
  );

  // Polyfill other modules.
  webpackConfig.resolve.fallback = {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    util: require.resolve("util"),
    assert: require.resolve("assert"),
    fs: false,
    process: false,
    path: false,
    zlib: false,
  };

  return webpackConfig;
};

Update your browser requirements.

Update the browserslist object of your package.json to include the following production requirements.

"browserslist": {
  "production": [
-     ">0.2%",
-     "not dead",
-     "not op_mini all"
+     "chrome >= 67",
+     "edge >= 79",
+     "firefox >= 68",
+     "opera >= 54",
+     "safari >= 14"
  ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},

That's it!

You should not use @metaplex-foundation/js-next SDK, the actual repo is @metaplex-foundation/js, the name was changed and the updated repo is this, so try using @metaplex-foundation/js instead

Related