Could not run @clerk/remix on CloudFlare Workers. Cannot use 'import.meta' outside a module Syntax Error

[aerojeyenth]

• Review the documentation: https://docs.clerk.dev/
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• gatsby-plugin-clerk
• build/tooling/chore
• other:

Version:

2.2.15

Browser/OS

macOS Big Sur

Description

Hi great people at Clerk. I am super impressed with what Clerk is doing. I want to use it in my next application. We are building a job board in Remix and hosting on Cloudflare Workers. After following the documents I made sure that Clerk/Remix supports all the edge env including CF workers but when I tried to build the app using Miniflare(Wrangler 2.12.3) locally by following the steps in the official documentation, I got the following error at the 2nd step of Wrapping the App with ClearkApp.

SyntaxError: Cannot use 'import.meta' outside a module

interestingly the failure occurs only after the Build succeeded not sure if this is the problem of Miniflare/Wrangler or Remix or Clerk/Remix packages. I kindly request you to help me debug this. Thanks a lot.

### Steps to reproduce:

Please clone the repo to local machine into a local folder using

git clone https://github.com/aerojeyenth/demo-for-cf-error

run

npm install

after npm install is compete

run npm run dev

Actual Behaviour:

npm run command fails with the following error:

SyntaxError: Cannot use 'import.meta' outside a module

Expected Behaviour:

npm run command should run without any errors and the remix application should run locally.

[aerojeyenth]

@dimkl Thanks for adding the label and self-assigning this issue. Since you labelled it as 'remix-issue' I would also like to investigate the Cloudlfare Wranger/Miniflare which could also potentially create issues. Thank you for your support. !!

[dimkl]

Hi @aerojeyenth. Thank you for reporting this. I would be very nice to also provide feedback about Cloudlfare Wranger/Miniflare.
Sorry i haven't made any comment yet, but i haven't started the investigation yet.

About the label: the use of remix-issue is meant for some internal stats (eg determine which framework has the most GH issues) and shows that this issue is related to either our integration (our codebase) or with the remix framework itself (remix upgrade introduced breaking changes).

[dimkl]

This seems to be a duplicate of #127 (comment)
I will close it and update the old one. If you investigate and have any issues with Cloudlfare Wranger/Miniflare please open another ticket to track it separately!

[dimkl]

This issue is related to remix-run adding HMR and Hot Data Revalidation and was introduced in version @remix-run/react@v1.14.0.
Based on the logs we can see that this is related to code generated by remix (eg import.meta.hot.accept("remix:manifest" ...) and based on the remix repo i haven't found any workaround yet.

I downgraded remix packages to v1.13.0 and it seems to work. I opened this PR to your repo, to showcase the downgrade solution: aerojeyenth/demo-for-cf-error#1

Related issue in remix: remix-run/remix#5644
Related PR introducing issue: remix-run/remix#5259

[dimkl]

Closing this ticket as it depends on remix issue: remix-run/remix#5644

[aerojeyenth]

@dimkl Thank you so much for helping me out on this! It was very quick. Big thanks!