[BUG] ESM/CJS error with `@refinedev/devtools`

[bombillazo]

Describe the bug

Hey there again.

Seems like Ive found another ESM/CJS issue

⨯ file:///Users/Projects/Code/app/node_modules/@refinedev/devtools/dist/index.mjs:2

SyntaxError: Named export 'getParentOfFiber' not found. The requested module '@aliemir/dom-to-fiber-utils' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@aliemir/dom-to-fiber-utils';
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {
  page: '/auth/signup'
}

Steps To Reproduce

Upgrade to the latest refine packages and run next.js app.

Expected behavior

No error

Packages

• @refinedev/devtools "1.1.37"

Additional Context

No response

[aliemir]

Hey @bombillazo, sorry for the issue! As you can see it from the error, it was about the @aliemir/dom-to-fiber-utils package and its configuration for the ESM/CJS builds. It was still trying to serve cjs files or the esm builds were interpreted as cjs and caused this error.

I've released a fix in @aliemir/dom-to-fiber-utils with 0.5.0 version and opened up a PR for the version bump 🙏

[aliemir]

Update on this issue:

I've released @aliemir/dom-to-fiber-utils with 0.4.1 to make it available instantly for the current releases. Can you try to re-install the packages (removing the package-lock.json might be required) and validate if the issue is resolved?

[bombillazo]

Will do, Ill report back soon

[bombillazo]

Hey @aliemir , for this to work, I had to manually set the dependency version to 0.4.1 in the package-lock.json file. Deleting the file was not enough for the npm install command to fix this.

I am getting another error still, though:

⨯ Error: Cannot find module '/Users/Projects/Code/app/node_modules/next/router' imported from /Users/Projects/Code/app/node_modules/@refinedev/nextjs-router/dist/pages.mjs
Did you mean to import next/router.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/_next/static/webpack/bd114e6d6f2223a0.webpack.hot-update.json'
}
``

[aliemir]

@bombillazo can you share your deps and versions for Refine packages, Next.js and typescript? In your tsconfig file, what is set for moduleResolution?

[bombillazo]

@aliemir sure thing!

# from package.json
"@refinedev/antd": "^5.37.6",
"@refinedev/cli": "^2.16.29",
"@refinedev/core": "^4.49.0",
"@refinedev/devtools": "1.1.37",
"@refinedev/inferencer": "^4.6.0",
"@refinedev/kbar": "^1.3.8",
"@refinedev/nextjs-router": "6.0.1",
"@refinedev/simple-rest": "^5.0.4",
"next": "^14.1.4",
"typescript": "^5.4.4"

# from tsconfig.json
"module": "ESNext",
"moduleResolution": "node",

[bombillazo]

Was this helpful?

[aliemir]

Hey @bombillazo, just opened up two PRs to fix this issue with the next/* imports in @refinedev/nextjs-router. About the prior issue with @aliemir/dom-to-fiber-utils, I've tried in my local to see if it installs the latest version or not, and it installed 0.4.1 in my setups. Can your case be related with distribution of the version? Since you've tested it short time after the release it might have end up installing the previous version 🤔 Not sure but I'll try to validate this and open up a PR if needed for the version bump.

[bombillazo]

@aliemir Hey, maybe I had something cached. Im hoping the router package fix is merged soon!

[bombillazo]

Hey, any update on this issue? I tried "@refinedev/nextjs-router": "^6.0.2", but I'm still getting this error:

⨯ Error: Cannot find module '/Users/Projects/Code/app/node_modules/next/router' imported from /Users/Projects/Code/app/node_modules/@refinedev/nextjs-router/dist/pages.mjs
Did you mean to import next/router.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:946:10)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/_next/static/webpack/bd114e6d6f2223a0.webpack.hot-update.json'
}
``