Skip to content

Commit

Permalink
(#147) Update Node, Webpack, Misc security updates
Browse files Browse the repository at this point in the history 
Updates node to 18, webpack to v8 and addresses security updates

```

nvm install 18
nvm use 18
```
* Updates LTS in `.nvmrc`

`npm install webpack@latest --save-dev`
- Updates webpack config to address CRA CommonJS bug  affecting axios/nock/jest combo
   facebook/create-react-app#11889 (comment)

- Updater syntax change for IgnorePlugin in webpack config

- Misc webpack config changes following migration guide: https://webpack.js.org/migrate/5/

- Moves jest config out of package.json into own config

- Adds axios to transformIgnoreModules

`npm audit fix --force`

Eslint loader deprecated
  • Loading branch information
@adriancofie
adriancofie committed Mar 8, 2024
1 parent a982cb2 commit 2242731
Show file tree
Hide file tree
Showing 9 changed files with 18,776 additions and 47,978 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = {
version: 'detect',
},
},
parser: 'babel-eslint',
parser: '@babel/eslint-parser',
parserOptions: {
ecmaVersion: 2016,
sourceType: 'module',
Expand Down
2 changes: 1 addition & 1 deletion .nvmrc
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
lts/gallium
lts/hydrogen
1 change: 1 addition & 0 deletions config/paths.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const publicUrlOrPath = getPublicUrlOrPath(
const moduleFileExtensions = [
'web.mjs',
'mjs',
'cjs',
'web.js',
'js',
'web.ts',
Expand Down
177 changes: 103 additions & 74 deletions config/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const modules = require('./modules');
Expand All @@ -39,6 +40,11 @@ const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);

//TODO
const __webpack_base_uri__ = 'http://localhost:8081';



// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);

Expand All @@ -48,6 +54,24 @@ const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;






//
// const options = {
// extensions: [`js`, `jsx`],
// exclude: [
// `/node_modules/`,
// `/bower_components/`,
// VIRTUAL_MODULES_BASE_PATH,
// ],
// ...eslintOptions, // these are the options we'd previously passed in
// }



// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
Expand Down Expand Up @@ -87,22 +111,27 @@ module.exports = function (webpackEnv) {
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
ident: 'postcss',
plugins: [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
stage: 3,
}),
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
'postcss-normalize',
],
},
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
Expand All @@ -113,6 +142,7 @@ module.exports = function (webpackEnv) {
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
root: paths.appSrc,
},
},
{
Expand All @@ -127,6 +157,7 @@ module.exports = function (webpackEnv) {
};

return {
target: ['browserslist'],
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
Expand All @@ -137,38 +168,17 @@ module.exports = function (webpackEnv) {
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
paths.setupPolyfill,
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
entry: paths.appIndexJs,
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].js'
Expand All @@ -179,6 +189,7 @@ module.exports = function (webpackEnv) {
publicPath: paths.publicUrlOrPath,
library: 'nci-drug-dictionary-app',
libraryTarget: 'umd',
hashFunction: "sha256",
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? (info) =>
Expand All @@ -190,7 +201,7 @@ module.exports = function (webpackEnv) {
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
chunkLoadingGlobal: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
Expand Down Expand Up @@ -281,6 +292,13 @@ module.exports = function (webpackEnv) {
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),

fallback: {
"http": require.resolve("stream-http"),
"https": require.resolve('https-browserify'),
"buffer": require.resolve('buffer'),
"url": require.resolve("url"),
},
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
Expand Down Expand Up @@ -326,24 +344,32 @@ module.exports = function (webpackEnv) {
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },

// First, run the linter.
// It's important to do this before Babel processes the JS.

// Replace by eslint-webpack-plugin and options
// // First, run the linter.
// // It's important to do this before Babel processes the JS.
// {
// test: /\.(js|cjs|mjs|jsx|ts|tsx)$/,
// enforce: 'pre',
// use: [
// {
// options: {
// cache: true,
// formatter: require.resolve('react-dev-utils/eslintFormatter'),
// eslintPath: require.resolve('eslint'),
// resolvePluginsRelativeTo: __dirname,
// },
// loader: require.resolve('eslint-loader'),
// },
// ],
// include: paths.appSrc,
// exclude: paths.appExcludeFromBuild,
// },
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
exclude: paths.appExcludeFromBuild,
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
{
// "oneOf" will traverse all following loaders until one will
Expand All @@ -364,7 +390,7 @@ module.exports = function (webpackEnv) {
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
test: /\.(js|mjs|cjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
Expand Down Expand Up @@ -413,7 +439,7 @@ module.exports = function (webpackEnv) {
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
test: /\.(js|cjs|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
Expand All @@ -436,6 +462,7 @@ module.exports = function (webpackEnv) {
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},

},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
Expand Down Expand Up @@ -509,23 +536,30 @@ module.exports = function (webpackEnv) {
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[ext]',
},
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
type: 'asset/resource',
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
].filter(Boolean),
},
plugins: [
// new ESLintPlugin( {
// extensions: [`js`, `jsx`, `cjs`,`mjs`,`ts`,`tsx`],
// exclude: `/node_modules/`,
// cache: true,
// formatter: require.resolve('react-dev-utils/eslintFormatter'),
// eslintPath: require.resolve('eslint'),
// resolvePluginsRelativeTo: __dirname,
// ignore: true,
// useEslintrc: true,}),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
Expand Down Expand Up @@ -596,7 +630,7 @@ module.exports = function (webpackEnv) {
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
new WebpackManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
Expand All @@ -605,7 +639,7 @@ module.exports = function (webpackEnv) {
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
(fileName) => !fileName.endsWith('.map')
fileName => !fileName.endsWith('.map')
);

return {
Expand All @@ -619,7 +653,10 @@ module.exports = function (webpackEnv) {
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/, // Optional: contextRegExp is used to further restrict which contexts to ignore
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
isEnvProduction &&
Expand Down Expand Up @@ -663,19 +700,11 @@ module.exports = function (webpackEnv) {
],
silent: true,
}),
//Webpack 5 dropped polyfills
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
})
].filter(Boolean),
// 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.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
Expand Down
Loading

0 comments on commit 2242731

Please sign in to comment.