amp-up-io/qti3-item-player

npm warnings and errors

Closed this issue · 8 comments

murata2makoto commented

I tried to install qti3-item-player on my Windows 10 PC,
which has npm 8.19.2.

First, "npm audit" returns some error message.

N:\QTI\qti3-item-player-main\qti3-item-player-main>npm audit
# npm audit report

quill  <=1.3.7
Severity: moderate
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
No fix available
node_modules/quill

sweetalert2  >=11.4.9
sweetalert2 v11.4.9 and above contains hidden functionality - https://github.com/advisories/GHSA-qq6h-5g6j-q3cm
fix available via `npm audit fix`
node_modules/sweetalert2

2 vulnerabilities (1 low, 1 moderate)

Second, "npm install" returns this error message.

N:\QTI\qti3-item-player-main\qti3-item-player-main>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/cli-plugin-eslint@5.0.8
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^6.7.2" from the root project
npm ERR!   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm ERR!   node_modules/babel-eslint
npm ERR!     dev babel-eslint@"^10.1.0" from the root project
npm ERR!   2 more (eslint-plugin-vue, vue-eslint-parser)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">=7.5.0" from @vue/cli-plugin-eslint@5.0.8
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"^5.0.8" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint@8.30.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@">=7.5.0" from @vue/cli-plugin-eslint@5.0.8
npm ERR!   node_modules/@vue/cli-plugin-eslint
npm ERR!     dev @vue/cli-plugin-eslint@"^5.0.8" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Third, "npm run serve" reports errors.

> qti3-item-player@0.3.15 serve
> vue-cli-service serve

 ERROR  ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
         - options[0] misses the property 'patterns'. Should be:
           [non-empty string | object { from, to?, context?, globOptions?, filter?, transformAll?, toType?, force?, priority?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, transformAll?, toType?, force?, priority?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
    at validate (N:\QTI\qti3-item-player-main\qti3-item-player-main\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:105:11)
    at new CopyPlugin (N:\QTI\qti3-item-player-main\qti3-item-player-main\node_modules\copy-webpack-plugin\dist\index.js:34:31)
    at Object.<anonymous> (N:\QTI\qti3-item-player-main\qti3-item-player-main\vue.config.js:8:7)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at exports.loadModule (N:\QTI\qti3-item-player-main\qti3-item-player-main\node_modules\@vue\cli-shared-utils\lib\module.js:86:14)
paulgrudnitski commented
paulgrudnitski commented

I attempted a completely clean clone, install, run serve ... and it worked perfectly.

My npm version is 8.3.1. However, I don't think the npm version is the problem.

I think the source of the problem is this:

@vue/cli-plugin-eslint@5.0.8

I'm not sure I understand how @vue/cli-plugin-eslint@5.0.8 could be installed when QTI 3 Item Player has these devDependency's:

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },

For me, npm installs @vue/cli-plugin-eslint as version 4.5.19

{
  "name": "@vue/cli-plugin-eslint",
  **"version": "4.5.19",**
  "description": "eslint plugin for vue-cli",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue-cli.git",
    "directory": "packages/@vue/cli-plugin-eslint"
  },
  "keywords": [
    "vue",
    "cli",
    "eslint"
  ],
  "author": "Evan You",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/vuejs/vue-cli/issues"
  },
  "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint#readme",
  "publishConfig": {
    "access": "public"
  },
  "dependencies": {
    "@vue/cli-shared-utils": "^4.5.19",
    "eslint-loader": "^2.2.1",
    "globby": "^9.2.0",
    "inquirer": "^7.1.0",
    "webpack": "^4.0.0",
    "yorkie": "^2.0.0"
  },
  "peerDependencies": {
    "@vue/cli-service": "^3.0.0 || ^4.0.0-0",
    "eslint": ">= 1.6.0 < 7.0.0"
  },
  "gitHead": "bef7a67566585876d56fa0e41b364675467bba8f"
}

...which forces eslint to a version < 7.0.0

But your version of @vue/cli-plugin-eslint is @5.0.8 which has a peer eslint of >=7.5.0

Would you please copy your QTI 3 Item Player package.json? Something seems to be different (and breaking) in your devDependencies compared to what is committed to the qti3-item-player repo main branch.

murata2makoto commented

I think that I executed "npm audit fix" or even "npm audit fix --force" because the warning after "npm install" suggested them. Is this the reason?

In the original, you wrote:

    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",

But "npm audit fix" or "npm audit fix --force" write;

    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
paulgrudnitski commented

"npm audit fix --force" - as the warning from npm suggests - applies breaking changes to the package. So this could very easily have caused the major version to change from 4.x.x to 5.x.x.

"npm audit fix" will not apply breaking changes. I use this version (the one without the --force flag) from time-to-time without any harm.

Could you please delete your qti-item-player-main folder entirely, then follow the provided installation instructions which are:

  1. Clone the repo.

  2. Cd into the cloned folder where the package.json file resides.

  3. npm install

This will install all required packages

You should ignore all of those error messages about vulnerabilities.

  1. npm run serve
murata2makoto commented

Thanks for the detailed instructions. I did the four steps you wrote and got the following error.


 INFO  Starting development server...
10% building 2/5 modules 3 active ..._modules\eslint-loader\index.js??ref--14-0!N:\QTI\dmy\qti3-item-player\src\main.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:471:10)
    at N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:503:5
    at N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:358:12
    at N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (N:\QTI\dmy\qti3-item-player\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at N:\QTI\dmy\qti3-item-player\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:471:10)
    at N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:503:5
    at N:\QTI\dmy\qti3-item-player\node_modules\webpack\lib\NormalModule.js:358:12
    at N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (N:\QTI\dmy\qti3-item-player\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (N:\QTI\dmy\qti3-item-player\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at N:\QTI\dmy\qti3-item-player\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at N:\QTI\dmy\qti3-item-player\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
paulgrudnitski commented

I've never seen that before. But seems like there are some ideas for fixes:

https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

murata2makoto commented

I set NODE_OPTIONS=--openssl-legacy-provider and then "npm run serve" worked. Thanks!

paulgrudnitski commented

Excellent! Thank you for your patience and for attempting the --openssl-legacy-provider workaround.

For further clarification to others who may read this, the QTI 3 Item Player component has been developed and tested with Node 16 (16.14.0 to be precise).

If you use a Node v 17+ then you will likely encounter this ERR_OSSL_EVP_UNSUPPORTED issue because Node v 17+ bundles a version of webpack that changes the number of OpenSSL encryption bits compared to older versions of Node/webpack.

The longer-term fix, I suppose, is to rebuild the entire component with Vue 3 or as a React component. For at least Q1-Q2 of 2023, if you insist on running Node 17+ then the easy workaround --openssl-legacy-provider will have to suffice.