[Bug]: SyntaxError: Named export 'ComponentLoader' not found. The requested module 'adminjs' is a CommonJS module

[jmaric]

Contact Details

No response

What happened?

i have implemented Adminjs in my Nodejs app and when i run it locally it works as expected, but when i try to upload it to Railway server i get:

SyntaxError: Named export 'ComponentLoader' not found. The requested module 'adminjs' is a CommonJS module, which may not support all module.exports as named exports.

Bug prevalence

whenever i upload to Railway server

AdminJS dependencies version

"@adminjs/design-system": "^4.0.3", "@adminjs/express": "^6.0.1", "@adminjs/sequelize": "^4.0.0", "adminjs": "^7.5.2",

What browsers do you see the problem on?

No response

Relevant log output

import { ComponentLoader } from 'adminjs'
^^^^^^^^^^^^^^^
SyntaxError: Named export 'ComponentLoader' not found. The requested module 'adminjs' 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 'adminjs';
const { ComponentLoader } = pkg;

Relevant code that's giving you issues

import { fileURLToPath } from 'url';
import { ComponentLoader } from 'adminjs'

const componentLoader = new ComponentLoader();

const Components = {
    MyDashboard: componentLoader.add('MyDashboard', fileURLToPath(new URL('./components/dashboard.jsx', import.meta.url))),
    // other custom components
}

export { componentLoader, Components }

[dziraf]

It looks to be a Railway integration issue of some kind since we haven't had similar issues with other hosting services. Especially this error:

The requested module 'adminjs' is a CommonJS module, which may not support all module.exports as named exports.

All latest versions of AJS are ESM-only and there's no CJS code in it's releases. My guess is that Railway runs your code through some kind of wrapper that's written in CommonJS.

[jmaric]

i ve had same issue with Heroku and Google console...

[dziraf]

Could you share your tsconfig if it's a Typescript app?

[jmaric]

Hi! Thanks for repy... no it's not Typescript app unfortunately...

On Thu, Mar 21, 2024, 09:57 Rafał Dzięgielewski @.***> wrote:

Could you share your tsconfig if it's a Typescript app?

— Reply to this email directly, view it on GitHub https://github.com/SoftwareBrothers/adminjs/issues/1605#issuecomment-2011673151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCIPZMXOQONCFAGJIKO4XDYZKOHPAVCNFSM6AAAAABB3MSTTGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJRGY3TGMJVGE . You are receiving this because you authored the thread.Message ID: @.***>

[dziraf]

Do you use Babel or any other JS compiler?

Could you try to import everything from adminjs and show the log output?

import * as AdminJSModule from 'adminjs'

console.log(AdminJSModule)

[skocz]

Hi !

try this:

import { ComponentLoader } from 'adminjs'
import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const componentLoader = new ComponentLoader()

const Components = {
    MyDashboard: componentLoader.add('MyDashboard', fileURLToPath(new URL('./components/dashboard.jsx', import.meta.url))),
    // other custom components
}

export { componentLoader, Components }