Use Webpack 5 PnP support. Setup resolve.alias to support url in browser.

Author: sebinsua

packages/react-scripts/config/webpack.config.js

@@ -12,7 +12,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
+// const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
@@ -323,7 +323,10 @@ module.exports = function(webpackEnv) {
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
         // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
+        // Webpack 5 Change: PnP is supported by default in Webpack 5.
+        // See https://github.com/arcanis/pnp-webpack-plugin/issues/22#issuecomment-597495032
+        // PnpWebpackPlugin,
+
         // Prevents users from importing files from outside of src/ (or node_modules/).
         // This often causes confusion because we only process files within src/ with babel.
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@@ -332,13 +335,13 @@ module.exports = function(webpackEnv) {
         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
       ],
     },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
+    // resolveLoader: {
+    //   plugins: [
+    //     // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
+    //     // from the current package.
+    //     PnpWebpackPlugin.moduleLoader(module),
+    //   ],
+    // },
     module: {
       strictExportPresence: true,
       rules: [

packages/react-scripts/package.json

@@ -60,7 +60,6 @@
     "jest-watch-typeahead": "0.4.2",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.6.4",
     "path-browserify": "1.0.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

tasks/e2e-installs.sh

@@ -276,6 +276,7 @@ yarn start --smoke-test
 # ******************************************************************************
 # Test when PnP is enabled
 # ******************************************************************************
+
 cd "$temp_app_path"
 npx create-react-app test-app-pnp --use-pnp
 cd test-app-pnp