Uncaught ReferenceError: say is not defined

Question

I try to import my function hello() from hello.js to my page sign_up.liquid. I browserify my main.js to have a bundle.js( browserify ./public/js/main.js -o ./public/js/bundle.js ) but i have an Uncaught ReferenceError. Why I can't use my function hello() in sign_up.liquid ?

--hello.js

var hello = function(){
    console.log('I said Hello')
}

module.exports = hello;

--main.js

const say = require('./hello.js')

--bundle.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
var hello = function(){
    console.log('I said Hello')
}

module.exports = hello;
},{}],2:[function(require,module,exports){
const say = require('./hello.js')

},{"./hello.js":1}]},{},[2]);

--sign_up.liquid

[...]
<script src="../js/bundle.js"></script>
<script>
    say.hello();
<script>

Answer 1

Your issue is because Hello is your export, and so on your import hello() becomes say.

If you used just

say() 

you should get the value of the hello() function.

Alternatively, you can use the destructuring method to give your export an alias.

Something like this:

const { hello: say } = require('./hello.js');

More information on Destructuring here Specifically, you may want to check out the section named: Assigning to new variable names about half way down the page.