1

I'm just getting started with Webpack & Babel to take advantage of exporting ES6's modules.

My build setup generates build/main.build.js used in index.html but browser console shows error: Uncaught ReferenceError: calculateInterest is not defined

As, I'm new to this, I'm not sure where the problem actually lies, is it in the my webpack.config.js or package.json setup or the exporting and importing modules or in the compiled build/main.build.js.

Can anybuddy help me get this setup right. Here are the build files.

package.json

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "A shot at learning WebPack",
  "main": "index.html",
  "scripts": {
    "start": "http-server",
    "webpack": "webpack"
  },
  "keywords": [
    "webpack",
    "learn-webpack"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.16.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "http-server": "^0.11.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0"
  }
}

Webpack.config.js

const path = require('path') 

module.exports = {
    entry: './scripts/main.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'main.bundle.js'
    },

    module: {
         rules: [
             {
                 test: /\.js$/,
                 use: [{
                    loader: 'babel-loader',
                    query: {
                         presets: ['es2015']
                    }
                 }]
             }
         ]
     },
     optimization: {
        minimize: false
     },

     mode: 'development',

     stats: {
         colors: true
     }
 };

Index.html

<head>
    <title>Babel Learning</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="build/main.bundle.js" type="text/javascript"></script> 
</head>
<body onload="init()">

    <button id="btn">Calculate Interest</button>

    <div id="result"></div>

<script>
    function init() {
        var btn = document.getElementById('btn')
        var result = document.getElementById('result')


        btn.addEventListener('click', function(){
            var interest = calculateInterest(3000,29,1)
            result.innerHTML = interest
        })
    }
</script>

</body>
</html>

scripts/main.js

import getSI from './js/getSI.js'

scripts/js/getSI.js

export function calculateInterest(principal, rate, time) {
    var interest = (principal * rate * time) / 100
    return interest
}

Thanks for your help. Much appreciated.

appu

appu
  • 471
  • 1
  • 8
  • 26

1 Answers1

0

You can export the functions you want to from main.js:

  import { calculateInterest } from './js/getSI.js';
  export { calculateInterest };

and change your webpack output settings to 

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'main.bundle.js',
    libraryTarget: 'this',
    library: 'LearnWebpack'
  },

In doing so you will get LearnWebpack available in browser

  <script>
  function init() {
    var btn = document.getElementById('btn')
    var result = document.getElementById('result')
    btn.addEventListener('click', function() {
      var interest = LearnWebpack.calculateInterest(3000, 29, 1)
      result.innerHTML = interest
    })
  }
  </script>

Here you can find details about webpack's libraryTarget available settings. From what I know these settings (library) are for libraries but it should get your experiments going.

I found a similar issue in this older post - same idea but the used settings are for webpack@2 (I think) Hope it helps

bamse
  • 4,243
  • 18
  • 25
  • hi, ur suggestions did not work for me. Have u tried with my setup (files) at your end? – appu Jul 23 '18 at 22:28
  • I did try it. Sorry to hear it is not working for you. Are you getting the same error or a new one? – bamse Jul 24 '18 at 03:57
  • I get `Uncaught TypeError: LearnWebpack.calculateInterest is not a function` – appu Jul 24 '18 at 10:37