(Small) bugs in stackblitz.com example

pmorch commented 1 year ago

Hi,

The example on the front page points to https://stackblitz.com/edit/vue-rpa7f8?file=src%2FApp.vue.

This has a couple of bugs:

On lines 9 and 10 there are two open <div> tags. Only one of them is closed (on line 19)
There is an unused src/components/Draggable.vue file with (almost?) the same contents as App.vue.
If one attempts to download the example and run it locally:
- npm install shows many deprecated packages and 19 high-severity vulnerabilities (see below)
- npm run serve fails (see below)
- I guess this is because the Vue template for stackblitz.com is very bad/old (see newly created stackblitz#2504 bug), but it is still a problem for this example.

`npm install` output

$ npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/node-ipc@9.2.2',
npm WARN EBADENGINE   required: { node: '8 || 10 || 12 || 14 || 16 || 17' },
npm WARN EBADENGINE   current: { node: 'v18.13.0', npm: '9.2.0' }
npm WARN EBADENGINE }
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
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 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 source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
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 chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer 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.

added 1389 packages, and audited 1390 packages in 46s

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

30 vulnerabilities (1 low, 5 moderate, 19 high, 5 critical)

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 run serve` output

$ npm run serve

> sb-vue@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/5 modules 3 active ...ef--14-0!/home/pmorch/work/ost/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 (/home/pmorch/work/ost/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/pmorch/work/ost/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 (/home/pmorch/work/ost/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/pmorch/work/ost/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'
}

Node.js v18.13.0

Alfred-Skyblue commented 1 year ago

I don't know why you are using this wrong syntax, it must be getting a wrong result.

pmorch commented 1 year ago

Uhm... Which wrong syntax am I using?

Alfred-Skyblue commented 1 year ago

Missing div closing tag.

pmorch commented 1 year ago

Ok, I still don't understand. I didn't introduce the missing div closing tag. It is in the https://stackblitz.com/edit/vue-rpa7f8?file=src%2FApp.vue example linked to from https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/58e3520f5cbf464591eee21c5aea102c4fa83753/README.md?plain=1#L10

And the reason this isn't marked as a problem in the example is that the example is using old dependencies/toolchain (which is stackblitz#2504 bug)). If I use brand new dependencies, as I do in my updated version of the example the same markup would result in an error: [plugin:vite:vue] Element is missing end tag..

pmorch commented 1 year ago

And if you like, feel free to (fork and?) use my updated version of the example : https://stackblitz.com/edit/github-b2xatc-hi9and?file=src%2FApp.vue instead where all these issues are fixed.

Alfred-Skyblue commented 1 year ago

And if you like, feel free to (fork and?) use my updated version of the example : https://stackblitz.com/edit/github-b2xatc-hi9and?file=src%2FApp.vue instead where all these issues are fixed.

Ok, I forked it, I just misunderstood your description, thank you for your patience.

pmorch commented 1 year ago

I'm honored to have my username featured so prominently (and am fine with it), but you might want to change that by renaming your fork :-)

Alfred-Skyblue / vue-draggable-plus