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