Rebase with latest CRA version

Author: DorianGrey

config/polyfills.js

@@ -14,3 +14,9 @@ require("whatwg-fetch");
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require("object-assign");
+
+// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
+// We don't polyfill it in the browser--this is user's responsibility.
+if (process.env.NODE_ENV === "test") {
+  require("raf").polyfill(global);
+}

config/webpack/build-env.js

@@ -11,7 +11,6 @@ const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
 
 const paths = require("../paths");
 const loadingAnimation = require("../../src/generated/loading.scss.json");
-const webpackEnv = require("./build-env");
 
 /*
  Define various constants to be used in multiple different configs here.
@@ -190,25 +189,14 @@ const RULE_WEBFONTS = function() {
 // "file" loader makes sure those assets get served by WebpackDevServer.
 // When you `import` an asset, you get its (virtual) filename.
 // In production, they would get copied to the `build` folder.
+// This loader doesn't use a "test" so it will catch all modules
+// that fall through the other loaders.
 const RULE_COVER_NON_MATCHED = {
-  exclude: [
-    /\.html$/,
-    // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
-    // because you might change the hot reloading server from the custom one
-    // to Webpack's built-in webpack-dev-server/client?/, which would not
-    // get properly excluded by /\.(js|jsx)$/ because of the query string.
-    // Webpack 2 fixes this, but for now we include this hack.
-    // https://github.com/facebookincubator/create-react-app/issues/1713
-    /\.(js|jsx)(\?.*)?$/,
-    /\.(ts|tsx)(\?.*)?$/,
-    /\.s?css$/,
-    /\.json$/,
-    /\.bmp$/,
-    /\.gif$/,
-    /\.jpe?g$/,
-    /\.png$/,
-    /\.(ttf|eot|svg|woff|woff2)/
-  ],
+  // Exclude `js` files to keep "css" loader working as it injects
+  // it's runtime that would otherwise processed through "file" loader.
+  // Also exclude `html` and `json` extensions so they get processed
+  // by webpacks internal loaders.
+  exclude: [/\.js$/, /\.html$/, /\.json$/],
   loader: require.resolve("file-loader"),
   options: {
     name: "static/media/[name].[hash:8].[ext]"
@@ -245,6 +233,7 @@ const resolveOptions = {
 };
 
 const nodeOptions = {
+  dgram: "empty",
   fs: "empty",
   net: "empty",
   tls: "empty",
@@ -284,18 +273,19 @@ module.exports = function(isDev, env, extractTextPluginOptions) {
         // TODO: Disable require.ensure as it's not a standard language feature.
         // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
         // { parser: { requireEnsure: false } },
-        RULE_EXT_JS,
-        // ** ADDING/UPDATING LOADERS **
-        // The "file" loader handles all assets unless explicitly excluded.
-        // The `exclude` list *must* be updated with every change to loader extensions.
-        // When adding a new loader, you must add its `test`
-        // as a new entry in the `exclude` list in the "file" loader.
-
-        RULE_COVER_NON_MATCHED,
-        RULE_IMAGES,
-        RULE_EXT_TSX(isDev),
-        RULE_SCSS(isDev, extractTextPluginOptions),
-        RULE_WEBFONTS()
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            RULE_EXT_JS,
+            RULE_EXT_TSX(isDev),
+            RULE_IMAGES,
+            RULE_SCSS(isDev, extractTextPluginOptions),
+            RULE_WEBFONTS(),
+            RULE_COVER_NON_MATCHED
+          ]
+        }
         // ** STOP ** Are you adding a new loader?
         // Remember to add the new extension(s) to the "file" loader exclusion list.
       ]

config/webpack/config.common.js

@@ -66,7 +66,7 @@ module.exports = merge.smart(commonConfig(true, env, {}), {
     chunkFilename: "static/js/[name].chunk.js",
     // This is the URL that app is served from. We use "/" in development.
     publicPath: publicPath,
-    // Point sourcemap entries to original disk location
+    // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
       path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
   },

config/webpack/config.dev.js

@@ -11,21 +11,21 @@ const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const InlineChunkManifestHtmlWebpackPlugin = require("inline-chunk-manifest-html-webpack-plugin");
 const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 const merge = require("webpack-merge");
-const ClosureCompilerPlugin = require("webpack-closure-compiler");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
   .BundleAnalyzerPlugin;
 
 const commonConfig = require("./config.common");
 const paths = require("../paths");
 const getClientEnvironment = require("../env");
-const webpackEnv = require("./build-env");
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
 const publicPath = paths.servedPath;
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
 const shouldUseRelativeAssetPaths = publicPath === "./";
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
@@ -51,32 +51,6 @@ const extractTextPluginOptions = shouldUseRelativeAssetPaths
     { publicPath: Array(cssFilename.split("/").length).join("../") }
   : {};
 
-// Determine minifier. Note that without its 'ADVANCED' mode, the closure compiler does
-// necessarily generate smaller results. Although - in most cases - the results ARE smaller
-// than with UglifyJs, at least several KB. However, it also takes longer to build.
-const minifier = webpackEnv.useClosureCompiler
-  ? new ClosureCompilerPlugin({
-      compiler: {
-        language_in: "ECMASCRIPT5",
-        language_out: "ECMASCRIPT5"
-        // Note: compilation_level: 'ADVANCED' does not work (yet?).
-      },
-      concurrency: 3
-    })
-  : new UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        // This feature has been reported as buggy a few times, such as:
-        // https://github.com/mishoo/UglifyJS2/issues/1964
-        // We'll wait with enabling it by default until it is more solid.
-        reduce_vars: false
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: true
-    });
-
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
 // The development configuration is different and lives in a separate file.
@@ -87,7 +61,7 @@ module.exports = merge.smart(
     bail: true,
     // We generate sourcemaps in production. This is slow but gives good results.
     // You can exclude the *.map files from the build during deployment.
-    devtool: "source-map",
+    devtool: shouldUseSourceMap ? "source-map" : false,
     // In production, we only want to load the polyfills and the app code.
     entry: [require.resolve("../polyfills"), paths.appIndexJs],
     output: {
@@ -102,7 +76,9 @@ module.exports = merge.smart(
       publicPath: publicPath,
       // Point sourcemap entries to original disk location
       devtoolModuleFilenameTemplate: info =>
-        path.relative(paths.appSrc, info.absoluteResourcePath)
+        path
+          .relative(paths.appSrc, info.absoluteResourcePath)
+          .replace(/\\/g, "/")
     },
 
     plugins: [
@@ -130,10 +106,25 @@ module.exports = merge.smart(
 
       // EO
 
-      // Plugin to let the whole build fail on any error; i.e. do not tolerate these
+      // Plugin to let the whole build fail on any error; i.e. do not tolerate these/
       new NoEmitOnErrorsPlugin(),
       // Minify the code.
-      minifier,
+      new UglifyJsPlugin({
+        compress: {
+          warnings: false,
+          // This feature has been reported as buggy a few times, such as:
+          // https://github.com/mishoo/UglifyJS2/issues/1964
+          // We'll wait with enabling it by default until it is more solid.
+          reduce_vars: false
+        },
+        output: {
+          comments: false,
+          // Turned on because emoji and regex is not minified properly using default
+          // https://github.com/facebookincubator/create-react-app/issues/2488
+          ascii_only: true
+        },
+        sourceMap: true
+      }),
       // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
       new ExtractTextPlugin({
         filename: cssFilename

config/webpack/config.prod.js

@@ -3,6 +3,7 @@
 const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
 const noopServiceWorkerMiddleware = require("react-dev-utils/noopServiceWorkerMiddleware");
 
+const path = require("path");
 const config = require("./config.dev");
 const paths = require("../paths");
 
@@ -65,8 +66,15 @@ module.exports = function(proxy, allowedHost) {
     quiet: true,
     // Reportedly, this avoids CPU overload on some systems.
     // https://github.com/facebookincubator/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebookincubator/create-react-app/issues/1065
     watchOptions: {
-      ignored: /node_modules/
+      ignored: new RegExp(
+        `^(?!${path
+          .normalize(paths.appSrc + "/")
+          .replace(/[\\]+/g, "\\\\")}).+[\\\\/]node_modules[\\\\/]`,
+        "g"
+      )
     },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === "https",

config/webpack/dev-server.config.js

@@ -30,7 +30,7 @@ module.exports = {
   "transform": {
     "^.+\\.s?css$": "<rootDir>/config/jest/cssTransform.js",
     "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
-    "^(?!.*\\.(css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
   },
   "transformIgnorePatterns": [
     "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$"

jest.config.js

@@ -62,6 +62,7 @@
     "postcss-loader": "^2.0.7",
     "prettier": "^1.8.2",
     "promise": "^8.0.1",
+    "raf": "^3.4.0",
     "react-dev-utils": "^4.2.1",
     "react-error-overlay": "^3.0.0",
     "react-hot-loader": "3.1.2",
@@ -87,7 +88,6 @@
     "webpack": "^3.8.1",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-chunk-hash": "^0.5.0",
-    "webpack-closure-compiler": "^2.1.5",
     "webpack-dev-server": "^2.9.4",
     "webpack-manifest-plugin": "^1.3.2",
     "webpack-merge": "^4.1.1",
@@ -106,8 +106,6 @@
     "format": "prettier --write \"{src,scripts,config}/**/*.{js,ts,tsx}\"",
     "precommit": "lint-staged",
     "prepush": "npm run test:ci",
