Upgrade to Webpack 5

Question

Upgrade to Webpack 5

skykasko opened this issue 3 years ago · 0 comments

survey123-webpack currently depends on webpack v4, which pulls in several outdated dependencies and introduces a high severity security vulnerability through a downstream dependency on an old version of glob-parent. Unfortunately, manually updating webpack to v5 breaks survey123-webpack.

As a temporary fix to the security vulnerability, an override can be added to the js-for-survey123/package.json file:

  "overrides": {
    "glob-parent": ">=5.1.2"
  }

However, this is not a long-term solution; webpack v4 depends on six different deprecated packages and will not receive future updates. If possible, it would be ideal to update this repository and/or Survey123 to work with webpack v5.

survey123-webpack's dependency on webpack-cli v3 also introduces a moderate severity security vulnerability, but webpack-cli can be manually updated to v4 without breaking anything.

Expand for more details

Running npm update followed by npm audit immediately after cloning the repository yields the following:

❯ npm update
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with
 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParam
s API instead.

added 420 packages, and audited 421 packages in 30s

11 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (7 moderate, 5 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

❯ npm audit
# npm audit report

ansi-regex  >2.1.1 <5.0.1
Severity: moderate
 Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw
fix available via `npm audit fix --force`
Will install webpack-cli@4.9.2, which is a breaking change
node_modules/ansi-regex
  strip-ansi  4.0.0 - 5.2.0
  Depends on vulnerable versions of ansi-regex
  node_modules/strip-ansi
    cliui  4.0.0 - 5.0.0
    Depends on vulnerable versions of strip-ansi
    Depends on vulnerable versions of wrap-ansi
    node_modules/cliui
      yargs  10.1.0 - 15.0.0
      Depends on vulnerable versions of cliui
      Depends on vulnerable versions of string-width
      node_modules/yargs
        webpack-cli  3.3.5 - 3.3.12
        Depends on vulnerable versions of yargs
        node_modules/webpack-cli
    string-width  2.1.0 - 4.1.0
    Depends on vulnerable versions of strip-ansi
    node_modules/string-width
      wrap-ansi  3.0.0 - 6.1.0
      Depends on vulnerable versions of string-width
      Depends on vulnerable versions of strip-ansi
      node_modules/wrap-ansi

glob-parent  <5.1.2
Severity: high
Regular expression denial of service - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack

12 vulnerabilities (7 moderate, 5 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

npm audit fix --force fixes the moderate severity vulnerability by forcing an update of webpack-cli, but does not fix the high severity vulnerability:

❯ npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating webpack-cli to 4.9.2,which is a SemVer major change.

added 34 packages, removed 39 packages, changed 10 packages, and audited 416 packages in 6s

19 packages are looking for funding
  run `npm fund` for details

# npm audit report

glob-parent  <5.1.2
Severity: high
Regular expression denial of service - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack

5 high severity vulnerabilities

Note that, at this point, running webpack with npm run-script build still works and produces a library that Survey123 can use.

The high severity vulnerability can be solved by forcing an update to webpack v5:

❯ npm install webpack@latest

added 19 packages, removed 305 packages, changed 27 packages, and audited 130 packages in 20s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Now webpack will fail to run because the path module is missing, due to the fact that webpack v5 no longer automatically polyfills Node.js core modules:

❯ npm run-script build

> webpack4survey123@1.0.0 build
> webpack

assets by status 92.3 KiB [cached] 1 asset
orphan modules 206 KiB [orphan] 96 modules
runtime modules 1.25 KiB 5 modules
cacheable modules 214 KiB
  modules by path ./src/survey123/ 13.9 KiB
    ./src/survey123/polyfills/console.js 2.12 KiB [built] [code generated]
    ./src/survey123/globals.js 411 bytes [built] [code generated]
    ./src/survey123/polyfills/dev.js + 1 modules 1.36 KiB [built] [code generated]
    ./src/survey123/polyfills/terminal.js 610 bytes [built] [code generated]
    ./src/survey123/polyfills/fetch.js + 1 modules 9.38 KiB [built] [code generated]
  ./src/index.js + 94 modules 200 KiB [built] [code generated]
  ./webpack.config.js 374 bytes [built] [code generated]

ERROR in ./webpack.config.js 1:13-28
Module not found: Error: Can't resolve 'path' in '[...]\survey123-webpack\js-for-survey123'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
[...]

webpack 5.70.0 compiled with 1 error in 3970 ms

As suggested in the output, this error can be fixed by running npm install path-browserify and adding the following to the module.exports section of js-for-survey123/webpack.config.js:

  resolve: {
    fallback: { path: require.resolve("path-browserify") },
  },

At this point npm run-script build will successfully run webpack and bundle the library. Unfortunately, any attempt to call one of the library's functions from Survey123 will fail with an error like:

@javascript error:TypeError: Cannot call method 'HelloWorld' of undefined in MyLibrary.js:MyLibrary.HelloWorld