Using create-react-app with older browsers

I recently wanted to repurpose an old iPad Mini running iOS 9. I had some issues getting create-react-app to compile my ES 6 to whatever works on this iPad but I figured it out.

I create an app

create-react-app my-app

Add some ES 6 to the ./my-app/src/App.js file

let x = 42;

Try running it

> cd my-app
> npm run start

I now try connecting with my iPad and see an error with the Developer Tools.

SyntaxError: Unexpected use of reserved word 'let' in strict mode

I open the package.json file and find a block related to browser support.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

This means that we will support most recent browsers so I figured I should just add iOS 9 to both production and development, but get the same error.

I start googling and find people talking about doing npm run eject which basically leaves the confinement of create-react-app and I don't want to do that.

Finally I come across the manual which I have skimmed many times and spot something I have not seen before.

When editing the browerslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. An easy solution is to delete the node_modules/.cache folder and try again.

Worth a try.

> rm -rf ./node_modules/.cache

I relaunch npm run start and cross my fingers. And that's it. God damn it. I spent multiple hours on it and it was in the manual after all...

create-react-app is a cool way to get up and running quickly with React. It allows you to start in an ES 6 environment with modules, webpack, React and a lot of other tools you may need later. Definitely a time saver, but can also be a time sink if you don't read the manual carefully. Lesson learned.