create-react-app Update Steps

[coryhouse]

The course was published using create-react-app 1.

Create-react-app 3 involves the following breaking changes that aren't yet reflected in the course:

NOTE: Checked boxes below signify patched, but need to be published and uploaded.

• create-react-app 3 only generates one webpack.config. It uses env vars for settings. Need to update videos to reflect
• In "Testing" module, in Demo: Unit Testing, install the react-test-renderer version that matches your React version. Check package.json to see the version of React you're using. For example, if you're running React 16.8.0, then npm install react-test-renderer@16.8.0.
• Eliminate the separate /utils file that we create in M9-10 (testing) since it ultimately isn't used and can't be published that way because /utils doesn't get published.
• In the "Publishing" module, in Demo: Production Component Library Build, make the following tweaks to the babel config:
  • This is patched at 2:22, but need to record this audio: "Note that I'm referencing the babel preset under the babel namespace. We're telling babel to transpile our modules to commonJS format, which is a common standard for npm packages. And we're tweaking the configuration of react-app. We're setting the absolute runtime to false on the react-app preset. Otherwise the react-app preset will try to reference the babel runtime locally. We're setting helpers to false too. You can set helpers to true to potentially reduce your bundle sizes, but you need to add @babel/runtime as a dependency of your component library if you do so."
  • Babel 7 moved their packages under the @babel namespace. So, check your package.json for the version of @babel/core installed by create-react-app, and install the corresponding versions of @babel/preset-env and @babel/cli. For example, if @babel/core 7.1.0 is installed, then run this: npm i @babel/preset-env@7.1.0 @babel/cli@7.1.0.
  • Reference @babel/env (instead of babel-env)
  • Update final exercise files to reflect being generated from cra 3

In summary, do this:

  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": "commonjs"
        }
      ],
      [
        "react-app",
        {
          "helpers": false,
          "absoluteRuntime": false
        }
      ]
    ]
  },

[martysh]

Hi Cory, thanks so much for this course, it's been quite helpful to me. to follow up on this, setting "modules":"false" is all it's needed to produce the es6 module build?

[coryhouse]

Thanks! Yes, I believe that's correct. You can also check out nwb as an example of an ES module build config.

[EdgarAGuevara]

Thanks.. A LOT!. Cory that issue was me crazy. For now, everything Good