Fix json-inclusion and linked-modules features by adding a custom json-loader rule

Author: sebinsua

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

@@ -569,6 +569,9 @@ module.exports = function(webpackEnv) {
                 name: 'static/media/[name].[hash:8].[ext]',
               },
             },
+            // Webpack 5 Change: For some reason the default json-loader wasn't being used.
+            // This might be due to the type property I had to add to the first `parser.requireEnsure` rule?
+            { test: /\.json$/, loader: require.resolve('json-loader') },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
           ],

packages/react-scripts/fixtures/kitchensink/template/src/App.js

@@ -156,16 +156,16 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
-      // case 'json-inclusion':
-      //   import('./features/webpack/JsonInclusion').then(f =>
-      //     this.setFeature(f.default)
-      //   );
-      //   break;
-      // case 'linked-modules':
-      //   import('./features/webpack/LinkedModules').then(f =>
-      //     this.setFeature(f.default)
-      //   );
-      //   break;
+      case 'json-inclusion':
+        import('./features/webpack/JsonInclusion').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
+      case 'linked-modules':
+        import('./features/webpack/LinkedModules').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       case 'no-ext-inclusion':
         import('./features/webpack/NoExtInclusion').then(f =>
           this.setFeature(f.default)

packages/react-scripts/package.json

@@ -58,6 +58,7 @@
     "jest-environment-jsdom-fourteen": "1.0.1",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "json-loader": "0.5.7",
     "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "path-browserify": "1.0.1",