The Dev Server Won't Work for Vue

thegouge commented 3 years ago

Steps to Replicate the Error

I simply followed the directions from the docs with a brand new project

$ yarn create @vitejs/app my-vue-app --template vue
$ cd my-vue-app
// added "type": "module", to my package.json
$ yarn add vitedge vue@3 @vue/server-renderer@3 vue-router@4 @vueuse/head

I then added vitedgePlugin to vite.config.js

// vite.config.js
import vue from '@vitejs/plugin-vue'
import vitedgePlugin from 'vitedge/plugin.js'

export default {
  plugins: [vitedgePlugin(), vue()],
}

and then I refactored my src/main.js to look like this:

// src/main.js
import vitedge from 'vitedge'
import App from './App.vue'
import routes from './routes'

export default vitedge(App, { routes }, () => {})

I also have tried it with initializing the vue-router stuff (defining a home route, creating a home page, adding to the App.vue) but the error is the same either way

I also created the directories functions/api/index.js and functions/props/index.js (but I still get the error when the functions directory is removed)

here's my package.json:

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vitedge dev --ssr",
    "dev:spa": "vitedge dev",
    "build": "vitedge build",
    "serve": "vite preview",
    "reset": "rm -rf node_modules && npx yarn install"
  },
  "dependencies": {
    "@vue/server-renderer": "3",
    "@vueuse/head": "^0.6.0",
    "vitedge": "^0.16.0",
    "vue": "3",
    "vue-router": "4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "vite": "^2.4.4"
  },
  "type": "module"
}

I'm running: windows: 10 21H1 yarn 1.22.5 node: 14.17.5 npm: 7.21.0

Expected Behavior

when I run yarn vitedge dev or yarn vitedge dev --ssr, a dev server is spun up, and I'm able to preview my app locally

Current Behavior

if I try to run:

yarn vitedge dev
npx vitedge dev

I get:

(node:17780) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

TypeError [ERR_INVALID_MODULE_SPECIFIER]: Invalid module "file:///C:/<my project directory>/node_modules/.bin/vite" 
    at Loader.getFormat (internal/modules/esm/loader.js:118:13)
    at async Loader.getModuleJob (internal/modules/esm/loader.js:243:20)
    at async Loader.import (internal/modules/esm/loader.js:177:17)
    at async Object.loadESM (internal/process/esm_loader.js:68:5) {
  code: 'ERR_INVALID_MODULE_SPECIFIER'
}

and when I try to run it in SSR mode, I get the same error but for vite-ssr instead

frandiox commented 3 years ago

Hello! I cannot reproduce this so it might related to a Node<>Windows issue. Things you can try to see if it works:

Try ~Node@16~Node@14
Use a starting template to ensure there are no setup errors: Vitesse or this repo's example.
Run this command instead: node --experimental-json-modules --experimental-specifier-resolution=node ./node_modules/.bin/vite-ssr . This would deactivate a couple of features but at least we can see if it works.

frandiox commented 2 years ago

I think this was due to some breaking changes in recent versions of Node and should be fixed in 0.17.4. Related: #74

frandiox / vitedge