Why am I seeing "TypeError: str.split is not a function" when I try to use keyStores from near-api-js and webpack 5?

Question

当我尝试在带有 Webpack 5 的项目中使用 near-api-js 中的 keyStores 时出现运行时错误。

里面index.js

const keyStore = new keyStores.BrowserLocalStorageKeyStore();

错误信息：

bundle.js:1549 Uncaught TypeError: str.split is not a function
    at toIdentifier (index.js:26:6)
    at forEachCode (index.js:267:16)
    at Array.forEach (<anonymous>)
    at populateConstructorExports (index.js:265:9)
    at eval (index.js:31:1)
    at Object../node_modules/http-errors/index.js (bundle.js:497:1)
    at __webpack_require__ (bundle.js:1546:33)
    at fn (bundle.js:1763:21)
    at eval (web.js:7:39)
    at Object../node_modules/near-api-js/lib/utils/web.js (bundle.js:965:1)

我怀疑错误出在 webpack 5 的某个地方，这是我的 webpack.config.js 文件

const path = require('path');
const webpack = require('webpack');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => {
  console.log('env', env);
  console.log('argv', argv);
  return {
    entry: {
      main: './src/index.js',
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          phaser: {
            test: /[\/]node_modules[\/]phaser[\/]/,
            name: 'phaser',
            chunks: 'all',
          },
        },
      },
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.json/,
          type: 'asset/resource',
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    devServer: {
      port: 9090,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src/index.html'),
      }),
      new NodePolyfillPlugin(),
      new webpack.DefinePlugin({
        'process.env': JSON.stringify({ mode: argv.mode }),
      }),
    ],
  };
};

我在这里创建了一个简约的例子https://stackblitz.com/edit/github-ytsewr-hnvwjf

Answer 1

经过多次尝试，我想我找到了解决办法。

我不得不补充 exclude: /node_modules/, 测试的规则中 /\.json/,:

module: {
  rules: [
  {
    test: /\.json/,
    type: 'asset/resource',
    exclude: /node_modules/, // <-- add this line
  },
  ],
},

Why am I seeing "TypeError: str.split is not a function" when I try to use keyStores from near-api-js and webpack 5?

Why am I seeing "TypeError: str.split is not a function" when I try to use keyStores from near-api-js and webpack 5?

webpack

nearprotocol