Error when connecting my ui kit to my project

39 Views Asked by At

The issue arises when connecting to my project, and I encounter the following error: enter image description here

Here is the webpack.config.js from my UI kit:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { aliases } = require('./config/aliases');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const TerserPlugin = require('terser-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  const config = {
    mode: argv.mode || 'production',
    entry: './src/index.ts',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist'),
      libraryTarget: 'umd',
      clean: true,
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      alias: {
        ...aliases,
      },
    },
    externals: {
      react: 'react',
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.svg$/,
          loader: 'svg-inline-loader',
        },
        {
          test: /\.(ts|tsx)$/,
          use: ['ts-loader'],
          exclude: /node_modules/,
        },
      ],
    },
    plugins: [
      isDevelopment && new BundleAnalyzerPlugin(),
      new MiniCssExtractPlugin({
        filename: 'styles.css',
      }),
    ],
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            format: {
              comments: false,
            },
            keep_classnames: true,
            keep_fnames: true,
          },
          extractComments: false,
        }),
        new OptimizeCssAssetsPlugin(),
      ],
    },
  };

  return config;
};

I suspect the issue lies in the webpack configuration. I have already attempted to address the problem by modifying the webpack.config file (removing various optimizations), but the error persists. I've also experimented with changing imports in the project.

If anyone has encountered a similar issue or has suggestions for resolving it, I would greatly appreciate your assistance. If you believe the problem might be elsewhere, please let me know, and I'll provide the relevant code. Additionally, if someone has a well-written UI kit using React and webpack, I would be interested in analyzing it to identify and fix the bug in my project.

  1. I rewrote webpack.config (removed various optimizations) and the error remained.
  2. Played with changing imports in the project
0

There are 0 best solutions below