Here is a github repo with the code https://github.com/tomcatfever/balls.
I just want to draw a single ball, anywhere on the screen. Right now, I get an error on line 66 of the bundle.js file.
How are you wanting to split these files? Also, why?
Anyway at all and then combining using webpack. Why? To learn how.
As-is, your webpack configuration already combines both
bundle.js. No other steps are required to combine them. When a person wants to “split” files in compilation, they usually want to have certain parts of their app grouped together to make updating and downloading easier. For instance, if you were to use React in your app, you don’t need that in your
I am aware. As stated above, bundle.js file only produces errors. I cannot seem access any of the classes, functions or variables in a useful way.
I cannot get one file to work with the other no matter what I try. When I have more code and more files, I cannot image things will be different with a larger number of files and code.
I want to know what specifically I am doing wrong here to learn from this mistake.
After trying to understand what I’m doing wrong for so long, I thought I would try asking for help.
I can post a live version of this nonfunctional webapp to surge.sh if you think that would help facilitate an answer.
No need, I can clone your repo from Github.
The mistake was using the wrong import syntax for your export in
const ball = require('./ball');
import Ball from './ball'
var testBall = new Ball();
export default testBall;
export default Ball;
It’s technically possible to mix the ES6
import/export syntax with the
requirejs syntax, it’s not recommended.
Making these changes doesn’t make a material difference. From the developer console, I cannot access
Ball nor can I access
All I get it the same error:
Uncaught reference error undefined.
Although this way it doesn’t point to any line in bundle.js as a specific error.
You’re not meant to access modularized code from the console. One of the stated goals of modularization is to encapsulate code in such a way that it doesn’t contaminate the global scope.
import a module into your script, you have access to it from within that script. If you make the modifications from above, you’ll be able to use the
Ball constructor in
If I try
var test = new Ball(); I get an
undefined error. This seems at odds with the whole point of using imports and bundling files together.
wait… i think i get it. i have to call each constructor and function into a new variable in the main.js like this:
import Ball from './ball';
var theBall = new Ball();
var drawBall = theBall.draw();
That’s it exactly, though you don’t need to concatenate
drawBall in your
I know. I put it there to see if it would print
undefined into the browser. It does.