Local development error `defineEmits() type cannot mixed call signature and property syntax.`

[McSneaky]

When starting up local development, getting some interesting errors

mcsneaky@sampo ~/Projects/adonis-packages/website (main)
└─$ npx nuxi build
Nuxi 3.5.3                                                                                                                                                                                                   3:19:37 AM
Nuxt 3.5.3 with Nitro 2.4.1                                                                                                                                                                                  3:19:37 AM
ℹ Building client...                                                                                                                                                                                         3:19:38 AM
ℹ vite v4.3.9 building for production...                                                                                                                                                                     3:19:38 AM
ℹ ✓ 136 modules transformed.                                                                                                                                                                                 3:19:39 AM
ℹ ✓ built in 825ms                                                                                                                                                                                           3:19:39 AM

 ERROR  [vite:vue] [@vue/compiler-sfc] defineEmits() type cannot mixed call signature and property syntax.                                                                                                   3:19:39 AM

  components/Observer.vue
  5  |  <script setup lang="ts">
  6  |  const props = defineProps<{ options?: {} }>()
  7  |  const emit = defineEmits<{
  |                           ^
  8  |    (...args:any[]): void,
  |  ^^^^^^^^^^^^^^^^^^^^^^^^
  9  |    intersect: (e: IntersectionObserverEntry) => void
  |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  10 |  }>()
  |  ^
  at ScriptCompileContext.error (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15841:11)
  at extractRuntimeEmits (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19665:11)
  at genRuntimeEmits (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19641:31)
  at Object.compileScript (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20387:21)
  at resolveScript (node_modules/@vitejs/plugin-vue/dist/index.mjs:283:31)
  at genScriptCode (node_modules/@vitejs/plugin-vue/dist/index.mjs:2469:18)
  at transformMain (node_modules/@vitejs/plugin-vue/dist/index.mjs:2282:54)
  at Object.transform (node_modules/@vitejs/plugin-vue/dist/index.mjs:2794:16)
  at node_modules/rollup/dist/es/shared/node-entry.js:24707:40

ℹ Vite client warmed up in 580ms                                                                                                                                                                             3:25:23 AM

 ERROR  RollupError: Could not resolve "../../../npm/modules.json" from "server/api/modules.ts"                                                                                                        nitro 3:25:23 AM

undefined

✔ Nitro built in 223 ms                                                                                                                                                                                nitro 3:25:23 AM

For first error, I have some wrong package version? It's fresh clone and npm install

Other error about ../../../npm/modules.json is interesting tho. It seems to point to my home folder. I assume that's because I'm using npm and not pnpm? 🤔

npx nuxi info
Nuxi 3.5.3                                                                                                                                                                                                   3:23:20 AM
                                                                                                                                                                                                             3:23:20 AM
RootDir: /home/mcsneaky/Projects/adonis-packages/website                                                                                                                                                     3:23:20 AM
Nuxt project info:                                                                                                                                                                                           3:23:20 AM

------------------------------
- Operating System: Linux
- Node Version:     v18.16.0
- Nuxt Version:     3.5.3
- Nitro Version:    2.4.1
- Package Manager:  npm@9.5.1
- Builder:          vite
- User Config:      app, components, modules, unocss, colorMode, vue
- Runtime Modules:  @unocss/nuxt@0.51.13, @vueuse/nuxt@10.1.2, @nuxtjs/color-mode@3.2.0
- Build Modules:    -
------------------------------

[Julien-R44]

Yes, that's probably that. We are using pnpm workspaces, so I think using npm can cause some issues I've tried a fresh reinstall on my side and haven't had any problems

Can you try again with pnpm and tell me if it's ok for you?

• clone the repo
• pnpm install -r at root
• pnpm dev at root too

[McSneaky]

Aha, two mistakes

Didn't notice it's workspace And was using Node 20, reverting to Node 16 made it work. Didn't try Node 18

Sorry for wasting your time :)

[Julien-R44]

No worries! Works well with node 19.x. Will take a look for Node 20 asap

[McSneaky]

Stack for Node 20, might be useful

└─$ pnpm dev

> @ dev /home/mcsneaky/Projects/adonis-packages
> pnpm -C website dev

> adonis-packages-website@0.0.0 dev /home/mcsneaky/Projects/adonis-packages/website
> pnpm build:npm && nuxi dev

> adonis-packages-website@0.0.0 build:npm /home/mcsneaky/Projects/adonis-packages/website
> cd .. && pnpm build

> @ build /home/mcsneaky/Projects/adonis-packages
> pnpm cli build

> @ cli /home/mcsneaky/Projects/adonis-packages
> ts-node-esm ./lib/cli.ts "build"

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/mcsneaky/Projects/adonis-packages/lib/cli.ts
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:139:38)
    at defaultLoad (node:internal/modules/esm/load:83:20)
    at nextLoad (node:internal/modules/esm/hooks:750:28)
    at load (/home/mcsneaky/Projects/adonis-packages/node_modules/.pnpm/ts-node@10.9.1_@types+node@18.16.0_typescript@5.0.4/node_modules/ts-node/dist/child/child-loader.js:19:122)
    at nextLoad (node:internal/modules/esm/hooks:750:28)
    at Hooks.load (node:internal/modules/esm/hooks:382:26)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:165:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:762:20) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.
 ```