Issues with the new esm support about v1-compat-utils HOT 16 CLOSED

Actually, I found a workaround. Just rename remix.config.js to remix.config.cjs and use const { createRoutesFromFolders } = require('@remix-run/v1-route-convention'); forcing the config to be read as CommonJS.

from v1-compat-utils.

ESM/CJS issues should be resolved now via #25 which is available in @remix-run/[email protected] and @remix-run/[email protected]

from v1-compat-utils.

This may just be a missing extension on the import.

@meza Do you want to try making a small change to verify? Try adding the extension to the import in the node_modules\@remix-run\v1-route-convention\dist\index.mjs file:

- import { createRouteId } from "@remix-run/dev/dist/config/routes";
+ import { createRouteId } from "@remix-run/dev/dist/config/routes.js";

If that fixes it we'll get a patch release to get this ESM compatible.

from v1-compat-utils.

Will do, give me a sec!

from v1-compat-utils.

@brophdawg11

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at Object.readConfig (node_modules\@remix-run\dev\dist\config.js:76:13)
    at async Object.watch (node_modules\@remix-run\dev\dist\cli\commands.js:216:78)
    at async Object.run (node_modules\@remix-run\dev\dist\cli\run.js:498:7)
ERROR: "dev:remix" exited with 1.

it feels like the @remix-run\dev package itself needs to do a better job at esm-ifying?

from v1-compat-utils.

@meza Can you provide a minimal reproduction of the issue (and notably the way you've set up your Remix app to use ESM)? I'm unsure what's triggering the latest error there after the change so a reproduction would help us dig in further.

from v1-compat-utils.

This may just be a missing extension on the import.

@meza Do you want to try making a small change to verify? Try adding the extension to the import in the node_modules\@remix-run\v1-route-convention\dist\index.mjs file:

- import { createRouteId } from "@remix-run/dev/dist/config/routes";
+ import { createRouteId } from "@remix-run/dev/dist/config/routes.js";

If that fixes it we'll get a patch release to get this ESM compatible.

This fix worked for me.

from v1-compat-utils.

I'm going to close this out since that fix worked for @jenslind and we don't have a minimal reproduction. If this can be reproduced please post a sample here and we can re-open 👍

from v1-compat-utils.

@brophdawg11 Here is the minimal reproduction with the patch file included https://github.com/egorpavlikhin/v1-compat-utils-issue-24

from v1-compat-utils.

^ This still doesn't work for me :-(

from v1-compat-utils.

Can you provide a reproduction @technotip?

from v1-compat-utils.

remix.config.js

const { createRoutesFromFolders } = require("@remix-run/v1-route-convention");

/** @type {import('@remix-run/dev').AppConfig} */

module.exports = {
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [/.*/],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
  future: {
    // makes the warning go away in v1.15+
    v2_routeConvention: true,
  },

  routes(defineRoutes) {
    // uses the v1 convention, works in v1.15+ and v2
    return createRoutesFromFolders(defineRoutes);
  },
};

I get following error:

Error: Error loading Remix config at /Users/somefolders/remix.config.js
ReferenceError: require is not defined in ES module scope, you can use import instead

If I change the file name to remix.config.cjs
I get following error: Error: Dynamic require of "http" is not supported

from v1-compat-utils.

Does your package.json have "type": "module" in it? Remix changes to ESM by default in v2, so if you are using CJS (which is totally fine!) then you probably want to set serverModuleFormat: "cjs" in your Remix config.

Or, you can update your remix config to use ESM (import + export default {} instead of require and module.exports = {}).

https://remix.run/docs/en/main/start/v2#servermoduleformat

from v1-compat-utils.

https://remix.run/docs/en/main/start/v2#servermoduleformat

yes the package.json file has "type": "module" in it.
I actually used npx create-remix@latest to create a new project and then transferred all the project files into it.

from v1-compat-utils.

Also ran into this error:

💿  remix dev

Error: Error loading Remix config at /Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/remix.config.mjs
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/node_modules/@remix-run/dev/dist/config/routes' imported from /Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/node_modules/@remix-run/v1-route-convention/dist/index.mjs
Did you mean to import @remix-run/dev/dist/config/routes.js?
    at Object.readConfig (/Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/node_modules/@remix-run/dev/dist/config.js:72:13)
    at async Object.dev (/Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/node_modules/@remix-run/dev/dist/cli/commands.js:179:18)
    at async Object.run (/Users/cfajardo/Repos/sdi-infra-fe/sdi-infra-fe/node_modules/@remix-run/dev/dist/cli/run.js:192:7)
error Command failed with exit code 1.

Details about my project

• using Node 20.5.0
• using 2.0.1 for all remix packages
• package.json contains type: "module"
• remix-confg.js has serverModuleFormat: "esm",

from v1-compat-utils.

Created a repo to reproduce here:
https://github.com/cliffordfajardo/remix_express_v1_to_v2_routes_bug

Steps to Reproduce

1. Create a Remix app using V1** (I chose the express template in my repo)

npx [email protected]

3. Update all @remix-run/* dependencies to version 2.0.1
4. Add @remix-run/v1-route-convention package to continue using V1 routes
5. Update remix.config.js to use @remix-run/v1-route-convention package
6. Run npm run dev & the error will appear

💿  remix dev

Error: Error loading Remix config at /Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/remix.config.js
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/node_modules/@remix-run/dev/dist/config/routes' imported from /Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/node_modules/@remix-run/v1-route-convention/dist/index.mjs
Did you mean to import @remix-run/dev/dist/config/routes.js?
    at Object.readConfig (/Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/node_modules/@remix-run/dev/dist/config.js:72:13)
    at async Object.dev (/Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/node_modules/@remix-run/dev/dist/cli/commands.js:179:18)
    at async Object.run (/Users/cfajardo/Desktop/remix_express_v1_to_v2_routes_bug/node_modules/@remix-run/dev/dist/cli/run.js:192:7)

NOTE: all of these steps have been applied is in the bug reproduction repo:
https://github.com/cliffordfajardo/remix_express_v1_to_v2_routes_bug

from v1-compat-utils.