Miniflare fails to build | Cloudflare Developers | Page 1

twilit patrol Jun 14, 2023, 9:29 AM

#

Hi there! I have recently started working with cloudflare workers and currently am in the process of porting my Remix.run app to work with workers. However, I seem to have come to an impasse during debugging the miniflare build process.
I am using esbuild to build the worker, following is the build code:

// build.ts
import * as esbuild from "esbuild";

const mode = process.env.NODE_ENV?.toLowerCase() ?? "development";

console.log(`[Worker] Running esbuild in ${mode} mode`);

esbuild.build({
  entryPoints: ["./worker/index.ts"],
  bundle: true,
  minify: mode === "production",
  platform: "node",
  format: "esm",

  define: {
    "process.env.NODE_ENV": `"${mode}"`,
  },
  outfile: "./worker/dist/worker.js",
});

there seems to be no issue with the build process, but when miniflare tries to parse the worker.js file, it throws the following error:

[miniflare] [mf:inf] Listening on :8787
[miniflare] [mf:inf] - http://127.0.0.1:8787
[miniflare] [mf:inf] - http://10.1.1.250:8787
[miniflare] [mf:err] Unable to parse worker/dist/worker.js: SyntaxError: Cannot use import statement outside a module (ignoring)

and here is a snippet of my remix app's package json file:

{
  "private": true,
  "sideEffects": false,
  "main": "./worker/dist/worker.js",
  "scripts": {
  ...
    "build:css": "postcss styles/app.css -o app/styles/app.css",
    "build:remix": "remix build",
    "build:worker": "NODE_ENV=production ts-node ./build.ts",
    "build": "npm run build:css && npm run build:remix && npm run build:worker",
    "dev:css": "postcss styles/app.css -o app/styles/app.css -w",
    "dev:miniflare": "miniflare --build-command \"npx ts-node ./build.ts\" --watch",
    "dev:remix": "remix watch",
    "dev": "NODE_ENV=development concurrently \"npm:dev:*\"",
    "postinstall": "remix setup cloudflare-workers",
    "deploy": "wrangler publish",
    "start": "miniflare"
  },}

Any help on solving this issue would be greatly appreciated!

hard trail Jun 14, 2023, 9:36 AM

#

I see you're using the miniflare cli, so that must be v2 (v3 doesn't support everything, so I understand why you didn't upgrade and I also kept v2 wherever possible)

Based on that error, and all the tree shaking/esm setup I assume you're using a module worker (where you export default ... instead of addEventListener, and miniflare v2 didn't pick that up automatically, so you need to use the -m flag

twilit patrol Jun 14, 2023, 9:40 AM

#

I'll try that now and report back 🙂

#

@hard trail I have tried your suggestion, and now it says the following:

[mf:err] MiniflareError: No script defined, either include it explicitly, set build.upload.main in Wrangler configuration, or set module in package.json```
I kind of believe this is because my worker/index.ts in fact uses the addEventListener method:
```javascript
import {
  createRequestHandler,
  handleAsset,
} from "@remix-run/cloudflare-workers";
import * as build from "../build/index.js";

declare global {
  const REDIRECTS: KVNamespace;
}

const handleRequest = createRequestHandler({ build });

const handleEvent = async (event: FetchEvent) => {
  let response = await handleAsset(event, build);

  if (!response) {
    response = await handleRequest(event);
  }

  return response;
};

addEventListener("fetch", async (event) => {
  try {
    event.respondWith(handleEvent(event));
  } catch (e: any) {
    event.respondWith(new Response("Internal Error", { status: 500 }));
  }
});

My apologies for not providing this context previously

#

Also, I am using this repo: https://github.com/jacob-ebey/remix-cloudflare-demo
as a guide to port my app

GitHub

GitHub - jacob-ebey/remix-cloudflare-demo: A demo of Remix running ...

A demo of Remix running on Cloudflare workers. Contribute to jacob-ebey/remix-cloudflare-demo development by creating an account on GitHub.

hard trail Jun 14, 2023, 9:48 AM

#

ah, so you're not using modules - in that case I think you should change the format in esbuild to iife (but don't quote me on that, it's been a while since I last wrote non-module workers)

twilit patrol Jun 14, 2023, 9:49 AM

#

should the -m be removed as well?

hard trail Jun 14, 2023, 9:49 AM

#

correct

twilit patrol Jun 14, 2023, 9:49 AM

#

thank you. will try again now

#

now I seem to be getting:

[miniflare] [mf:err] /home/rifkisalim/Software Development Projects/Web/Other Projects/Fullstack/NFSBattles/NFSBattles-App/worker/dist/worker.js:14
[miniflare]     throw new Error('Dynamic require of "' + x2 + '" is not supported');
[miniflare]     ^
[miniflare] 
[miniflare] Error: Dynamic require of "buffer" is not supported```

hard trail Jun 14, 2023, 9:52 AM

#

what are buffers doing here 👀

twilit patrol Jun 14, 2023, 9:52 AM

#

would it help if I attach a pastebin of the generated worker?

hard trail Jun 14, 2023, 9:52 AM

#

I checked out the repo you linked above, and that doesn't have nodejs compatibility enabled

twilit patrol Jun 14, 2023, 9:53 AM

#

I have enabled nodejs compat in the wrangler config:

name = "remix-cloudflare-workers"

workers_dev = true
main = "./build/index.js"
# https://developers.cloudflare.com/workers/platform/compatibility-dates
compatibility_date = "2022-04-05"
compatibility_flags = ["streams_enable_constructors", "nodejs_compat"]

[site]
  bucket = "./public"

[build]
command = "npm run build"
watch_dir = "app"

#

I wonder if this method is correct, or is there somewhere else I should change to enable compat?

hard trail Jun 14, 2023, 9:54 AM

#

wait hold on I think I see it, but I have never tested if this is actually the case

#

since you switched to iife, esbuild is now using require instead of import (I think), which miniflare can't handle, as it needs import for the nodejs compat stuff

#

not sure how to proceed here as I haven't used remix, sorry

#Miniflare fails to build