Unexpected token after upgrade

[RustySol]

Describe the bug

Im trying to upgrade the following packages from

    "@solana/wallet-adapter-ant-design": "^0.7.0",
    "@solana/wallet-adapter-base": "^0.7.1",
    "@solana/wallet-adapter-react": "^0.13.1",
    "@solana/wallet-adapter-wallets": "^0.11.3",
    "@solana/web3.js": "^1.36.0",

to

    "@solana/wallet-adapter-ant-design": "^0.11.15",
    "@solana/wallet-adapter-base": "0.9.1",
    "@solana/wallet-adapter-react": "0.15.1",
    "@solana/wallet-adapter-wallets": "0.14.2",
    "@solana/web3.js": "^1.66.2",

Somehow I'm getting the following error

Failed to compile.

./node_modules/@solana/wallet-adapter-phantom/node_modules/@solana/wallet-adapter-base/lib/esm/signer.js 24:53
Module parse failed: Unexpected token (24:53)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           }
|
>           throw new WalletSendTransactionError(error?.message, error);
|         }
|       } else {

The thing that puzzled me is that when I check the file ./node_modules/@solana/wallet-adapter-phantom/node_modules/@solana/wallet-adapter-base/lib/esm/signer.js there isn't code like

throw new WalletSendTransactionError(error?.message, error);

but

throw new WalletSendTransactionError(error === null || error === void 0 ? void 0 : error.message, error);

I wonder if thats some issue to do with webpack. I'm currently using craco with CRA4. Below is my craco configs.

const CracoLessPlugin = require('craco-less');
const webpack = require('webpack');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#7522F5' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
      ],
    },
    configure: {
      module: {
        rules: [
          {
            type: 'javascript/auto',
            test: /\.mjs$/,
            include: /node_modules/,
          },
        ],
      },
    },
  },
};

Any idea is appreciated. Thanks!

[jordaaash]

Hmm, can you try updating to newer packages? Several of these are outdated, and you're pinning the versions, which shouldn't happen because you'll end up with different versions of things. Try these instead, with ^ --

    "@solana/wallet-adapter-ant-design": "^0.11.15",
    "@solana/wallet-adapter-base": "^0.9.18",
    "@solana/wallet-adapter-react": "^0.15.20",
    "@solana/wallet-adapter-wallets": "^0.19.5",

[steveluscher]

Check out the Craco config in https://github.com/exiled-apes/candy-machine-mint/pull/231/files. You need to handle a bunch of modern JavaScript syntax transforms:

const config = {
  babel: {
    plugins: [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-transform-shorthand-properties",
    ],
  },
};
export default config;

[RustySol]

Check out the Craco config in https://github.com/exiled-apes/candy-machine-mint/pull/231/files. You need to handle a bunch of modern JavaScript syntax transforms:

const config = {
  babel: {
    plugins: [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-transform-shorthand-properties",
    ],
  },
};
export default config;

this works well! Thanks so much