npm build and run errors

justb4 commented 2 years ago

Thanks @ClintOxx for this awesome project! Hopefully we can all help here to maintain.

Getting various build and run errors due to outdated and deprecated package versions. Resolved locally, will submit PR. Context:

M-Dash version on master as on nov 29, 2021
Mac OSX
node v16.13.0, npm 8.1.0, @vue/cli 4.5.15, installed with Homebrew and nvm

First try with plain npm install

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: m-dashboard@2.0.0
npm ERR! Found: eslint@7.0.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"7.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.13
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"^4.5.13" 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.
npm ERR! 
npm ERR! See [MY_HOMEDIR]/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     [MY_HOMEDIR]/.npm/_logs/2021-11-28T15_41_43_606Z-debug.log

Next tried install with npm install --legacy-peer-deps to suppress dependency errors. Output:

$ npm install --legacy-peer-deps
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated eslint-loader@2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated vue-analytics@5.22.1: Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path [MY_HOMEDIR]/............./node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: [MY_HOMEDIR]/.nvm/versions/node/v16.13.0/bin/node [MY_HOMEDIR]/............./node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '[MY_HOMEDIR]/.nvm/versions/node/v16.13.0/bin/node',
npm ERR! gyp verb cli   '[MY_HOMEDIR]/............./node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | darwin | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 [MY_HOMEDIR]/.pyenv/shims/python2
npm ERR! gyp ERR! configure error 
.
.
npm ERR! gyp ERR! System Darwin 18.7.0
npm ERR! gyp ERR! command "[MY_HOMEDIR]/.nvm/versions/node/v16.13.0/bin/node" "[MY_HOMEDIR]/............./node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd [MY_HOMEDIR]/............./node_modules/node-sass
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     [MY_HOMEDIR]/.npm/_logs/2021-11-29T10_06_10_185Z-debug.log

Main error is gyp build. Even if I configure to use python 2.7 with pyenv, I keep getting gyp errors. Problem is that the library node-sass requires Python2 to build, but Python2 is also EOL. Replacing with "sass": "1.43.5" think, written in Dart, gets rid of this problem. Now could run npm install --legacy-peer-deps OK.

Trying to run: npm run dev --open got eslint errors, though non-fatal.

 WARNING  Compiled with 1 warning
Parsing error: require() of ES Module require-from-eslint.js not supported
https://stackoverflow.com/questions/69554485/eslint-error-must-use-import-to-load-es-module

Solution: replace "babel-eslint": "^10.1.0" with "@babel/eslint-parser": "^7.16.3".

Now almost there: "multiword" rule Vue Style issues:

.. /src/components/core/Footer.vue
  1:1  error  Component name "Footer" should always be multi-word  vue/multi-word-component-names

[MY_HOMEDIR]/......./src/components/error/Error.vue
  1:1  error  Component name "Error" should always be multi-word  vue/multi-word-component-names

[MY_HOMEDIR]/......../src/components/materialfy/Calendar.vue
  1:1  error  Component name "Calendar" should always be multi-word  vue/multi-word-component-names

# etc

Can be suppressed by listing single word exceptions in eslintrc.js See https://eslint.vuejs.org/rules/multi-word-component-names.html.

{
  "vue/multi-word-component-names": ["error", {
    "ignores": ['Footer', 'Error', etc]
  }]
}

Also upgraded many versions in package.json, final build result, still with npm install --legacy-peer-deps :

npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated vue-analytics@5.22.1: Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

No warnings on run, app runs in browser ok, at least with two runtime errors. These also found in official demo, so may need separate issues/PRs:

When logging in and then logout JS console shows repeating error:

Uncaught TypeError: Cannot read properties of undefined (reading 'updateSeries')
    at s.updateSeriesLine (ApexLineGraph.vue:92)
    at ApexLineGraph.vue:87
    at n (helpers.js:72)
updateSeriesLine @ ApexLineGraph.vue:92
(anonymous) @ ApexLineGraph.vue:87
n @ helpers.js:72

Errors from Sentry remote calls: Failed to load resource: net::ERR_BLOCKED_BY_CLIENT, but could be due to my browser (Brave).

As said will PR shortly.

justb4 commented 2 years ago

Wanted to get rid of using npm install --legacy-peer-dep. Finally completely re-scaffolded the project using global install of node v16.13.0, npm 8.1.0 and @vue/cli 4.5.15:

created a new project with vue create with custom options, selecting vuex and router
vue added vuetify
adding each dependency with npm install
same for devDependencies
increased versions
lots of tweaking needed to get rid of mainly eslinting errors due to version conflicts

https://github.com/justb4/M-Dash/commit/b4d1ec82d784a5c50ead8c3867048e2c48488b6d now has working version though some eslinting has been disabled. But a clean build without JS console errors (except for those mentioned earlier), using:

rm -rf node_modules package-lock.json 
npm cache clean --force
npm install
npm run serve

ClintOxx commented 2 years ago

Cool thanks man! I'll give it a look over when I have some free time but this is appreciated

Materialfy / M-Dash

npm build and run errors #80