Built Javascript files from Webpack cannot be used by other ReactJS projects - reactjs

Question

i want to make my own ReactJS Typescript library and use it for other React JS Typescript projects. My library was built with Webpack 4 and has this structure:
|-src
| images
| | logo.svg
| button-component
| | index.tsx
| | styles.less
| container-component
| | index.tsx
| | styles.less
| index.tsx
| styes.less
My tsconfig.json file:
{
"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
}
}
My webpack.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';
Button 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;
Container Component:
// #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;
After build with command: "webpack --env prod --mode production", i copies all the files in the dist folder to other ReactJS Typescript project, import them and use but i have these error messages:
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
...
This is the first line of built index.js file:
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define
I don't know how to correct this since Webpack built my library successfully without any error (just warning about the js file is big after build).
I also have another question: if i splitChunks those dependencies into a vendor.js file, do i need to import it in another project or just import my component from built index.js?