Jest error parsing React jsx files “Support for the experimental syntax ‘jsx’ isn’t currently enabled”

I ran into this error adding new Jest tests to my React project:

SyntaxError: CellComponent.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:34):

and then this recommendation at the end:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

Doing an ‘npm i @babel/preset-react –save-dev’ gets us almost all the way there. Add a default babel.config.js with this config and you’re ready to go:

module.exports = {
    presets: [
      '@babel/preset-react',
      [ 
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
    ],
  };

I pieced this together from multiple places, answers on this question got me in the right direction.

Redux devtools stopped working: upgrading dexuv-devtools-extension

The Redux Devtools Chrome plugin stopped working for me, possibly after a Chrome update. I removed and re-installed the plugin and it still wasn’t working. It was opening up ok but not picking up any of my Redux actions or state changes.

Checking the docs, it seems there’s been a name change with how you integrate the devtools into you app too. Since I’m adding the thunk middleware I need to use the compose approach. Before updating and before this naming change, I was using this approach, described in a previous post here:

import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from '../reducers/reducer';

let store = createStore(rootReducer, compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
    )
);

New approach with updates react-devtools and the extension:

import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from '../reducers/reducer';

const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(thunk)
      // other store enhancers if any
    )
  );

React app running locally failing with opensslErrorStack ERR_OSSL_EVP_UNSUPPORTED

I just started getting this error starting up my React app locally with ‘npm run start’ :

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

I recently installed nvm on my Mac to avoid needing sudo for running a ‘npm i -g’, and also apparently picked up the latest stable node version and not lts.

Running ‘nvm ls’ to see what version I have and what’s available:

> nvm ls
->      v17.3.0
         system
default -> node (-> v17.3.0)

According to https://nodejs.org/en/download/current/ 17.3.0 is the latest current and not lts. Answers to this related question suggested switching back to lts to avoid this change.

Following the nvm docs :

nvm install -lts
nvm use --lts

Now I’ve back at version 16.13.1, and my React app with ‘npm run start’ now starts as expected.