I can not make a build

[nathanredblur]

I'm using bati to create a initial project with this command pnpm create bati --react --tailwindcss --authjs --trpc --hono --drizzle --cloudflare --biome

and when I try to create a build I get this error.

x Build failed in 72ms
[vite:esbuild-transpile] Transform failed with 1 error:
cloudflare-server-entry.mjs:17:11: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
15 |  if (!globalThis.crypto) {
16 |    Object.defineProperty(globalThis, "crypto", {
17 |      value: await import('node:crypto').then(
   |             ^
18 |        (crypto) => crypto.webcrypto
19 |      ),

    at failureErrorWithLog (/Users/nathanredblur/Projects/web/my-app/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/nathanredblur/Projects/web/my-app/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:755:50
    at responseCallbacks.<computed> (/Users/nathanredblur/Projects/web/my-app/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:622:9)
    at handleIncomingPacket (/Users/nathanredblur/Projects/web/my-app/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:677:12)
    at Socket.readFromStdout (/Users/nathanredblur/Projects/web/my-app/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:600:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Socket.Readable.push (node:internal/streams/readable:390:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:191:23) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter],
  frame: '\n' +
    '\x1B[33mTop-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)\x1B[39m\n' +
    '15 |  if (!globalThis.crypto) {\n' +
    '16 |    Object.defineProperty(globalThis, "crypto", {\n' +
    "17 |      value: await import('node:crypto').then(\n" +
    '   |             ^\n' +
    '18 |        (crypto) => crypto.webcrypto\n' +
    '19 |      ),\n',
  loc: {
    column: 11,
    file: 'cloudflare-server-entry.mjs',
    length: 5,
    line: 17,
    lineText: "    value: await import('node:crypto').then(",
    namespace: '',
    suggestion: ''
  },
  code: 'PLUGIN_ERROR',
  plugin: 'vite:esbuild-transpile',
  hook: 'renderChunk'
}
 ELIFECYCLE  Command failed with exit code 1.

this is the configuration that comes by default when you create a new project

import trpc from "./trpc/vite-plugin";
import react from "@vitejs/plugin-react";
import devServer from "@hono/vite-dev-server";
import { pages } from "vike-cloudflare";
import { defineConfig } from "vite";
import vike from "vike/plugin";

export default defineConfig({
  plugins: [
    vike({}),
    pages({
      server: {
        kind: "hono",
        entry: "hono-entry.ts",
      },
    }),
    devServer({
      entry: "hono-entry.ts",

      exclude: [
        /^\/@.+$/,
        /.*\.(ts|tsx|vue)($|\?)/,
        /.*\.(s?css|less)($|\?)/,
        /^\/favicon\.ico$/,
        /.*\.(svg|png)($|\?)/,
        /^\/(public|assets|static)\/.+/,
        /^\/node_modules\/.*/,
      ],

      injectClientScript: false,
    }),
    react({}),
    trpc(),
  ],
});

it's my first time with Vike and I don't have Idea what is the problem, but I think is related to this plugin.

[brillout]

I can't reproduce as the following doesn't throw any error:

pnpm create bati --react --tailwindcss --authjs --trpc --hono --drizzle --cloudflare --biome
pnpm install
pnpm dev

Node version: 20.12.2.

[nathanredblur]

no dev, just build fails

[magne4000]

@nathanredblur Indeed, it should target es2022 by default. You can quickly fix it by running pnpm run build --target es2022 for now.

[nathanredblur]

@magne4000 the idea is to run a preview, but your proposal not solves that.

    "build": "vite build --target es2022",
    "preview:wrangler": "wrangler pages dev",

[magne4000]

Updating to vike-cloudflare@0.0.5 should fix the build issue. If you still have issues with preview mode after updating, please create another issue with the new Error.