Using XAxis and YAxis Generates an error #3311

YaminoYuki · 2023-02-02T16:44:56Z

YaminoYuki
Feb 2, 2023

Hello
I am using recharts for a proof of concept so I can use it in a large project
I am using:

react : 18.2.0
recharts: 2.3.2

I am using my own webpack and babel configuration :
my webpack config
1- common:

const path = require("path");
module.exports = {
  entry: {
    main: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs"
          }
        }
      },
      {
        test: /\.(m?js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'         
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

dev:

const path = require("path");
const common = require("./webpack.common");
const {merge} = require("webpack-merge");
let HtmlWebpackPlugin = require("html-webpack-plugin");
const { webpack } = require("webpack");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader" 
        ]
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ]
      }
    ]
  }
});

prod:

const path = require("path");
const common = require("./webpack.common");
const {merge} = require("webpack-merge");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const cssMinimizer = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, "build")
  },
  performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
},
  optimization: {
    minimizer: [
      new cssMinimizer(),
      new TerserPlugin(),
      new HtmlWebpackPlugin({
        template: "./src/template.html",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ],
    splitChunks: {
      chunks:'all',
      maxSize: 5000000,
      minChunks:1,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
        }
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css'}),
    new CleanWebpackPlugin(),
    new LodashModuleReplacementPlugin //needs both lodash-wepback-plugin and babel-plugin-lodash
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader", 
          "sass-loader" 
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ]
      }
    ]
  }
});

while babel.config.js is :

module.exports = {
  presets :
          [
            '@babel/preset-env',
            ['@babel/preset-react',
            {"runtime": "automatic"}],
            '@babel/preset-typescript',
          ],
  plugins : ['@babel/plugin-proposal-class-properties','lodash']
  
}

my recharts code is:

 return (
    <div>
      <LineChart width={500} height={300} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
      </LineChart>
      <Link to="/newdashboard">
        <button className="btn">ADD Dashboard</button>
      </Link>
    </div>

with the correct imports

everything is working fine with development, while for production I am getting this unclear error:

TypeError: e is undefined
value file:///D:/Scase/script/script-devenv-poc/script-devenv-poc-frontend/build/vendors.a4b073e4b6d726ada73c.bundle.js:2

if I remove the use of XAxis and YAxis every thing is working correctly

is there something special about these two components ? should I configure something special in production mode for webpack or add for babel another plugin ?