feat: add support for create-react-app@4 (#249)

* fixed issues related to CRA 4

Just fixed issues when using with CRA 4, but there might be some breaking changes that need attention too.

* disabled fast-refresh

* updated dependencies

* deleted package.lock and used yarn to upgrade deps

* Revert "deleted package.lock and used yarn to upgrade deps"

This reverts commit 35ae92c.

* Revert "updated dependencies"

This reverts commit b0260f1.

* docs: update readme to reflect cra@4 support

Co-authored-by: Tomi Tavela <[email protected]>
Co-authored-by: Nargonath <[email protected]>

Author: 3 people

README.md

@@ -37,7 +37,7 @@ As of now (20/04/2018), `create-react-app` (more precisely `react-scripts`) does
 
 # Prerequisites
 
-Supports `react-scripts >= 1.0.x`, hence it supports the newest version `3.x.x`.
+Supports `react-scripts >= 1.0.x`, hence it supports the newest version `4.x.x`.
 
 Supports `node >= 10`.
 

scripts/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 process.env.NODE_ENV = 'development'; // eslint-disable-line no-process-env
+process.env.FAST_REFRESH = false;
 
 const importCwd = require('import-cwd');
 const fs = require('fs-extra');
@@ -52,7 +53,9 @@ const env = getClientEnvironment(process.env.PUBLIC_URL || ''); // eslint-disabl
 /**
  * We need to update the webpack dev config in order to remove the use of webpack devserver
  */
-config.entry = config.entry.filter(fileName => !fileName.match(/webpackHotDevClient/));
+if (major < 4) {
+  config.entry = config.entry.filter(fileName => !fileName.match(/webpackHotDevClient/));
+}
 config.plugins = config.plugins.filter(
   plugin => !(plugin instanceof webpack.HotModuleReplacementPlugin)
 );
@@ -87,7 +90,13 @@ if (disableChunks) {
 }
 
 // update media path destination
-if (major >= 2) {
+if (major >= 4) {
+  const oneOfIndex = 1
+  config.module.rules[oneOfIndex].oneOf[0].options.name = `media/[name].[hash:8].[ext]`;
+  config.module.rules[oneOfIndex].oneOf[1].options.name = `media/[name].[hash:8].[ext]`;
+  config.module.rules[oneOfIndex].oneOf[8].options.name = `media/[name].[hash:8].[ext]`;
+}
+else if (major >= 2) {
   // 2.0.0 => 2
   // 2.0.1 => 3
   // 2.0.2 => 3