使用@metaplex foundation/js-next SDK获取此错误

Question

目前工作在一个反应应用程序，我得到这个错误后，安装元工。我的react脚本版本是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)

Answer 1

我在复式这里的git中找到了解决方案。无论如何，我都会把整个答案留在这里。

开始使用Metaplex和CRA 5 --这个例子使用“”(CRA)版本5--即使用Webpack 5--与Metaplex一起建立了一个新的React应用程序。

使用以下步骤生成了此示例：

使用"Create“命令创建一个新项目。

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

安装Metaplex和Solana SDK。

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

安装一些填充物。

npm install assert util crypto-browserify stream-browserify

安装和使用重新连线。

# 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

超越Webpack 5配置。

创建一个新文件来覆盖Webpack 5配置。

touch config-overrides.js

在新的config-overrides.js文件中复制以下代码。

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;
};

更新浏览器要求。

更新package.json的browserslist对象以包含以下生产需求。

"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"
  ]
},

就这样!

Answer 2

您不应该使用@metaplex-foundation/js-next SDK，实际的回购是@元建筑群-基金会/js，名称被更改，更新的回购是这，所以尝试使用@metaplex-foundation/js代替。