I get a runtime error when I try to use keyStores from near-api-js in a project with Webpack 5.

inside index.js

const keyStore = new keyStores.BrowserLocalStorageKeyStore();

Error message:

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)

I suspect the error is somewhere in webpack 5, and here is my webpack.config.js file

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 }),
      }),
    ],
  };
};

I have created a minimalistic example here https://stackblitz.com/edit/github-ytsewr-hnvwjf

CodePudding user response：

After many tries, I think I found the solution.

I had to add exclude: /node_modules/, in the rule that tests /\.json/,:

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