Problems using webpack and two.js

Question

I am writing a web application using webpack and two.js. For completeness, these are my dependencies:

"devDependencies": {
  "jasmine-core": "^2.8.0",
  "karma": "^1.7.0",
  "karma-chrome-launcher": "^2.2.0",
  "karma-jasmine": "^1.1.0",
  "karma-webpack": "^2.0.4",
  "webpack": "^3.5.5"
},
"dependencies": {
  "two.js": "^0.6.0"
}

I have the following webpack.config.js:

const path = require('path');
module.exports = {
    entry: './myentry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'out')
    }
};

The entry file myentry.js just imports two.js:

import * as two from "two.js";

Bundling succeeds...

Library two.js is part of my npm dependencies, so it can be found among my local node modules in node_modules folder. When I go ahead and create the bundle:

webpack --config webpack.config.js

It succeeds and I get the following output:

Hash: 5e762def59fa65ff8487
Version: webpack 3.5.5
Time: 468ms
               Asset    Size  Chunks                    Chunk Names
bundle.js  258 kB       0  [emitted]  [big]  main
   [0] ./myentry.js 271 bytes {0} [built]
    + 1 hidden module

The generated bundle is available here.

But... running fails:

So I use the bundle in my HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My stuff</title>
    <script type="module" src="./out/bundle.js"></script>
</head>
<body></body>
</html>

When I open the page in Chrome (I use http-server to avoid CORS related issues), I get these errors in F12 Tools:

bundle.js:1674 Uncaught TypeError: Cannot read property 'Backbone' of undefined
    at bundle.js:1674
    at Object.<anonymous> (bundle.js:1831)
    at __webpack_require__ (bundle.js:20)
    at Object.root (bundle.js:72)
    at __webpack_require__ (bundle.js:20)
    at Object.defineProperty.value (bundle.js:63)
    at bundle.js:66

What is happening?

What is `bundle-myentry.js`? Shouldn't it be just `bundle.js`? — ninesalt, Aug 26 '17 at 21:44
Yes, in order to remove noise from original project I created a minimal working version, but copied stuff from wrong application... Just fixed — Andry, Aug 26 '17 at 21:48
Its a little hard for us to help you if you dont post the full files. Giving us very little to work with here. Can you share a paste of the bundle file? — ninesalt, Aug 26 '17 at 22:00
But the bundle is big, cannot paste it here... I am going to put it in some share and give the link... — Andry, Aug 26 '17 at 22:19
Link added to the bundle that is generated. I have also added more info about the general setup with versions of my dependencies. — Andry, Aug 26 '17 at 22:22
Looks like BackboneJS is required. You probably have to provide it as a plugin? https://webpack.js.org/plugins/provide-plugin/ — Terry, Aug 26 '17 at 22:28
I understand that this dependency is missing, but the library (two.js, I mean the doc) does not mention that. It is supposed to be self-consistent and provide all dependencies bundled. It does it with `underscore` for example — Andry, Aug 26 '17 at 22:32

score 0 · Answer 1 · answered Aug 27 '17 at 07:48

Looks like the issue is the way I am referencing the bundle in HTML:

<script type="module" src="./out/bundle.js"></script>

That is not correct as the generated bundle is not an ES6 modules :(

<script type="application/javascript" src="./out/bundle.js"></script>

This makes the error go away. It actually opens up to other errors, but they are completely unrelated to backbone.

Problems using webpack and two.js

Bundling succeeds...

But... running fails:

1 Answers1