Why do I get function is not defined after compiling with webpack and babel?

Question

I am trying to compile a javascript project that uses both ES6 and ES5 syntax to ES5 using babel and webpack. In doing so, I keep getting "Uncaught ReferenceError: [function] is not defined".

I have researched the topic on here and other sites but can't seem to find a solution. Here is my code.

test.js

runTest('hello');

test2.js

function runTest(statement) {
    console.log("test running: ", statement);
}

main.js

require('./test2');
require('./test');

bundle.js (where the code is output to)

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),n(2)},function(e,t){},function(e,t){runTest("hello")}]);

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const webpack_rules = [];
const webpackOption = {
    entry: './Scripts/es6/main.js',
    output: {
        path: path.resolve(__dirname, './Scripts/build'),
        filename: 'bundle.js'
    },
    module: {
        rules: webpack_rules
    }
};

let babelLoader = {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }
};
webpack_rules.push(babelLoader);
module.exports = webpackOption;

I know that none of my test code is actually ES6 code. The real code I am trying to compile is a mix of ES5 and ES6 and that part seems to be compiling fine. I also tried adding console.log('test') and console.log('test2') to each of the files and I can see both logs so I know the files are being compiled.

EDIT: In light of Quinten's response, maybe I'm on the wrong track. I'm trying to take all of my JavaScript files (some using ES5 and some using ES6 syntax) and compile them into a single ES5 file that will work on IE11 and newer browsers. Is there something different I should be doing?

Dorward_19068 · Answer

You seem to think require will inject the code from the module in place of the require statement. It doesn't, require() copies the exports from a module and returns them.

So test2.js needs to export the function, and test.js needs to import it. This then makes having a third file pointless.

main.js

const runTest = require("./test1.js");
runTest('hello');

test1.js

function runTest(statement) {
    console.log("test running: ", statement);
}

module.exports = runTest;

Why do I get function is not defined after compiling with webpack and babel?

1 Answers