From 6569a7143dd35d75f2dc8cda1ca293b6fc71ae81 Mon Sep 17 00:00:00 2001
From: Ali Cherry <32630359+alichry@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:44:06 +0100
Subject: [PATCH 1/4] upgrade packages and align configs
---
.eslintrc.js | 33 +-
config/env.js | 5 +
config/webpack.config.dev.js | 102 +-
config/webpack.config.prod.js | 229 +-
config/webpackDevServer.config.js | 72 +-
package-lock.json | 28693 +++++++++++++++++-----------
package.json | 108 +-
scripts/start.js | 55 +-
src/core/lib/internal-commands.js | 2 +-
9 files changed, 18137 insertions(+), 11162 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 6c8c66a..a871a22 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,34 @@
-module.exports = Object.assign({}, require('@remy/eslint/cra'), {
-});
+// Note(alichry, 2025): Embedded the @remy/eslint/cra configuration here
+//module.exports = Object.assign({}, require('@remy/eslint/cra'), {
+//});
+
+module.exports = {
+ extends: [
+ "react-app"
+ ],
+ env: {
+ es6: true,
+ node: true,
+ },
+ parserOptions: {
+ sourceType: 'module',
+ ecmaVersion: 8,
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ plugins: ['react'],
+ rules: {
+ indent: ['error', 2, { SwitchCase: 1 }],
+ 'linebreak-style': ['error', 'unix'],
+ quotes: ['error', 'single', { allowTemplateLiterals: true }],
+ semi: ['error', 'always'],
+ 'react/jsx-uses-react': 'error',
+ 'react/jsx-uses-vars': 'error',
+ 'react/jsx-no-undef': 'error',
+ },
+};
+
// "extends": [
// "plugin:prettier/recommended"
diff --git a/config/env.js b/config/env.js
index 8b39b6c..0e5ee84 100644
--- a/config/env.js
+++ b/config/env.js
@@ -74,6 +74,11 @@ function getClientEnvironment(publicUrl) {
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
+
+ WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST, // Note(alichry, 2025): Needed for Webpack Hot Dev Client
+ WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT, // Note(alichry, 2025): Needed for Webpack Hot Dev Client
+ WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH, // Note(alichry, 2025): Needed for Webpack Hot Dev Client
+ FAST_REFRESH: process.env.FAST_REFRESH, // Note(alichry, 2025): Needed for Webpack Hot Dev Client
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index f8c3e27..981848b 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -6,11 +6,12 @@ const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+// const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
+const ESLintPlugin = require('eslint-webpack-plugin');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
@@ -26,6 +27,7 @@ const env = getClientEnvironment(publicUrl);
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
+ mode: 'development',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
@@ -72,6 +74,19 @@ module.exports = {
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
+ fallback: {
+ // Some libraries import Node modules but don't use them in the browser.
+ // Tell Webpack to provide empty mocks for them so importing them works.
+ // Note(alichry, 2025): Specify these libraries under resolve.fallback
+ // instead of under configuration.node
+ dgram: false,
+ fs: false,
+ net: false,
+ tls: false,
+ // url and path required for WebpackDevServer to work:
+ url: require.resolve("url/"),
+ path: require.resolve("path-browserify")
+ },
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
@@ -110,19 +125,6 @@ module.exports = {
// First, run the linter.
// It's important to do this before Babel processes the JS.
- {
- test: /\.(js|jsx)$/,
- enforce: 'pre',
- use: [
- {
- options: {
- formatter: eslintFormatter,
- },
- loader: require.resolve('eslint-loader'),
- },
- ],
- include: paths.appSrc,
- },
// ** ADDING/UPDATING LOADERS **
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
@@ -184,6 +186,10 @@ module.exports = {
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
+ // Note(alichry, 2025): URLs specified in jsconsole.css
+ // are not aligned with the project directory path but rather
+ // to the public/ directory. We disable it to enable compilation
+ url: false,
},
},
{
@@ -191,19 +197,28 @@ module.exports = {
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
+ // -
+ // Note(alichry, 2025), seems like it's fixed, see:
+ // https://github.com/facebook/create-react-app/pull/2430
+ // ident: 'postcss',
+ postcssOptions: {
+ plugins: [
+ [
+ // Note(alichry, 2025): It seems postcss-flexbugs-fixes
+ // is no longer necessary.
+ // require('postcss-flexbugs-fixes'),
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ],
+ flexbox: 'no-2009',
+ }),
],
- flexbox: 'no-2009',
- }),
- ],
+ ],
+ },
},
},
],
@@ -212,19 +227,26 @@ module.exports = {
// Remember to add the new extension(s) to the "file" loader exclusion list.
],
},
+ optimization: {
+ // Add module names to factory functions so they appear in browser profiler.
+ moduleIds: 'named'
+ },
plugins: [
+ new ESLintPlugin({
+ formatter: eslintFormatter,
+ extensions: ['js', 'jsx'],
+ configType: 'eslintrc'
+ }),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
//
// In development, this will be an empty string.
- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin((HtmlWebpackPlugin), env.raw),
// Generates an `index.html` file with the