Uncaught ReferenceError - how to access function bundled by webpack

Question

I'm using https://github.com/sloria/cookiecutter-flask for a project and I'm trying to add a javascript function to a js file that's bundled by webpack and access it from the html. I think I'm missing something basic.

Source files for background:

I'm adding the following code to plugins.js:

function foo () {
    console.log('bar')
}

And trying to call it from an html document to test as follows

<script type="text/javascript">
    foo();
</script>

I can see that my function got bundled, but I can't access it.

And here's the error I get:

I already had to add expose-loader to my webpack.config.js to get jquery to work as per this issue:

score 2 · Accepted Answer · answered Mar 17 '18 at 20:20

In my experiene, when I am using Webpack, I am bundling code into modules, which encapsulates them to that module's scope. Code that I want to be available outside of the module I explicitly export, and then import or require it into the new scope where I want to access it.

It sounds like you are instead wishing for some of your code to be accessible in the global scope, to access it directly from your markup. To do this in the browser, your best bet is to attach it directly to the Window object. Probably first checking to make sure that you aren't overwriting something already at that namespace:

function foo() {
    console.log('bar!');
}

if (!Window.foo) {
    Window.foo = foo;
} else {
    console.warn('Foo is already assigned!');
}

That said, I would recommend you avoid developing in this manner-- polluting the global namespace is usually not a great pattern, and leads to a lot of potential conflict. If you must work in this manner, at least assign an object to a namespace attached to Window where you can put your applications functionality without risking conflicting with other Window properties:

Window.myApp = {
    foo: function () {
        console.log('bar!');
    }
}

Window.myApp.printGreeting = function () {
    console.log('Hello!');
}

// ...etc

Thanks for the quick response Alexander. I'm happy defining a module. What I'm getting stuck on is the syntax. What does a simple module that just has one function that logs a line look like? How do I then import it? In particular, webpack is generating a JS file with a hash so I'm not sure what to put in after from, for example 'import Module from ' — sshevlyagin, Mar 17 '18 at 20:29
@sshevlyagin - it depends on if you're using ES6 syntax or Node module syntax. If you're using ES6, you should check out the [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) pages on MDN. Generally, I would say if you are exporting only a single function from a module you can use `export default myFunction`. Then it can be `import`ed w/ whatever name you want: `import theFunction from './../someFolder/myFunction'`. — Alexander Nied, Mar 17 '18 at 22:27
Thanks Alexander. I did some more experimentation, and it seems the way the webpack is setup the js file I'm adding things to is expecting jquery. I'm going to post how I fixed this in jquery. — sshevlyagin, Mar 18 '18 at 00:54

score 0 · Answer 2 · answered Mar 18 '18 at 01:05

0

I couldn't figure out how to get ES6 syntax to work in the file, kept running into this error:

Here's a workaround based on this related question

answered Mar 18 '18 at 01:05

sshevlyagin

1,310
2
16
26

Uncaught ReferenceError - how to access function bundled by webpack

2 Answers2