Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(#147) Update Node, Webpack, Misc security updates #155

Merged
merged 1 commit into from
Nov 26, 2024

Conversation

adriancofie
Copy link
Contributor

@adriancofie adriancofie commented Aug 20, 2024

Description

Updates node, webpack, and other packages to enable security changes. Upgrades dependencies to webpack 5 compatible versions.

Notable package upgrades

Package Old Version New Version
webpack ^4.42.1 ^5.90.3
axios ^0.21.4 ^1.6.7
cypress ^10.9.0 ^13.6.6
eslint ^7.20.0 ^8.0.1"
start-server-and-test ^1.11.7 2.0.0
webpack-manifest-plugin 2.2.0 3.0.0

Replaces deprecated (Since March 2020) babel-eslint with @babel/eslint-parser

		"@babel/eslint-parser": "^7.23.10"

Replace deprecated eslint-loader with eslint-webpack-plugin

		"eslint-webpack-plugin": "^4.0.1",

In addition, adds the following dev dependencies

		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
		"buffer": "^6.0.3",
		"https-browserify": "^1.0.0",
		"process": "^0.11.10",
		"url": "^0.11.3"

(#147) Upgrade to Node 18, Webpack 5, npm audit fixes

Description

Updates node, webpack, and other packages to enable security changes. Upgrades dependencies to webpack 5 compatible versions.

Notable package upgrades

Package Old Version New Version
webpack ^4.42.1 ^5.90.3
axios ^0.21.4 ^1.6.7
cypress ^10.9.0 ^13.6.6
eslint ^7.20.0 ^8.0.1"
start-server-and-test ^1.11.7 2.0.0
webpack-manifest-plugin 2.2.0 3.0.0

Replaces deprecated (Since March 2020) babel-eslint with @babel/eslint-parser

		"@babel/eslint-parser": "^7.23.10"

Replace deprecated eslint-loader with eslint-webpack-plugin

		"eslint-webpack-plugin": "^4.0.1",

In addition, adds the following dev dependencies

		"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
		"buffer": "^6.0.3",
		"https-browserify": "^1.0.0",
		"process": "^0.11.10",
		"url": "^0.11.3"

Updates node to 30

    nvm install 20
    nvm use 20

File(s): .nvmrc

  • Updates LTS to lts/iron

Extracts jest config to separate file

File(s): .package.json jest.config.js

  • Moves jest config from package.json

Updates Webpack to 5

Installl latest webpack,

	npm install webpack@latest --save-dev
  • Update and install dev dependencies
	npm install —save-dev eslint-webpack-plugin  @babel/eslint-parser  @babel/plugin-proposal-private-property-in-object
	html-webpack-plugin  buffer stream-http process https-browserify url

Updates webpack config to address CRA CommonJS import bug affecting axios/nock/jest combo

File(s): /config/paths.js webpack.config.js jest.config.js

	const axiosInstance = axios.create({
		timeout: 10000,
		adapter: 'http',
	});
  • Updates App.test.js to remove the following:
axios.defaults.adapter = require('axios/lib/adapters/http');

Updates webpack config for breaking changes from v4 -> v5

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

File(s): webpack.config.js babel.config.js .eslintrc.js

  • Updates syntax change for IgnorePlugin in webpack config

    • Webpack 5 does not polyfill Node.js core modules by default anymore so remove the following:
      node: {
        module: 'empty',
        dgram: 'empty',
        dns: 'mock',
        fs: 'empty',
        http2: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty',
      }
  • And add the following to the resolver
		fallback: {
			"http": require.resolve("stream-http"),
			"https": require.resolve('https-browserify'),
			"buffer": require.resolve('buffer'),
			"url": require.resolve("url"),
		},
		
  • And the following Buffer plugin
new webpack.ProvidePlugin({
			Buffer: ['buffer', 'Buffer'],
		})
  • Updates the import statement for the ManifestPlugin to the following:

js const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

  • Updates the webpack hashing function from the insecure md4 to xxhash64

    • Node uses OpenSSL for its hash functions and encryption on *nix systems. The latest version of OpenSSL disables MD4 by default—which will break any previously working program that uses MD4

    Resolves the following error:

	Error: error:0308010C:digital envelope routines::unsupported
	    at new Hash (node:internal/crypto/hash:67:19)
  • Adds absoluteRuntime key to babel.config.js

  • Replaces deprecated babe-eslint with @babel/eslint-parser

  • Replaces eslint-loader with eslint-webpack-plugin in webpack config

  • Updates loader syntax. Usage of loader notation 'style-loader!css-loader' is deprecated and replaced with
    [{loader: ‘style-loader’}, {loader: ‘css-loader’}]

Security Fixes

    npm audit fix --force

Linter fixes

	npm run lint:fix

Closes #147

Copy link

Viewing Information

Copy link

@sarinapadilla sarinapadilla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks and works correctly on react-app-dev!

Copy link
Member

@bryanpizzillo bryanpizzillo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small thing - a coverage output file got into this PR.

output.test.log Outdated
@@ -0,0 +1,181 @@

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file should be excluded or removed.

Updates node to 20, webpack to v8 and addresses security updates

```

nvm install 20
nvm use 20
```
* 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`
@adriancofie adriancofie force-pushed the ticket/147-node-20-webpack branch from 7466e80 to 3fae8d7 Compare November 21, 2024 19:55
@adriancofie
Copy link
Contributor Author

Whenever you get a moment the change is ready for review, @bryanpizzillo

@adriancofie adriancofie merged commit da223bb into develop Nov 26, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Upgrade to Node 20, Webpack 5, npm audit fixes
3 participants