search

sergiodxa / remix-i18next

The easiest way to translate your Remix apps
https://sergiodxa.github.io/remix-i18next/
MIT License
616 stars 44 forks source link

error whe setup with serverModuleFormat: 'cjs', #181

Closed mogadanez closed 7 months ago

mogadanez commented 8 months ago

Describe the bug

trying setup by instruction, but I have also MUI in my project. due this I have to use:

  // TODO: when mui has esm support, remove this (default is esm)
  // check it https://github.com/mui/material-ui/issues/30671
  serverModuleFormat: 'cjs',

in my remix.config.js

with it I got follow error when start:

/projects/material-ui-remix-ts/build/index.js:69
var import_i18next_fs_backend = __toESM(require("i18next-fs-backend")), import_node_path = require("node:path"), import_server = require("remix-i18next/server");
                                                                                                                                 ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /projects/material-ui-remix-ts/node_modules/remix-i18next/build/server.js from /projects/material-ui-remix-ts/build/index.js not supported.
Instead change the require of server.js in /projects/material-ui-remix-ts/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/projects/material-ui-remix-ts/build/index.js:69:130)

Another Issue, in i18next.server.ts type is not observed( see screenshot )

Your Example Website or App

https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts

Steps to Reproduce the Bug or Issue

  1. get MUI remix template
  2. add remix-i18next step by step
  3. got error

Expected behavior

Expect to MUI and remix-i18next works together

Screenshots or Videos

Screenshot 2024-03-21 at 10 37 28

Platform

Additional context

No response

zakariamofaddel commented 8 months ago

Having the first issue too with ES module being imported in commonjs. I am trying to add remix-i18next.

The only way I could quickly solve is by adding to my remix-config.js the option serverDependenciesToBundle: "all". But not sure how this impacts the output size.

sergiodxa commented 8 months ago

While remix-i18next itself is ESM only, other packages like i18next-fs-backend may not, you will need to bundle them on the server. Or if you're using CJS you will need to bundle remix-i18next itself.

Related the type issue, most likely you don't have moduleResolution set to Bundler in your tsconfig.json