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.

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.

Understanding website paywall approaches

Subscription paywalls are becoming more and more common on a number of news and other sites. Assuming that the sites are using JavaScript and/or CSS approaches in the page to popup floating DIVs obscuring the content of the page, these are surprisingly easy to bypass if you know what to look for.

There’s many other articles (e.g. here) discussing these approaches and this is not intended to be an exclusive list, but here’s a few useful observations:

  • Adding a trailing ‘.’ to the domain name works on a surprising number of sites (Google if you’re interested why this works)
  • If you’ve tried this and you’re still getting a popup obscuring content on the page, using your browser’s developer tools, use the ‘select element’ feature to click on a floating DIV in the page and then update the CSS to style=”display:none” is also effective. If there’s other script in the place which is adding the CSS to the DIV, right click the DIV and just select the delete element option also works
  • Some sites use a combination of approaches. Often script or CSS to disable scrolling the page underneath a floating DIV is also used, so if you’ve removed the DIV but now you can’t scroll the content, look at the style on the body. If there’s an “overflow:hidden” style, remove it, or change it to “overflow:auto”