Support VuePress (dev server)

[birkskyum]

Platform

Darwin 22.6.0 arm64 arm

Version

deno 1.40.1

Repro:

deno run -A npm:create-vuepress-site deno task dev

Expected

Run dev server

Actual

➜ deno task dev
Warning Currently only basic package.json `scripts` are supported. Programs like `rimraf` or `cross-env` will not work correctly. This will be fixed in an upcoming release.
Task dev vuepress dev src
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
warning An error was encountered in plugin "@vuepress/plugin-back-to-top"
warning An error was encountered in plugin "@vuepress/plugin-medium-zoom"
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
Error: listen UNKNOWN: unknown error 192.168.0.115:52759
    at __node_internal_captureLargerStackTrace (ext:deno_node/internal/errors.ts:91:9)
    at __node_internal_uvExceptionWithHostPort (ext:deno_node/internal/errors.ts:122:10)
    at Server._setupListenHandle [as _listen2] (node:net:1179:16)
    at _listenInCluster (node:net:1011:12)
    at doListen (node:net:1021:7)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:36:15)
    at runNextTicks (ext:deno_node/_next_tick.ts:71:3)
    at eventLoopTick (ext:core/01_core.js:189:21)

[bartlomieju]

Running on Deno v1.37 I get this:

Error: No open ports available
    at Server.onError (file:///Users/ib/dev/try_vuepress/docs/node_modules/.deno/portfinder@1.0.32/node_modules/portfinder/lib/portfinder.js:58:23)
    at Object.onceWrapper (ext:deno_node/_events.mjs:507:26)
    at Server.emit (ext:deno_node/_events.mjs:382:28)
    at _emitErrorNT (node:net:1102:10)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:33:15)
    at runNextTicks (ext:deno_node/_next_tick.ts:71:3)
    at eventLoopTick (ext:core/01_core.js:189:21)

Which suggests portfinder package is not working correctly in Deno.

[birkskyum]

@bartlomieju , with Deno 1.37.1? I still get the same response as I did few weeks ago.

[bartlomieju]

Yes, that's with Deno v1.37.1. I believe the error you are getting is coming from portfinder too.

[birkskyum]

Update for Deno 1.37.2, for dev and build tasks:

➜ deno task build
Task build vuepress build src
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
warning An error was encountered in plugin "@vuepress/plugin-back-to-top"
warning An error was encountered in plugin "@vuepress/plugin-medium-zoom"
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
Error: Cannot find module 'vue-template-compiler'

[birkskyum]

With deno 1.38.2, the last line Error: Cannot find module 'vue-template-compiler' is just now showing, so it's just:

➜ deno task dev           
Task dev vuepress dev src
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
warning An error was encountered in plugin "@vuepress/plugin-back-to-top"
warning An error was encountered in plugin "@vuepress/plugin-medium-zoom"
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

[birkskyum]

Deno 1.40.5 i get:

➜ deno task dev              
Task dev vuepress dev src
Unstable API 'Deno.FsFile.syncSync'. The `--unstable-fs` flag must be provided.

But I can't seem to figure out how to set the flag

update: it didn't work in the cli, but the deno.json here worked, and I get the same output as reported above:

{
  "unstable": ["fs"]
}

[birkskyum]

According to this:

.. these are related:

• https://github.com/denoland/deno/issues/21796
• https://github.com/denoland/deno/pull/22865

[birkskyum]

Tried getting latest canary (deno 1.43.0+8178f75), and running:

deno run -A npm:create-vuepress-site
npm i
DENO_FUTURE=1 deno task dev

I still see this: https://github.com/denoland/deno/issues/20618#issuecomment-1817543337

[birkskyum]

Deno 2 rc.2:

deno run -A npm:create-vuepress-site
deno i
deno task dev

I'll go to the localhost, see a white page and a console with this:

cjs.js?{"cacheDirectory":"node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/node_modules/.cache/vuepress","cacheIdentifier":"35d80d21-vue-loader-template"}!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/.deno/cache-loader@3.0.1/node_modules/cache-loader/dist/cjs.js?!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js?!./node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue?vue&type=template&id=3a922976:1 Uncaught Error: Module build failed (from ./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js):
TypeError: this.body.initialise is not a function
    at new Program (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/buble.js:16602:12)
    at Object.transform (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/buble.js:16847:9)
    at transpile (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/index.js:23:20)
    at actuallyCompile (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/@vue+component-compiler-utils@3.3.0/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:20)
    at Object.compileTemplate (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/@vue+component-compiler-utils@3.3.0/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:33:16)
    at module.exports (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js:71:29)
    at new Program (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/buble.js:16602:12)
    at Object.transform (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/buble.js:16847:9)
    at transpile (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-template-es2015-compiler@1.9.1/node_modules/vue-template-es2015-compiler/index.js:23:20)
    at actuallyCompile (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/@vue+component-compiler-utils@3.3.0/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:20)
    at Object.compileTemplate (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/@vue+component-compiler-utils@3.3.0/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:33:16)
    at module.exports (:8080/Users/admin/repos/deno-kitchensink/vuepress-434/docs/node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js:71:29)
    at eval (cjs.js?{"cacheDirectory":"node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/node_modules/.cache/vuepress","cacheIdentifier":"35d80d21-vue-loader-template"}!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/.deno/cache-loader@3.0.1/node_modules/cache-loader/dist/cjs.js?!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js?!./node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue?vue&type=template&id=3a922976:1:7)
    at ./node_modules/.deno/cache-loader@3.0.1/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/node_modules/.cache/vuepress","cacheIdentifier":"35d80d21-vue-loader-template"}!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/.deno/cache-loader@3.0.1/node_modules/cache-loader/dist/cjs.js?!./node_modules/.deno/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js?!./node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue?vue&type=template&id=3a922976 (app.js:1496:1)
    at __webpack_require__ (app.js:833:30)
    at fn (app.js:130:20)
    at eval (GlobalLayout.vue?vue&type=template&id=3a922976:2:548)
    at ./node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue?vue&type=template&id=3a922976 (app.js:1235:1)
    at __webpack_require__ (app.js:833:30)
    at fn (app.js:130:20)
    at eval (GlobalLayout.vue:2:105)
    at ./node_modules/.deno/@vuepress+core@1.9.10/node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue (app.js:1211:1)

[kt3k]

Looks like the issue comes from buble.js. It depends on __proto__ here and this.body can't inherit from BlockStatement because __proto__ is disabled by default in Deno.

If I add --unstable-unsafe-proto to the command, it seemed working:

deno run --unstable-unsafe-proto -A npm:vuepress dev src

[kt3k]

I don't think we should test vuepress with npm:create-vuepress-site. The package was last published 4 years ago and it installs very old version of vuepress. The repo is now archived: https://github.com/vuepress/create-vuepress-site

Instead we should test with npm:create-vuepress, which is maintained version of the above.

deno run -A npm:create-vuepress vuepress-starter
cd vuepress-starter
deno task docs:dev

The above command starts the dev server, but it shows the error page on the browser. It says:

[plugin:vite:css] Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.
/Users/kt3k/tmp/vuepress-site/vuepress-starter-2/node_modules/@vuepress/theme-default/lib/client/layouts/NotFound.vue

[birkskyum]

@kt3k , oh your right, I hadn't noticed this was the old create cli!

I'll close this issue, because the sass error is the same for all of npm/pnpm/deno, and things work as expected after merely adding it to the devDeps with deno i -D npm:sass