set of React components is referred by @lib/UI An Admin Dashboard is referred by App`

The @lib/ui is a React package where it is installed in any react app to provide some UI out of the box.

The App which is a Dashboard (SINGLE SIDE APPLICATION) where it uses UI components from @lib/ui.

The @lib/ui needs some configuration to be passed from the Dashboard, where the configuration is in the form of a TSX file. The @lib/ui loads the configuration like the following,

import config from '@root/config'

where @root is an Alias to the App.

We tried to use the @lib/ui in a NextJS app and by simply doing something like the following.

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

And it works pretty much fine. The problem arises when using it in The App, which is a single-page application.

We're trying to do as we did in the NextJS application by using Craco to add Webpack config to the App`

#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",
  }
}

But it did not work out, and I got the following 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 => ({