Typescript serverMiddleware does not work

[sebastianhoitz]

Describe the bug When trying to write a typescript serverMiddleware, I receive these errors:

 ERROR  ServerMiddleware Error: Cannot use import statement outside a module                                                                                                                          12:15:11

  (function (exports, require, module, __filename, __dirname) { import type { Request, Response } from 'express'
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:88:7)
  at createScript (vm.js:261:10)
  at Object.runInThisContext (vm.js:309:10)
  at wrapSafe (internal/modules/cjs/loader.js:1040:15)
  at Module._compile (internal/modules/cjs/loader.js:1101:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
  at Module.load (internal/modules/cjs/loader.js:985:32)
  at Function.Module._load (internal/modules/cjs/loader.js:878:14)
  at Module.require (internal/modules/cjs/loader.js:1025:19)
  at require (internal/modules/cjs/helpers.js:72:18)

To Reproduce Steps to reproduce the behavior:

This is what my api/index.ts looks like:

import express, { Request, Response } from 'express'

const app = express()

app.get('/products', (req: Request, res: Response) => {
  res.json([{ name: 'test' }])
})

export default app

And this is my nuxt.config:

{
  // [...] 
   serverMiddleware: isServerlessEnvironment
    ? []
    : [{ path: '/api', handler: '~/api/index' }],
}

Expected behavior Run the correct API

[danielroe]

@sebastianhoitz Would you create a reproduction via https://template.nuxtjs.org ?

You might find that removing node_modules and reinstalling solves this issue for you.

[james-darko]

I'm facing the same issue. Typescript does not seem to work at all. I used the nuxt cli wizard and selected typescript as the language. I tried deleting node_modules as @danielroe suggested to no avail.

Repo: https://github.com/James-Darko/vue-dashboard/tree/typescript-bug

I removed the import statement but inserted 'any' types, as compared to @sebastianhoitz. I checked the configs are in line with the docs here: https://typescript.nuxtjs.org/guide/runtime

Node v14.15.4 NPM 6.14.10 Ubuntu 20.04

edit: I tried downgrading to node v10.23.1, upgrading to npm v6.14.11, and deleting node_modules again. Same outcome. "Unexpected token :"

[james-darko]

Found the solution. The nuxt command seems to assume Javascript. Simply calling nuxt-ts instead of nuxt fixed the issue for me.

This doc page does say to run npm run dev in the code widget. Just below that, under "List of Commands", it lists the nuxt dev and other commands directly. I wound up using those direct commands, I expect @sebastianhoitz did as well.

Perhaps the nuxt command could print a warning if it finds files ending in .ts.

edit: "this doc" was in reference to https://nuxtjs.org/docs/2.x/get-started/commands

[danielroe]

Nuxt will soon have native support for TypeScript in serverMiddleware via jiti but the documentation you mentioned is at https://typescript.nuxtjs.org/guide/runtime#usage

[kevinmarrec]

@James-Darko Nuxt.js now supports runtime TypeScript out of the box (without @nuxt/typescript-runtime package and nuxt-ts binary), starting 2.15.

https://github.com/nuxt/nuxt.js/releases

I recommend you to upgrade to 2.15, remove @nuxt/typescript-runtime and use nuxt instead of nuxt-ts. I'm gonna work on a documentation update to mention this information.

[kevinmarrec]

@James-Darko Feel free to create a new issue if you still have issues with your server middleware after doing the changes :)