topic Re: Jest encountered an unexpected token, SDK 4.32, React 18 in ArcGIS JavaScript Maps SDK Questions

Jest encountered an unexpected token, SDK 4.32, React 18

clu_yo — Thu, 05 Jun 2025 16:00:48 GMT

I have added @ArcGIS/maps-components-react 4.32.14 to our React 18.3.1 project. I am having issues running Jest tests on the new component.

Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block` to your configuration

This error is saying that @babel/plugin-transform-class-static-block is not enabled. But that package is included in '@babel/preset-env' (babel-plugin-transform-class-static-block )

I went ahead and tried to install it separately as a dev dependency anyway and add static block to the babel.config.js below:

module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react' ], plugins: [ '@babel/plugin-transform-class-static-block', '@babel/plugin-transform-class-properties' ] }

The project adds configurations through the script/cli options:

Re: Jest encountered an unexpected token, SDK 4.32, React 18

clu_yo — Thu, 05 Jun 2025 20:58:22 GMT

The babel.config.js file is doing nothing. Since the project is a CRA, the project will not read external config files. It is all managed by CRA.

CRA includes @babel/preset-env, which itself contains "@babel/plugin-transform-class-static-block": "^7.27.1". Not sure then how I am suppose to add class static blocks to a config file if it is supposed to already be included and I can't edit the config file of a CRA.

Re: Jest encountered an unexpected token, SDK 4.32, React 18

JamesIng — Mon, 16 Jun 2025 01:05:31 GMT

CRA is fairly old and is now marked as depreciated so you may want to consider using a different framework such as vite.

That said to get different babel configs working in CRA you'll likely need to 'eject' CRA which will allow you to manage all the config of your project. Note once you've ejected you can not go back.