-    "-----need to translate these scripts!-----": "echo 0",
-    "clear": "rimraf .awcache .tmp .dist src/generated",
     "translations": "node scripts/translations/compile-translations.js \"src/**/*.i18n.yml\" src/generated/translations.ts"
   },
   "lint-staged": {
@@ -117,8 +115,8 @@
     ]
   },
   "engines": {
-    "node": ">=6.9",
-    "npm": ">=3.10",
-    "yarn": ">=0.20.0"
+    "node": ">=8.9",
+    "npm": ">=5.10",
+    "yarn": ">=1.0.0"
   }
 }

package.json

@@ -4,8 +4,8 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ],
   "start_url": "./index.html",

public/manifest.json

@@ -94,7 +94,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
     },
     err => {
       console.log(chalk.red("Failed to compile.\n"));
-      console.log((err.message || err) + "\n");
+      printBuildError(err);
       process.exit(1);
     }
   );
@@ -111,6 +111,12 @@ function build(previousFileSizes) {
       }
       const messages = formatWebpackMessages(stats.toJson({}, true));
       if (messages.errors.length) {
+        // TODO: Disabled for the moment, esp. because of TS errors.
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        // if (messages.errors.length > 1) {
+        //  messages.errors.length = 1;
+        //}
         return reject(new Error(messages.errors.join("\n\n")));
       }
       if (

scripts/build.js

@@ -1,14 +1,14 @@
 "use strict";
 
+process.env.NODE_ENV = "development";
+
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
 process.on("unhandledRejection", err => {
   throw err;
 });
 
-process.env.NODE_ENV = "development";
-
 // Ensure environment variables are read.
 require("../config/env");
 

scripts/start.js

@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222222;
+  height: 150px;
+  padding: 20px;
+  color: #FFFFFF;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

src/app/routes/TestRoute1.scss

@@ -1,3 +1,5 @@
+import "./TestRoute1.scss";
+
 import * as React from "react";
 import { FormattedMessage } from "react-intl";