0

I'm really new to Webpack + Babel and wanted to give this a try on my project, however when I run my "npm run build" to run the webpack.production.config.js file I've included, it doesn't seem to be creating the necessary polyfills for IE11 in my scripts.

I've included one of the JS files I'm trying to polyfill, my package.JSON, .babelrc and webpack.production.config.js below:

** package.JSON **

{
  "name": "nutrifast",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js"
  },
  "author": "Jonas Schmedtmann",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.0.7",
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

** webpack.production.config.js **

const path = require('path'); 

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.min.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: ''
    },
    mode: 'production',
    module: {
        rules: [ 
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ '@babel/preset-env' ]
                    }
                }
            }
        ]
    }
}

** .babelrc **

{ 
    "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "entry"
          }
        ]
    ]
}

** ./src/main.js **

// Header Menu 
{
    const menuTrgr = document.querySelector("a[data-menu-toggle]");         
            
    const menuToggle = function() {
        menuTrgr.classList.contains("active") ? menuTrgr.classList.remove("active"): menuTrgr.classList.add("active");
    };
            
    menuTrgr.addEventListener("click", menuToggle);
}

// Populates Basket from local
if(reset_basket !== 1) {
    (function() {
        if(localStorage) {          
            // Populates the meals and totals       
            const totals = JSON.parse(localStorage.getItem("totals"));  
            if(totals) {
                const basketTotal = totals.mealAmount > 0 ? totals.mealAmount : 0;      
                document.getElementById("basket-total").innerHTML = `<b>Meals</b> <i>${basketTotal}</i>`;
            }       
        }
    })();
}

If someone could point me in the right direction, it would much appreciated.

Nathan
  • 58
  • 5
  • Does it work if you remove `presets: [ '@babel/preset-env' ]` from the webpack config? – loganfsmyth Dec 15 '20 at 01:41
  • Yeah removing that seemed to work thanks. However, I can not get this to work for <= IE11 no matter the amount of polyfills included. Have changed this slightly to work from a babel.config.js file now but still getting the unhelpful "Syntax error" on IE11. – Nathan Dec 15 '20 at 08:22

0 Answers0