Update to Webpack 5

.circleci/config.yml

@@ -3,39 +3,29 @@ version: 2.1
 jobs:
     "server-test":
         docker:
-            - image: circleci/python:3.7.9-node-browsers
+            - image: circleci/python:3.9.2-buster-node-browsers
               environment:
                 PERCY_PARALLEL_TOTAL: -1
             - image: cypress/base:10
-
         steps:
             - checkout
             - run:
                 name: Inject Percy Environment variables
                 command: |
                   echo 'export PERCY_TOKEN="$PERCY_TOKEN_E2E"' >> $BASH_ENV
-
-            - restore_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
             - run:
                 name: Install npm packages
                 command: npm ci
-            - save_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
-                paths:
-                    - node_modules
-
             - run:
                 name: Install requirements
                 command: |
-                    sudo pip install --upgrade virtualenv
+                    pip install --upgrade virtualenv
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
                     git clone --depth 1 git@github.com:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev,testing] --quiet
                     cd dash-main/dash-renderer && npm ci && npm run build && pip install -e . && cd ./../..
-
             - run:
                 name: Build
                 command: |
@@ -45,7 +35,6 @@ jobs:
                     python setup.py sdist
                     cd dist
                     find . -name "*.gz" | xargs pip install --no-cache-dir --ignore-installed && cd ..
-
             - run:
                 name: Run tests
                 command: |
@@ -56,101 +45,57 @@ jobs:
                 command: npx percy finalize --all
                 when: always
 
-
     "standalone-test":
         docker:
-            - image: circleci/python:3.6.7-node-browsers
+            - image: circleci/python:3.9.2-buster-node-browsers
             - image: cypress/base:10
-
         steps:
             - checkout
-            - restore_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
             - run:
                 name: Install npm packages
                 command: npm ci
             - run:
                 name: Cypress Install
                 command: |
                     $(npm bin)/cypress install
-
-            - save_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
-                paths:
-                    - node_modules
-                    - /home/circleci/.cache/Cypress
-
             - run:
                 name: Run tests
                 command: |
-                    rm -rf node_modules/cypress
-                    npm i cypress@3.4.1
                     npm run test.standalone
 
-
     "unit-test":
         docker:
-            - image: circleci/python:3.7.5-node-browsers
-            - image: cypress/base:10
-
+            - image: circleci/python:3.9.2-buster-node-browsers
         steps:
             - checkout
-            - restore_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
             - run:
                 name: Install npm packages
                 command: npm ci
-            - run:
-                name: Cypress Install
-                command: |
-                    $(npm bin)/cypress install
-
-            - save_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
-                paths:
-                    - node_modules
-                    - /home/circleci/.cache/Cypress
-
             - run:
                 name: Install requirements
                 command: |
-                    sudo pip install --upgrade virtualenv
+                    pip install --upgrade virtualenv
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
                     pip install --progress-bar off -e git+https://github.com/plotly/dash.git@dev#egg=dash[dev,testing]
-
             - run:
                 name: Run tests
                 command: |
                     . venv/bin/activate
-                    npm run build
                     npm run test.unit
 
-
     "visual-test":
         docker:
-            - image: circleci/node:10-browsers
-
+            - image: circleci/node:14-browsers
         steps:
             - checkout
-
-            - restore_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}
-
             - run:
                 name: Install package.json
                 command: npm ci
-
-            - save_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}
-                paths:
-                    - node_modules
-
             - run:
                 name: Run build:js
                 command: npm run private::build:js
-
             - run:
                 name: Run visual tests
                 command: npm run test.visual
@@ -159,34 +104,21 @@ jobs:
 
     "node":
         docker:
-            - image: circleci/python:3.7.5-node
-
+            - image: circleci/python:3.9.2-node
         steps:
             - checkout
-
             - run:
                   name: Create virtual env
                   command: python -m venv || virtualenv venv
-
-            - restore_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}
-
             - run:
                 name: Install package.json
                 command: npm ci
-
-            - save_cache:
-                key: dep-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "package.json" }}
-                paths:
-                    - node_modules
-
             - run:
                 name: Install requirements
                 command: |
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
                     pip install --progress-bar off -e git+https://github.com/plotly/dash.git@dev#egg=dash[dev,testing]
-
             - run:
                 name: Run eslint
                 command: |

.config/webpack/base.js

@@ -25,7 +25,6 @@ module.exports = (options = {}) => {
         mode: mode,
         output: {
             path: path.resolve(__dirname, `./../../${dashLibraryName}`),
-            chunkFilename: '[name].js',
             filename: '[name].js',
             library: dashLibraryName,
             libraryTarget: 'window'
@@ -40,7 +39,10 @@ module.exports = (options = {}) => {
             rules: [
                 {
                     test: /demo[\\\/]index.html?$/,
-                    loader: 'file-loader?name=index.[ext]'
+                    loader: 'file-loader',
+                    options: {
+                        name: 'index.[ext]'
+                    }
                 },
                 {
                     test: /\.csv$/,
@@ -108,7 +110,7 @@ module.exports = (options = {}) => {
         optimization: {
             splitChunks: {
                 chunks: 'async',
-                name: true,
+                name: '[name].js',
                 cacheGroups: {
                     async: {
                         chunks: 'async',

.flake8

@@ -1,5 +1,5 @@
 [flake8]
-ignore = C901, E203, E266, E501, E731, W503
+ignore = C901, E203, E231, E266, E501, E731, W503
 select = B,C,E,F,W,T4
 per-file-ignores =
     tests/*: E722, F811

.storybook/main.js

@@ -12,13 +12,17 @@ const baseConfig = require('./../.config/webpack/base.js')({
 });
 
 module.exports = {
+    core: { builder: 'webpack5' },
     stories: ['./../tests/visual/percy-storybook/**/*.percy.tsx'],
     webpackFinal: async (config, { configType }) => {
         // jerry rig everything
         config.resolve.alias.core = path.resolve(__dirname, './../src/core'),
         config.resolve.alias['dash-table'] = path.resolve(__dirname, './../src/dash-table')
 
         config.module = baseConfig.module;
+        config.stats = {
+            warnings: true
+        };
 
         return config;
     }

karma.conf.js

@@ -0,0 +1,23 @@
+module.exports = config => {
+    config.set({
+        frameworks: ['mocha', 'webpack'],
+
+        plugins: [
+            'karma-webpack',
+            'karma-mocha',
+            'karma-chrome-launcher'
+        ],
+        preprocessors: {
+            // add webpack as preprocessor
+            'tests/js-unit/**/*.ts': ['webpack']
+        },
+        files: [
+            'node_modules/babel-polyfill/dist/polyfill.js',
+            'node_modules/regenerator-runtime/runtime.js',
+            'tests/js-unit/**/*.ts' // *.tsx for React Jsx
+        ],
+        reporters: ["progress"],
+        browsers: ["Chrome"],
+        webpack: require('./webpack.test.config')
+    });
+}