React app using create-react-app: webpack and CSS opacity 1% issue

This seems like such an obscure and weirdly random issue, but I’ve come across this issue 3 times now in the past few years.

I’m working on my React frontend app for Sudoku puzzles (which is related to many other past personal projects, which I’ve posted about here).

I have a nested set of grids representing the cells of the puzzle. To support ‘pencil marks’ when working on solving a puzzle, each cell has an overlaid 3×3 grid that displays the grid of current pencil marks. To display this I’m using an opacity of 40% to display them slightly greyed out. See the top left cell here with opacity:40%

Running locally this works as expected. When built and deployed and loaded from a remote server however, the logic for clicking and entering pencil marks works exactly the same, but nothing is displaying in the grid – here I’ve entered a pencil mark of 1 in row 2, col 1:

The HTML clearly shows a value of 1 but nothing is being displayed. If you look at the CSS on the right you’ll see opacity:1%, which is why the value is not visible, but that’s a difficult difference to find when comparing local vs deployed.

This is a known issue with create-react-app based React apps and a specific webpack plugin that optimizes CSS, discussed here.

Instead of using a % value for the opacity, change it to a decimal fraction of 1 instead, so instead of 40% use 0.4.

Free hosting for React apps: GitHub Pages and gh-pages

I work primarily with AWS and so my first choice for deployment of personal React projects is either a public S3 bucket with Static Website Hosting option enabled, or CloudFront with an S3 origin.

While costs for a site with low traffic will typically cost you < $1 a month with these options, there’s other options available that can be used for personal projects for free. Many of these are covered in this LogRocket article. If you’re already using GitHub, using GitHub Pages to host a React app is pretty easy with the gh-pages utility.

Assuming you have an exising React project, add gh-pages to your app:

npm i --save-dev gh-pages

Edit your package.json and add a couple of scripts:

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

When you run ‘npm run deploy’ predeploy will run first to build your prod app, and then upload it to the remote origin for your git project. Note – this util assumes your GitHub remote repo is called origin, and it will fail with this error if it is called something else:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

If you name your remote GitHub repo something else, just add it again with the name origin ‘git remote add origin remote-repo-url’

When gh-pages runs, it uploads the built React app from ./build to a new branch on your repo called gh-pages. If you check the settings for your project, you should see the GitHub Pages settings for your app is configured to use this branch as it’s source:

If it’s using another branch change it to use gh-pages. Hit the url shown in the settings above to load your app from GitHub Pages!

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.