Custom Server TS errors and not using local packages when running blitz dev (using alpha)

[lhocke]

What is the problem?

Running into two issues with blitz alpha

1. attempting to run blitz dev with a custom server file (either server.ts or server/index.ts) tries to use global installs of @blitzjs/next, @blitzjs/auth, and @blitzjs/rpc
2. Error 1 can be avoided by invoking the start scripts with either yarn dev or npm dev but then throws several typsecript errors

Paste all your error logs here:

$ blitz dev
Loaded env from /Users/lhocke/Code/personal/webdev/comic-blitz/.env.local
Loaded env from /Users/lhocke/Code/personal/webdev/comic-blitz/.env
Using your custom server
✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:6:0:
      6 │ const { PORT = "3000"} = process.env
        ╵ ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming destructuring to the configured target environment ("es5") is not supported yet

    server.ts:6:6:
      6 │ const { PORT = "3000"} = process.env
        ╵       ^

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:7:0:
      7 │ const dev = process.env.NODE_ENV !== "production"
        ╵ ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:8:0:
      8 │ const app = blitz({ dev })
        ╵ ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:9:0:
      9 │ const handle = app.getRequestHandler()
        ╵ ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:15:4:
      15 │     const parsedUrl = parse(req.url!, true)
         ╵     ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming const to the configured target environment ("es5") is not supported yet

    server.ts:16:4:
      16 │     const { pathname } = parsedUrl
         ╵     ~~~~~

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Transforming destructuring to the configured target environment ("es5") is not supported yet

    server.ts:16:10:
      16 │     const { pathname } = parsedUrl
         ╵           ^

  The target environment was set to "es5" here:

    tsconfig.json:3:14:
      3 │     "target": "es5",
        ╵               ~~~~~

✘ [ERROR] Could not resolve "html"

    server.ts:3:22:
      3 │ import { parse } from "html"
        ╵                       ~~~~~~

  You can mark the path "html" as external to exclude it from the bundle, which will remove this
  error.

stopWatcher
/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1603
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 9 errors:
server.ts:3:22: ERROR: Could not resolve "html"
server.ts:6:0: ERROR: Transforming const to the configured target environment ("es5") is not supported yet
server.ts:6:6: ERROR: Transforming destructuring to the configured target environment ("es5") is not supported yet
server.ts:7:0: ERROR: Transforming const to the configured target environment ("es5") is not supported yet
server.ts:8:0: ERROR: Transforming const to the configured target environment ("es5") is not supported yet
...
    at failureErrorWithLog (/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1603:15)
    at /Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1249:28
    at runOnEndCallbacks (/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1162:65)
    at buildResponseToResult (/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1247:7)
    at /Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:1356:14
    at /Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/Users/lhocke/Code/personal/webdev/comic-blitz/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      location: {
        column: 22,
        file: 'server.ts',
        length: 6,
        line: 3,
        lineText: 'import { parse } from "html"',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "html" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "html"'
    },
    {
      detail: undefined,
      location: {
        column: 0,
        file: 'server.ts',
        length: 5,
        line: 6,
        lineText: 'const { PORT = "3000"} = process.env',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 6,
        file: 'server.ts',
        length: 1,
        line: 6,
        lineText: 'const { PORT = "3000"} = process.env',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming destructuring to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 0,
        file: 'server.ts',
        length: 5,
        line: 7,
        lineText: 'const dev = process.env.NODE_ENV !== "production"',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 0,
        file: 'server.ts',
        length: 5,
        line: 8,
        lineText: 'const app = blitz({ dev })',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 0,
        file: 'server.ts',
        length: 5,
        line: 9,
        lineText: 'const handle = app.getRequestHandler()',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 4,
        file: 'server.ts',
        length: 5,
        line: 15,
        lineText: '    const parsedUrl = parse(req.url!, true)',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 4,
        file: 'server.ts',
        length: 5,
        line: 16,
        lineText: '    const { pathname } = parsedUrl',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming const to the configured target environment ("es5") is not supported yet'
    },
    {
      detail: undefined,
      location: {
        column: 10,
        file: 'server.ts',
        length: 1,
        line: 16,
        lineText: '    const { pathname } = parsedUrl',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 14,
            file: 'tsconfig.json',
            length: 5,
            line: 3,
            lineText: '    "target": "es5",',
            namespace: '',
            suggestion: ''
          },
          text: 'The target environment was set to "es5" here:'
        }
      ],
      pluginName: '',
      text: 'Transforming destructuring to the configured target environment ("es5") is not supported yet'
    }
  ],
  warnings: []
}

Node.js v18.0.0
error Command failed with exit code 1.

Paste all relevant code snippets here:

// server.ts
import blitz from "blitz/custom-server"
import { createServer } from "http"
import { parse } from "url"
import { log } from "next/dist/server/lib/logging"

const { PORT = "3000" } = process.env
const dev = process.env.NODE_ENV !== "production"
const app = blitz({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url!, true)
    const { pathname } = parsedUrl

    if (pathname === "/hello") {
      res.writeHead(200).end("world")
      return
    }

    if (pathname === "/a") {
      // renders app/pages/a.tsx
      app.render(req, res, "/a", query)
      return
    }

    handle(req, res, parsedUrl)
  }).listen(PORT, () => {
    log.success(`Ready on http://localhost:${PORT}`)
  })
})

What are detailed steps to reproduce this?

1. Create custom server file as either server.ts in the root directory or server/index.ts
2. Run dev script with blitz dev for the first error or invoke via npm or yarn with npm dev or yarn dev for the second

Run blitz -v and paste the output here:

Blitz version: 2.0.0-alpha.57 (global)
Blitz version: 2.0.0-alpha.57 (local)
macOS Monterey | darwin-x64 | Node: v18.0.0


 Package manager: npm

  System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 4.98 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.0.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.10.0 - /usr/local/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-alpha.57 => 2.0.0-alpha.57 
    @blitzjs/next: 2.0.0-alpha.57 => 2.0.0-alpha.57 
    @blitzjs/rpc: 2.0.0-alpha.57 => 2.0.0-alpha.57 
    @prisma/client: 4.0.0 => 4.0.0 
    blitz: 2.0.0-alpha.57 => 2.0.0-alpha.57 
    next: 12.2.0 => 12.2.0 
    prisma: 4.0.0 => 4.0.0 
    react: 18.0.0 => 18.0.0 
    react-dom: 18.0.0 => 18.0.0 
    typescript: ^4.5.3 => 4.7.4 

Please include below any other applicable logs and screenshots that show your problem:

Error output as text and screenshots custom-server-error-log.txt

[itsdillon]

Thanks for the issue @lhocke

Going to take a look at this for beta release

[MartinMuzatko]

It is also still the case in the current beta - 2.0.0-beta3 Hopefully it gets fixed this week :) Looking forward <3

[reymon359]

As an update, it is still happening on 2.0.0-beta4

In case it helps someone else, I updated the target in the tsconfig.json to "target": "es6" as a workaround to remove the error 😉

[beerose]

@lhocke could you try with Node 16? Trying to see if that could be related to Node version.