build(deps-dev): Bump webpack from 4.46.0 to 5.52.1 (#1544)

* build(deps-dev): Bump webpack from 4.46.0 to 5.52.1 Bumps [webpack](https://github.com/webpack/webpack) from 4.46.0 to 5.52.1. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v4.46.0...v5.52.1) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * Upgrade to Webpack 5, other necessary changes * Remove loaders that are no longer needed * Fix IE11 build * Use same browserslist as USWDS Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Suzanne Rozier <[email protected]>
trussworks · Sep 16, 2021 · 6991ef7 · 6991ef7
1 parent 3240188
commit 6991ef7
Show file tree

Hide file tree

Showing 7 changed files with 680 additions and 111 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,5 @@
+# Supported browsers
+> 2%
+last 2 versions
+IE 11
+not dead
diff --git a/.gitignore b/.gitignore
@@ -1,73 +1,95 @@
 # Logs
+
 logs
-*.log
-npm-debug.log*
+_.log
+npm-debug.log_
 yarn-debug.log*
 yarn-error.log*
 
 # Runtime data
+
 pids
-*.pid
-*.seed
-*.pid.lock
+_.pid
+_.seed
+\*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
+
 lib-cov
 
 # Coverage directory used by tools like istanbul
+
 coverage
 
 # nyc test coverage
+
 .nyc_output
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+
 .grunt
 
 # Bower dependency directory (https://bower.io/)
+
 bower_components
 
 # node-waf configuration
+
 .lock-wscript
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
+
 build/Release
 
 # Dependency directories
+
 node_modules/
 jspm_packages/
 
 # TypeScript v1 declaration files
+
 typings/
 
 # Build output
+
 lib/
+storybook-static/
 
 .awcache
 .DS_Store
 
 # Optional npm cache directory
+
 .npm
 
 # Optional eslint cache
+
 .eslintcache
 
 # Optional REPL history
+
 .node_repl_history
 
 # Output of 'npm pack'
-*.tgz
+
+\*.tgz
 
 # Yarn Integrity file
+
 .yarn-integrity
 
 # dotenv environment variables file
+
 .env
 
 # next.js build output
+
 .next
 
 # editor config
+
 .vscode
 
 # happo output directory
+
 .out
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,6 +1,8 @@
 const path = require('path')
 
 const webpackConfig = (config) => {
+  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/uswds')
+
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
@@ -38,6 +40,9 @@ const webpackConfig = (config) => {
 }
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   typescript: {

diff --git a/example/src/pages/Forms.tsx b/example/src/pages/Forms.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { Field, Formik } from 'formik'
 import * as Yup from 'yup'
 import {
@@ -13,14 +13,9 @@ import {
   ValidationItem,
   DatePicker,
   FileInput,
+  FileInputRef,
 } from '@trussworks/react-uswds'
 
-type FormValues = {
-  email?: string
-  password?: string
-  fruit?: string
-}
-
 const FormSchema = Yup.object().shape({
   email: Yup.string().email().required(),
   password: Yup.string().min(8).max(20).required(),
@@ -45,7 +40,7 @@ const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
 }))
 
 const FormsPage = (): React.ReactElement => {
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef = React.createRef<FileInputRef>()
 
   return (
     <>
@@ -190,7 +185,7 @@ const FormsPage = (): React.ReactElement => {
                   onDrop={(e: React.DragEvent): void => {
                     console.log('handle drop', e)
                   }}
-                  inputRef={fileInputRef}
+                  ref={fileInputRef}
                 />
               </FormGroup>
 

diff --git a/package.json b/package.json
@@ -69,6 +69,8 @@
     "@babel/core": "^7.10.5",
     "@babel/preset-react": "^7.10.4",
     "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/builder-webpack5": "^6.3.8",
+    "@storybook/manager-webpack5": "^6.3.8",
     "@storybook/react": "^6.2.9",
     "@storybook/storybook-deployer": "^2.8.6",
     "@testing-library/dom": "^8.2.0",
@@ -88,7 +90,7 @@
     "babel-jest": "^27.0.2",
     "babel-loader": "^8.0.6",
     "classnames": "^2.2.6",
-    "css-loader": "^5.0.0",
+    "css-loader": "^6.2.0",
     "danger": "^10.0.0",
     "dotenv": "^10.0.0",
     "eslint": "^7.29.0",
@@ -99,24 +101,23 @@
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-security": "^1.4.0",
-    "file-loader": "^6.0.0",
     "happo-plugin-storybook": "^2.7.0",
     "happo.io": "^6.0.0",
     "husky": "^4.3.8",
     "jest": "^26.1.0",
     "lint-staged": "^11.0.0",
-    "mini-css-extract-plugin": "^1.0.0",
+    "mini-css-extract-plugin": "^2.3.0",
     "prettier": "^2.0.2",
     "react": "^17.0.1",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "sass": "^1.26.0",
-    "sass-loader": "^10.0.2",
+    "sass-loader": "^12.1.0",
     "sass-resources-loader": "^2.0.1",
-    "source-map-loader": "^1.0.0",
+    "source-map-loader": "^3.0.0",
     "standard-version": "^9.0.0",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.2.1",
     "stylelint": "^13.3.0",
     "stylelint-config-css-modules": "^2.2.0",
     "stylelint-config-prettier": "^8.0.1",
@@ -126,16 +127,10 @@
     "stylelint-scss": "^3.17.1",
     "ts-jest": "^26.1.2",
     "typescript": "^4.2.4",
-    "url-loader": "^4.0.0",
     "uswds": "2.10.3",
-    "webpack": "^4.41.0",
+    "webpack": "^5.52.1",
     "webpack-cli": "^4.0.0"
   },
-  "resolutions": {
-    "bl": "^4.0.3",
-    "acorn-globals/acorn": "^6.4.1",
-    "webpack/acorn": "^6.4.1"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "tsc --noEmit && lint-staged",

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,6 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, 'lib'),
-    filename: '[name].js',
     library: 'ReactUSWDS',
     libraryTarget: 'umd',
     globalObject: 'this',
@@ -36,6 +35,9 @@ module.exports = {
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    alias: {
+      uswds: path.resolve(__dirname, './node_modules/uswds'),
+    },
   },
   module: {
     rules: [
@@ -65,7 +67,7 @@ module.exports = {
             loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: '[path][name]__[local]--[hash:base64:5]',
+                localIdentName: '[path][name]__[local]--[contenthash:base64:5]',
               },
             },
           },
@@ -85,13 +87,7 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 8192,
-            outputPath: 'assets',
-          },
-        },
+        type: 'asset',
       },
     ],
   },