Refused to apply style from [URL/css/admin.js] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

[Ameendarwan]

Describe the bug
I am using the custom CSS in AdminJs and it is working fine on localhost but it's not working after deployment, I have created a public folder in the root directory which contains CSS. [ public/css/admin.css]. After deployment it gives error on console like that:
"Refused to apply style from [URL/css/admin.js] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled"

Installed libraries and their versions
"@adminjs/design-system": "^2.1.2",
"@adminjs/express": "^4.0.3",
"@adminjs/sequelize": "^2.1.5",
"@adminjs/upload": "^2.0.2",
"adminjs": "^5.7.1",
"express": "^4.17.1",
"express-formidable": "^1.2.0",
"express-session": "^1.17.2",
"express-validator": "^6.12.1",

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Custom CSS should work after deployment on the server.

Screenshots

AdminJSOptions with schema
AdminJS.registerAdapter(Adapter);

const adminJsOptions = {
resources: [
userResource,
pageResource,
paymentResource,
categoryResource,
activityResource,
locationResource,
operatorResource,
activityTypeResource,
activityTestimonials,
adminsResource,
],
rootPath: '/',
branding: {
companyName: 'Bookado',
logo: 'https://cdn.bookado.uk/logo.png',
favicon: 'https://cdn.bookado.uk/favicon.png',
softwareBrothers: false,
},
locale: {
translations: {
messages: {
loginWelcome: '', // the smaller text
},
labels: {
loginWelcome: '', // this could be your project name
},
resources: {
Payments: {
properties: {
userId: 'Email ',
},
},
Activities: {
properties: {
location_id: 'Location ',
operator_id: 'Operator ',
activity_type_id: 'Type ',
},
},
},
},
},
assets: { styles: ['css/admin.css'] },
};
const adminJs = new AdminJS(adminJsOptions);

// eslint-disable-next-line import/no-mutable-exports
let AdminRouter = null;

// In order to avoid distraction from being logging out during development
if (process.env.NODE_ENV === 'local') {
AdminRouter = AdminJSExpress.buildRouter(adminJs);
} else {
// In other environments secure the Admin dashboard
AdminRouter = AdminJSExpress.buildAuthenticatedRouter(
adminJs,
{
authenticate: async (email, password) => {
const admin = await Admins.findOne({ where: { email } });
if (admin.role === 'super-admin') return admin;
if (admin && admin.role !== 'super-admin') {
const matched = await bcrypt.compare(password, admin.password);
if (matched) {
return admin;
}
}
return false;
},
cookiePassword: 'some-secret-password-used-to-secure-cookie',
},
null,
{
resave: false,
saveUninitialized: true,
rolling: true,
cookie: {
httpOnly: true,
maxAge: 30 * 24 * 60 * 60 * 1000,
},
}
);
}

Desktop (please complete the following information if relevant):

• OS: [e.g. Window]
• Browser [e.g. chrome]

Smartphone (please complete the following information if relevant):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[dziraf]

I visited your admin URL and the CSS looks to be loaded though

[Ameendarwan]

Yes, I've resolved this issue. Basically, the public folder was outside the 'src' folder'. what I did I've pushed it inside the 'src'. Besides, I've done following changes:
app.use(express.static(path.join(__dirname, 'public'))); ( Index.js )
assets: { styles: ['/css/admin.css'] }, ( adminJsOptions )

Anyway, thanks for your quick response.