Встроенные Javascript файлы из Webpack не могут использоваться другими ReactJS проектами

Question

Я хочу создать свою собственную ReactJS библиотеку Typescript и использовать ее для других проектов React JS Typescript. Моя библиотека была построена с использованием Webpack 4 и имеет такую ​​структуру:

|-src
|  images
|  |  logo.svg
|  button-component
|  |  index.tsx
|  |  styles.less
|  container-component
|  |  index.tsx
|  |  styles.less
|  index.tsx
|  styes.less

Мой tsconfig. json Файл:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": false,
    "baseUrl": ".",
    "strict": true,
    "paths": {
      "@/*": ["src/*"]
    },
    "declaration": true,
    "outDir": "./dist/",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "strictNullChecks": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitOnError": false
  }
}

Мой веб-пакет. config. js:

const path = require("path");
const WebpackMd5Hash = require("webpack-md5-hash");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: {
    main: "./src/index.tsx"
  },
  resolve: {
    extensions: [".tsx", ".js"]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "index.js",
    libraryTarget: "umd"
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
        parallel: true,
        cache: false,
        extractComments: false,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }
    )]
  },
  //devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(less|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(path.resolve(__dirname, '../dist'), {
      root: process.cwd()
    }),
    new MiniCssExtractPlugin({
      filename: "styles.css"
    }),
    new WebpackMd5Hash()
  ]
};

index.tsx:

export { default as ButtonComponent } from './button-component';
export { default as ContainerComponent } from './container-component';

Компонент кнопки:

// @ts-nocheck
import React from 'react';
import { Button } from 'antd';

interface ButtonComponentState { }
interface ButtonComponentProps {
    text: any
}


class ButtonComponent extends React.Component<ButtonComponentProps, ButtonComponentState> {
    constructor(props: any) {
        super(props);
    }
    render() {
        return(<Button type={"primary"}>{this.props.text}</Button> )
    }
}

export default ButtonComponent;

Компонент контейнера:

// @ts-nocheck
import React from 'react';
import { Card } from 'antd';
import { ButtonComponent } from '../button-component';

interface ContainerComponentState { }
interface ContainerComponentProps {
    title: string
    width: number
    data: any
    textBtn: any
}


class ContainerComponent extends React.Component<ContainerComponentProps, ContainerComponentState> {
    constructor(props: any) {
        super(props);
    }
    render() {
        return(
            <Card title={this.props.title} bordered={false} style={{ width: this.props.width }}>
                {this.props.data}
                <ButtonComponent text={this.props.textBtn}/>
            </Card>
        )
    }
}

export default ContainerComponent;

После сборки командой: "webpack --env prod --mode production", я копирую все файлы в папка dist в другой ReactJS проект Typescript, импортируйте их и используйте, но у меня есть следующие сообщения об ошибках:

Line 1:1:       Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:123:     'define' is not defined                                                no-undef
  Line 1:134:     'define' is not defined                                                no-undef
  Line 1:520:     Expected an assignment or function call and instead saw an expression  no-unused-expressions
...

Это первая строка построенного индекса. js файл:

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define

Я не знаю, как это исправить, поскольку Webpack успешно создал мою библиотеку без каких-либо ошибок (только предупреждение о том, что файл js большой после сборки).

У меня также есть другой вопрос : если я разделяю эти зависимости в файл вендора. js, нужно ли мне импортировать его в другой проект или просто импортировать мой компонент из встроенного индекса. js?