search

amp-up-io / qti3-item-player

The qti3-item-player component ("QTI 3 Player") is a 100% JavaScript component that aims to encapsulate the best practices and behaviors of the IMS Global QTI 3 Assessment Item specification.
https://qti.amp-up.io/#about
MIT License
17 stars 3 forks source link

npm warnings and errors #1

Closed murata2makoto closed 1 year ago

murata2makoto commented 1 year ago

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 1 year ago

I will try to reproduce this tomorrow. I have not done a fresh, clean install of the component in many months, so perhaps I have introduced some kind of breaking change during 2022.

However, the typical sequence of events is:

  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

On Mon, Dec 26, 2022 at 4:44 AM MURATA Makoto @.***> wrote:

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: @@. npm ERR! Found: @. npm ERR! node_modules/eslint npm ERR! dev eslint@"^6.7.2" from the root project npm ERR! peer eslint@">= 4.12.1" from @. 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 @@. npm ERR! @./cli-plugin-eslint npm ERR! dev @vue/cli-plugin-eslint@"^5.0.8" from the root project npm ERR! npm ERR! Conflicting peer dependency: @. npm ERR! node_modules/eslint npm ERR! peer eslint@">=7.5.0" from @@. npm ERR! @./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.

@.*** 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. (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 @.***\cli-shared-utils\lib\module.js:86:14)

— Reply to this email directly, view it on GitHub https://github.com/amp-up-io/qti3-item-player/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAG3MLNSXI2OTYXGAFLNCI3WPFSGBANCNFSM6AAAAAATJQYOL4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

paulgrudnitski commented 1 year ago

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 1 year ago

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 1 year ago

"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 1 year ago

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 1 year ago

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 1 year ago

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

paulgrudnitski commented 1 year ago

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.