SoftwareBrothers / adminjs

AdminJS is an admin panel for apps written in node.js
https://adminjs.co
MIT License
8.26k stars 665 forks source link

Unable to import css #733

Closed asimaranov closed 3 years ago

asimaranov commented 3 years ago

I want to use react-toastify (https://github.com/fkhadra/react-toastify) at a custom component. It's instruction suggests to import css file like import 'react-toastify/dist/ReactToastify.css';. When I try to add this import to a adminbro component, it raises

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:9858:16)
    at tryParse (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:9739:23)
    at Module.setSource (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:10165:19)
    at ModuleLoader.addModuleSource (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:18335:20)
    at async ModuleLoader.fetchModule (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:18391:9)
    at async Promise.all (index 2)
    at async ModuleLoader.fetchStaticDependencies (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:18416:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/andrey/WebstormProjects/untitled2/node_modules/rollup/dist/shared/rollup.js:18393:9)

I've tried several solution, but none worked. Simple example that reproduces the error index.js

const AdminBro = require('admin-bro')
const AdminBroExpress = require('@admin-bro/express')

const express = require('express')
const app = express()

const adminBro = new AdminBro({
    databases: [],
    rootPath: '/admin',
    dashboard: {
        handler: async () => {

        },
        component: AdminBro.bundle('./my-dashboard-component')
    }
})

const router = AdminBroExpress.buildRouter(adminBro)

app.use(adminBro.options.rootPath, router)
app.listen(8080, () => console.log('AdminBro is under localhost:8080/admin'))

my-dashboard-component.tsx

import {BasePropertyProps} from "admin-bro";
import * as React from "react";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';  // This raises error

const MyDashboard = (props: BasePropertyProps) => {
    toast.error('Error occurred', {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
    });
    return (
        <div>Hello</div>
    )
}
export default MyDashboard

package.json

  "name": "untitled2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "admin-bro": "^3.3.1",
    "express": "^4.17.1",
    "express-formidable": "^1.2.0",
    "express-session": "^1.17.1",
    "react-toastify": "^6.2.0",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
    "@admin-bro/express": "^3.1.0"
  }
}
SimonB407 commented 3 years ago

Due to bundler configuration it's not possible to import css in custom components for admin. What you could try is to use https://adminbro.com/AdminBroOptions.html#Assets to pass some css.