Open titanve opened 2 months ago
ZeeshanTamboli
commented
2 months ago Please provide a reproduction using a GitHub repository or a live example on CodeSandbox or StackBlitz. Did you check this Stack Overflow thread: https://stackoverflow.com/questions/64453859/directory-import-is-not-supported-resolving-es-modules-with-node-js?
brijeshb42
commented
2 months ago This should be possible after we release esm support. @DiegoAndai will have more answers. Right now, we are blocked on some issues from Next.js.
github-actions[bot]
commented
2 months ago Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.
titanve
commented
2 months ago @DiegoAndai Hi!
How long do you think is it going to take for you to release the esm support?
Thanks!
DiegoAndai
commented
2 months ago Hi! We tried to implement it for v6, but it was not possible due to the Next.js issue mentioned: https://github.com/vercel/next.js/issues/65056. We're currently waiting for a response from the Next.js team, so sadly I cannot provide an estimated date. We'll try to do it ASAP, it's a priority for us.
Marked as on hold, blocked by: https://github.com/mui/material-ui/issues/30671
titanve
commented
2 months ago @DiegoAndai Thank you! I will be waiting :)
titanve
commented
1 month ago @DiegoAndai Hi!
FYI: this is the issue that I am currently facing:
I have this in the file app/common/Theme/theme.tsx:
import { red } from "@mui/material/colors";And it is throwing the following error:
Error: Directory import '/app/node_modules/@mui/material/colors' is not supported resolving ES modules imported from /app/build/index.js
Did you mean to import @mui/material/node/colors/index.js?
at new NodeError (node:internal/errors:405:5)
at finalizeResolution (node:internal/modules/esm/resolve:321:11)
at moduleResolve (node:internal/modules/esm/resolve:980:10)
at defaultResolve (node:internal/modules/esm/resolve:1193:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
at link (node:internal/modules/esm/module_job:75:36)I have tried all the suggestions like this one: Did you mean to import @mui/material/node/colors/index.js? but none have worked so far.
Thanks!
DiegoAndai
commented
1 month ago @titanve you should use serverModuleFormat: 'cjs' in your vite config, like this: https://github.com/mui/material-ui/blob/next/examples/material-ui-remix-ts/remix.config.js#L10. Do you have this?
If not, may I ask you to share your remix config here? Thanks 😊
titanve
commented
1 month ago Hi @DiegoAndai
I haven't installed vite yet. Should I install it as part of the migration process? I think is not necessary, is it?
Thanks!
DiegoAndai
commented
1 month ago Hey @titanve!
Remix uses Vite, so you shouldn't have to install it separately; it should already be installed. You should have a config file called remix.config.js, and in there you should have the following setting:
serverModuleFormat: 'cjs',(besides your other config options).
Let me know if that works 😊. Our example of a remix app might be a good guide for your app's setup: https://github.com/mui/material-ui/tree/next/examples/material-ui-remix-ts
titanve
commented
3 weeks ago @DiegoAndai hi!
Sorry for the late reply! This is my remix.config.js file content:
/**
* @type {import('@remix-run/dev').AppConfig}
*/
export default {
ignoredRouteFiles: ["**/*.css"],
// serverModuleFormat: "esm",
serverModuleFormat: 'cjs', <--- ADDED THIS LINE AS SUGGESTED
// serverPlatform: "node",
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",
// publicPath: "/build/",
// future: {
// v2_dev: true,
// },
serverDependenciesToBundle: [
///^remix-i18next.*/,
///^remark.*/,
///^unified.*/,
//"@sindresorhus/slugify",
"remix-i18next",
],
};I got this error:
[info] building...
[info] built (13.2s)
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 '/app/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///app/build/<stdin>:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
at ModuleLoader.import (node:internal/modules/esm/loader:337:24)
at file:///app/server.js:49:22I have this in my package.json:
"type": "module",
BrokenHead
commented
2 weeks ago I googled to come here with the same error and I hope this context will help someone
but for @titanve I was not sure if It would work for you. because I followed npx create-remix@latest (for you should be around remix@v2.8.1 for node 18) : https://remix.run/docs/en/main/start/quickstart
it gen vite.config.ts not an old remix.config.js : https://remix.run/docs/en/main/file-conventions/vite-config
I didn't add serverModuleFormat: 'cjs'
but solve by adding '@mui/material', '@mui/system', etc.. to ssr (for you it should be serverDependenciesToBundle) like this
export default defineConfig({
ssr: {
noExternal: [
/^remix-utils.*/,
"@mui/system",
"@mui/icons-material",
"@mui/lab",
"@mui/material",
"@mui/styles",
"@mui/x-date-pickers"
],
},
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
],
});@titanve, could you share your project so I can debug it on my side? For example, upload it to github and share the link. This would be very helpful and speed up the process.
Hello, I'm upgrading my remix application from version 1 to version 2 and I am getting this error:
I haven't found any possible solution. What should I do?
This is my
package.jsonfile:Search keywords: