ReferenceError: module is not defined in ES module scope @remix-run

[gesosa]

Hello.
I'm stuck with a project I'm doing to understand remix.
I started by copying the indie stack and modifying it.
The problem started when I integrated flat-routes into the project and changed the configurations of packagege.json and remix.config.
generates the following error

Error: Error loading Remix config at /home/gsosa/Proyectos/rocket-rental/remix.config.js
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 '/home/gsosa/Proyectos/rocket-rental/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at Object.readConfig (/home/gsosa/Proyectos/rocket-rental/node_modules/@remix-run/dev/dist/config.js:76:13)
at async Object.dev (/home/gsosa/Proyectos/rocket-rental/node_modules/@remix-run/dev/dist/cli/commands.js:227:18)
at async Object.run (/home/gsosa/Proyectos/rocket-rental/node_modules/@remix-run/dev/dist/cli/run.js:515:7)

I can't find a solution.
Please someone help me

packege.json
{
"name": "rocket-rental-fe7c",
"private": true,
"sideEffects": false,
"main": "index.js",
"type": "module",
"scripts": {
"build": "run-s build:*",
"build:remix": "remix build",
"build:server": "tsx ./other/build-server.ts",
"dev": "remix dev -c "node ./server/dev-server.js" --no-restart",
"format": "prettier --write .",
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
"setup": "prisma generate && prisma migrate deploy && prisma db seed",
"start": "cross-env NODE_ENV=production node .",
"start:mocks": "cross-env NODE_ENV=production MOCKS=true tsx .",
"test": "vitest",
"test:e2e": "npm run test:e2e:dev --silent",
"test:e2e:dev": "playwright test --ui",
"pretest:e2e:run": "npm run build",
"test:e2e:run": "cross-env CI=true playwright test",
"test:e2e:install": "npx playwright install chromium --with-deps",
"typecheck": "tsc",
"validate": "run-p "test -- --run" lint typecheck test:e2e:run"
},
"prettier": {
"arrowParens": "avoid",
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": false,
"singleAttributePerLine": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": true
},
"eslintIgnore": [
"/node_modules",
"/build",
"/public/build",
"/playwright-report",
"/server-build"
],
"dependencies": {
"@prisma/client": "^5.1.1",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@reach/dialog": "^0.18.0",
"@remix-run/css-bundle": "^1.19.2",
"@remix-run/node": "^1.19.2",
"@remix-run/react": "^1.19.2",
"@remix-run/serve": "^1.19.3",
"@remix-run/server-runtime": "^1.19.2",
"address": "^1.2.2",
"bcryptjs": "^2.4.3",
"better-sqlite3": "^8.5.0",
"close-with-grace": "^1.2.0",
"clsx": "^2.0.0",
"compression": "^1.7.4",
"downshift": "^8.1.0",
"express": "^4.18.2",
"fs-extra": "^11.1.1",
"get-port": "^7.0.0",
"glob": "^10.3.4",
"isbot": "^3.6.12",
"morgan": "^1.10.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"spin-delay": "^1.2.0",
"tailwindcss-radix": "^2.8.0",
"tiny-invariant": "^1.3.1",
"zod": "^3.21.4"
},
"devDependencies": {
"@faker-js/faker": "^8.0.2",
"@remix-run/dev": "^1.19.2",
"@remix-run/eslint-config": "^1.19.2",
"@testing-library/cypress": "^9.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@types/bcryptjs": "^2.4.2",
"@types/better-sqlite3": "^7.6.4",
"@types/compression": "^1.7.3",
"@types/eslint": "^8.40.2",
"@types/express": "^4.17.17",
"@types/fs-extra": "^11.0.1",
"@types/morgan": "^1.9.5",
"@types/node": "^18.16.18",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@vitejs/plugin-react": "^4.0.1",
"@vitest/coverage-v8": "^0.32.2",
"autoprefixer": "^10.4.14",
"binode": "^1.0.5",
"cookie": "^0.5.0",
"cross-env": "^7.0.3",
"cypress": "^12.16.0",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-cypress": "^2.13.3",
"happy-dom": "^9.20.3",
"msw": "^1.2.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.24",
"prettier": "2.8.8",
"prettier-plugin-tailwindcss": "^0.3.0",
"prisma": "^5.1.1",
"remix-flat-routes": "^0.5.10",
"start-server-and-test": "^2.0.0",
"tailwindcss": "^3.3.2",
"ts-node": "^10.9.1",
"tsconfig-paths": "^4.2.0",
"typescript": "^5.1.3",
"vite": "^4.3.9",
"vite-tsconfig-paths": "^3.6.0",
"vitest": "^0.32.2"
},
"engines": {
"node": ">=14"
},
"prisma": {
"seed": "tsx ts-node --require tsconfig-paths/register prisma/seed.ts"
}
}

remix.config
import { flatRoutes } from 'remix-flat-routes'

/**

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

module.exports = {
cacheDirectory: './node_modules/.cache/remix',
ignoredRouteFiles: ['/'],
serverModuleFormat: 'esm',
serverPlatform: 'node',
tailwind: true,
postcss: true,
watchPaths: ['./tailwind.config.ts'],
future: {
v2_meta: true,
v2_errorBoundary: true,
v2_normalizeFormMethod: true,
v2_routeConvention: true,
unstable_dev: true,
},
routes: async defineRoutes => {
return flatRoutes('routes', defineRoutes, {
ignoredRouteFiles: [
'.',
'/.css',
'**/.test.{js,jsx,ts,tsx}',
'**/__.',
],
})
},
}

[justinhandley]

Did you find a solution to this?

[gesosa]

no. I tried updating the versions and it didn't work. Now I am working with epicStack where it is already working El jue, 2 nov 2023 a las 15:17, Justin Handley ***@***.***>) escribió:

…

Did you find a solution to this? — Reply to this email directly, view it on GitHub <#7383 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABD4WJBZBLUYMIX2NYISEVLYCPPR5AVCNFSM6AAAAAA4QUFUXGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TINJZHEZDI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- * Germán** David Sosa*

[jordanful]

I'm also running into this when trying to add remix.config.js to the root directory of an existing Remix project (2.2.0).

[pmlk]

After upgrading from V1 to V2 I added the following line in my remix.config.js, which fixed this problem for me:

module.exports = {
  ..
  serverModuleFormat: 'cjs',
  ..
}

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

[justinhandley]

After upgrading from V1 to V2 I added the following line in my remix.config.js, which fixed this problem for me:

module.exports = {
  ..
  serverModuleFormat: 'cjs',
  ..
}

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

This absolutely works. I guess the question is, since esm is becoming the default, it feels like we should switch. However, the error is relatively vague and incredibly hard to troubleshoot what exactly is causing the problem. So, maybe if anything this should be a ticket around better error reporting to help people figure out which modules they have that aren't compatible with esm.

[roitman-g]

Switching serverModuleFormat to "cjs" breaks netlify deployment for me

[justinhandley]

This may or may not help you, but usually if things break it is because you aren't including them in serverDependenciesToBundle - either you need to find out what dependency is breaking things, or you can do what I do and accept a larger package size and just bundle everything.

serverDependenciesToBundle: [/.*/],

[cl11e]

I have a same problem when implement remix with nx workspace but somehow i fixed it.
in my case, I delete postcss.config.js in apps/site-1
and add
ignoredRoutefiles: ['**/.*]
in default export into remix.config.js. and it just work.