-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot use import statement outside a module (in monorepo) #4234
Comments
Something definitely off. |
I have confirmed this is still an issue on remix has major issues resolving local dependencies in mono repos, i'm not sure if its something to do with the symlinks - but i've been pulling my hair out all day trying to import a TS local library into my Remix app. Here is another reproduction of this issue https://github.com/dan-cooke/remix-esbuild-resolve-bug
You will see that the var import_react2 = require("@remix-run/react"), import_ui = require("ui"), import_jsx_dev_runtime = require("react/jsx-dev-runtime"), meta = () => ({
charset: "utf-8",
title: "New Remix App",
viewport: "width=device-width,initial-scale=1"
}); And of course if you try to execute this you will get the OP error "Cannot use ipmort statement outside a module" Because node require will try to require the TS version of the UI module. This issue makes developing Remix in a monorepo incredibly annoying as you will have to create buildable versions of all your TS libraries and pre-build them before your remix app. |
Okay I've figured it out. After digging into the compiler code and finding what I assumed to be a buggy plugin
|
@ahoyahoy Can you give @dan-cooke suggestion a try and see if it fixes your issue? 🙏🏼 |
This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that are unactionable. Please reach out if you have more information for us! 🙂 |
Two compilation errors could not yet be fixed: - @remix-run/web-fetch still throws a compilation error concerning the Headers type (Known issue to remix developers: remix-run/remix#7067) - @testing-library/cypress/types throws a compilation error. Did not yet look into it but may be caused by conflicting globals of cypress and jest. Apart of the compilation errors the app throws an error on build time concerning the use of commonJS syntax (SyntaxError: Cannot use import statement outside a module). Thats a tricky one and ive not found a solution yet. Resources: - remix-run/remix#4234 - remix-run/remix#4309 - https://community.fly.io/t/cannot-use-import-statement-outside-a-module/13533 - https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module (Maybe unrelated) - https://remix.run/docs/en/main/guides/gotchas (Maybe unrelated) Last but not least, the tests are not running, too. Did not yet look into it deeply but it seems it also has something to do with the globals of cypress and jest that overlap. The error Messages point to jest-setup.ts installGlobals() call.
* run npx upgrade-remix latest * Breaking change: LoaderArgs and ActionArgs are now LoaderFunctionArgs and ActionFunctionArgs * fix typescript compilation errors except thos in api workspace and in node_modules * Breaking Change: DataFunctionArgs is now LoaderFunctionArgs or ActionFunctionArgs * Exclude api from root tsconfig because it has its own tsconfig allowing decorators and stuff... * fetcher.state on <fetcher.Form method="get"> now returns "loading" instead of "submitting" (As its calling the loader not an action) * Fix typescript errors concerning remix-utlis package caused by upgrading remix - Only tsc issue inside remix-utils that is missing is the JSX type on React (React.JSX). But this is also an tsc issue inside the @remix-run/react package * fix type issue on move-to-participants * Updated all packages and fixed almost all typescript compilation errors Two compilation errors could not yet be fixed: - @remix-run/web-fetch still throws a compilation error concerning the Headers type (Known issue to remix developers: remix-run/remix#7067) - @testing-library/cypress/types throws a compilation error. Did not yet look into it but may be caused by conflicting globals of cypress and jest. Apart of the compilation errors the app throws an error on build time concerning the use of commonJS syntax (SyntaxError: Cannot use import statement outside a module). Thats a tricky one and ive not found a solution yet. Resources: - remix-run/remix#4234 - remix-run/remix#4309 - https://community.fly.io/t/cannot-use-import-statement-outside-a-module/13533 - https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module (Maybe unrelated) - https://remix.run/docs/en/main/guides/gotchas (Maybe unrelated) Last but not least, the tests are not running, too. Did not yet look into it deeply but it seems it also has something to do with the globals of cypress and jest that overlap. The error Messages point to jest-setup.ts installGlobals() call. * fix: jest setup The tests are now running (34 Failed, 21 Passed). It seems all tests that failed, did that because of importing remix-utils or date-fns-tz package. * fix: tsc error inside testing-library package Had to add "cypress" to types field of tsconfig to solve this issue. See: - remix-run/indie-stack#239 - https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson - cypress-io/cypress#26930 (comment) * fix: tsc error in common/api * Update .nvmrc to version 20 * Use v1 route convention via package @remix-run/v1-route-convention * Downgrade date-fns v3 to v2 as its still incompatible with date-fns-tz v2 see: marnusw/date-fns-tz#260 * fix: build error for import statements of package remix-utils * Clean up remix.config.js * Remove cypress * fix: cjs errors in config files * Transform .eslintrc.js from cjs to esm * fix: failed to load eslint config * Change node engine in package.json to >=16 as its needed for esm support see https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c * Remove deprecated package remix-domains and use domain-functions * Removed unused packages "remix-auth" and "remix-auth-supabase" * fix: Error "imgproxy is not a constructor" fixed via serverDependencyBundling in remix.config.js * Add entry.server functionality from remix docs and fix npm start script * Write test specification * fix: zod.enum() field does not set the value on remix-forms, use z.string() instead * fix: session must be set before update password on set-password.tsx * write test specifications for reset/confirm-password.tsx * fix: set-password action could not set new session and update password in the same action used the adminAuthClient in combination with refreshSession to make this possible * update set-password test specification to fit new behaviour * Update test specification for register/verify.tsx * Replace deprecated npm package "piwik-tracker" with the new one "matomo-tracker" * breaking change: createServerClient() moved from "@supabase/remix-auth-helpers" to "@subase/ssr" In this commit i updated the createAuthClient() method. Sadly i had to change every route where the authClient is used... The auth flow has also changed and will be implemented in the next commits. As i already touched so much files i also made eslint a little happier by resolving eslint errors (mostly const instead of let) * breaking change: rework login and logout due to new createServerClient from "@supbase/ssr" * Use root response headers to refresh the session instead of every single route * Use tsx to execute scripts instead of ts-node which supports esm only * replace deprecated functions from faker inside seed script * set up local supabase for new pkce flow * Add login_redirect param to supabase templates * fix: login redirect not working with the new template structure * implement new reset password flow * add new confirm route * breaking change: use useBlocker() instead of usePrompt() to alert on discarding changes on settings * fix: drop down behind main content * feat: replace imgproxy - use own implementation - remove imgproxy-node * fix: count up throws error * fix: imgproxy returns forbidden * feat: i18n (next) (#1254) * fix: __dirname is not defined in ES module scope * feat: update tailwindcss * fix: Add missing error message on failed login (#1252) * feat: extend event data on api next (#1257) * fix: Unable to compile TypeScript Try `npm i --save-dev @types/matomo-tracker` if it exists or add a new declaration (.d.ts) file containing `declare module 'matomo-tracker'; * extend events with responsible orgs and counts * feat: add direct url to prisma (#1259) * fix: optimize queries on explore, search and detail pages (#1260) * feat: integrate sentry (next) (#1262) * feat: Improve bootstrap doc (next) (#1250) * fix: some placeholder text in readme * fix: entry.client.tsx process is not defined (#1264) * fix: Text content did not match (Hydration Error) (#1267) * feat: welcome email after registration (#1268) * feat: prevent scroll reset on several menus and tab bars (#1270) * fix: missing label for organizationType select on organization settings (#1273) * fix: typo on project settings web-social (#1275) * fix: unable to deploy api (#1277) * fix: API throws Invalid URL (#1282) * fix: wrong click radius on nav bar menu logout button (#1280) * Allow minor and patch updates for remix packages via "^<version>" inside package.json deps * Rebuild package-lock.json * fix: wrong click radius on nav bar menu logout button * fix: missing line clamp on event cards on profile detail (#1283) * fix: cannot read properties of undefined reading id on root (#1286) * fix: i18n no cache seed breaks deployment (#1288) --------- Co-authored-by: nac62116 <56918308+nac62116@users.noreply.github.com> Co-authored-by: Achim Gosse <achim.gosse@digitalnoise.de> Co-authored-by: Peter Holló <hello@songsforthe.dev>
What version of Remix are you using?
latest
Steps to Reproduce
https://github.com/ahoyahoy/remix-super-error
run in root
open http://localhost:3000 and http://localhost:3008
Expected Behavior
Next.js (port 3000) app works correctly and import Button from UI package.
I want same result in Remix app (without build UI package).
Also I want to use same approach with shared tsconfig.
Actual Behavior
Remix app return error
SyntaxError: Cannot use import statement outside a module
.Also remix always rewrite my tsconfig... which is pretty annoying (#3180)
The text was updated successfully, but these errors were encountered: