@lib/UI An Admin Dashboard is referred by panel de administración

@lib/ui es un paquete de React donde se instala en cualquier aplicación de reacción para proporcionar algo de interfaz de usuario lista para usar.

La aplicación, que es un tablero (APLICACIÓN DE UN SOLO LADO) donde utiliza componentes de interfaz de usuario de @lib/ui .

@lib/ui necesita que se pase alguna configuración desde el Tablero, donde la configuración tiene la forma de un archivo TSX . El @lib/ui carga la configuración como la siguiente,

 import config from '@root/config'

donde @root es un alias de la aplicación.

Intentamos usar @lib/ui en una aplicación NextJS y simplemente hicimos algo como lo siguiente.

 # next.config.js const nextConfig = { webpack: (config, { isServer }) => { config.resolve.alias = { '@root': path.resolve(__dirname, '.'), ...(config.resolve.alias || {}), } }

Y funciona bastante bien. El problema surge al usarlo en The App, que es una aplicación de una sola página.

Estamos tratando de hacer lo que hicimos en la aplicación NextJS usando Craco para agregar la configuración de Webpack a la aplicación.

 #craco.config.js module.exports = { webpack: { alias: { '@root': path.resolve(__dirname, '.'), }, }, plugins: [ { plugin: cracoBabelLoader, options: { includes: [ resolvePackage('node_modules/@lib/ui'), ], }, }, ], }

 { "scripts": { "start": "craco start", } }

Pero no funcionó, y recibí el siguiente error.

 >Failed to compile. >./config.TSX 10:28 >Module parse failed: Unexpected token (10:28) >File was processed with these loaders: >./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js >You may need an additional loader to handle the result of these loaders. >import { plainReducers } from './src/store/states' > export const UiConfig = (): IUiConfig => ({