How can I make sure Webpack doesn't create duplicate data?

I'm currently having a problem where if I build my webpack for development(probably have the same in production), that I see duplicate meta tags. When I open up the browser inspector I also see duplicate react components within my code. I'm assuming there's something going on with my webpack.config.js.

Here's my webpack code

module.exports = { 
    mode: 'development',
    devtool: 'source-map',
    entry: {
        
        aboutme: [
            path.resolve(__dirname,'src/about-me.js'),
        ]
    },
    resolve: {
        modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
    }
}

My React Code

import { createRoot } from 'react-dom/client';
import './index.css';
import AboutMePage from './pages/aboutme';


const aboutMeCont = document.getElementById('about-me-root');
const aboutMeRoot = createRoot(aboutMeCont);
aboutMeRoot.render(<AboutMePage />);

HTML Input

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><%= htmlWebpackPlugin.options.title %></title>
      <%= htmlWebpackPlugin.tags.headTags %>
</head>

Here's the html output that I am getting:

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="">
      <meta name="viewport" content="">
      <meta name="author" content="">
      <meta name="og:title" content="">
      <meta name="twitter:title" content="">
      <meta name="og:image" content="">
      <meta name="twitter:image" content="">
      <meta name="description" content="">
      <meta name="og:description" content="">
      <meta name="twitter:description" content="">
      <meta name="twitter:card" content="">
      <meta name="twitter:site" content="">
      <meta name="og:url" content="">
      <meta name="og:type" content="">
      <link rel="icon" href="favicon.ico">
      <script defer src="aboutme.js"></script>
      <meta name="author" content="">
      <meta name="og:title" content="">
      <meta name="twitter:title" content="">
      <meta name="og:image" content="">
      <meta name="twitter:image" content="">
      <meta name="description" content="">
      <meta name="og:description" content="">
      <meta name="twitter:description" content="">
      <meta name="twitter:card" content="">
      <meta name="twitter:site" content="">
      <meta name="og:url" content="">
      <meta name="og:type" content="">
      <link rel="icon" href="favicon.ico">
      <script defer src="aboutme.js"></script>
   </head>

Here's the browser output

How can I make sure Webpack doesn't create duplicate data?

0 Answers