EsriPS / survey123-webpack

Use JavaScript to extend functions inside Survey123 Form Controls
Apache License 2.0
13 stars 2 forks source link

Upgrade to Webpack 5 #5

Open skykasko opened 2 years ago

skykasko commented 2 years ago

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: ```console ❯ 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: ```console ❯ 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: ```console ❯ 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][7]: ```console ❯ 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`][8]: ```javascript 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 ```
bilwanath commented 1 week ago

I noticed this issue. Without audit fix, it is working. If I do audit fix, Survey 123 is failing resolve objects in Form.