fix: don't add extra meta tag if it exists (#1802)

alexander-akait · web-flow · commit 8f927889a3a9 · 2023-06-10T22:27:54.000+03:00
diff --git a/index.js b/index.js
@@ -76,7 +76,8 @@ class HtmlWebpackPlugin {
       // Default metaOptions if no template is provided
       if (!userOptions.template && options.templateContent === false && options.meta) {
         const defaultMeta = {
-        // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
+          // TODO remove in the next major release
+          // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
           viewport: 'width=device-width, initial-scale=1'
         };
         options.meta = Object.assign({}, options.meta, defaultMeta, userOptions.meta);
@@ -966,8 +967,15 @@ function hookIntoCompiler (compiler, options, plugin) {
     const htmlRegExp = /(<html[^>]*>)/i;
     const headRegExp = /(<\/head\s*>)/i;
     const bodyRegExp = /(<\/body\s*>)/i;
+    const metaViewportRegExp = /<meta[^>]+name=["']viewport["'][^>]*>/i;
     const body = assetTags.bodyTags.map((assetTagObject) => htmlTagObjectToString(assetTagObject, options.xhtml));
-    const head = assetTags.headTags.map((assetTagObject) => htmlTagObjectToString(assetTagObject, options.xhtml));
+    const head = assetTags.headTags.filter((item) => {
+      if (item.tagName === 'meta' && item.attributes && item.attributes.name === 'viewport' && metaViewportRegExp.test(html)) {
+        return false;
+      }
+
+      return true;
+    }).map((assetTagObject) => htmlTagObjectToString(assetTagObject, options.xhtml));
 
     if (body.length) {
       if (bodyRegExp.test(html)) {
diff --git a/spec/basic.spec.js b/spec/basic.spec.js
@@ -1958,6 +1958,21 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">/], null, done);
   });
 
+  it('avoid duplicate meta tags for default template', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      context: path.join(__dirname, 'fixtures'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin()
+      ]
+    }, [/<head><meta charset="utf-8"\/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><title>src\/index\.ejs<\/title><script defer="defer" src="index_bundle.js"><\/script><\/head>/], null, done);
+  });
+
   it('adds a meta tag with short notation', done => {
     testHtmlPlugin({
       mode: 'production',
diff --git a/spec/fixtures/src/index.ejs b/spec/fixtures/src/index.ejs
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
     <title>src/index.ejs</title>
   </head>
   <body>
