Comments (17)
Here are those first lines of backbone.js creating the issue:
(function(root, factory) {
// Set up Backbone appropriately for the environment.
if (typeof exports !== 'undefined') { // why is exports === undefined?
// Node/CommonJS, no need for jQuery in that case.
factory(root, exports, require('underscore'));
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['underscore', 'jquery', 'exports'], function(_, $, exports) { // LINE 15
// Export global even in AMD case in case this script is loaded with
// others that may still expect a global Backbone.
root.Backbone = factory(root, exports, _, $);
});
} else {
from webpack.
Unfortunately, I stumbled across another error while trying to ignore the above warning: When I define my own View via Backbone.View.extend()
:
Uncaught TypeError: undefined is not a function main.js:2654
_.extend.make main.js:2654
_.extend._ensureElement main.js:2731
Backbone.View main.js:2606
child main.js:2852
(anonymous function) main.js:1456
require main.js:12
amdRequire main.js:70
(anonymous function) main.js:34
(anonymous function) main.js:35
require main.js:12
c main.js:21
(anonymous function) main.js:23
For now, I worked around the issue by including jQuery
, underscore
and Backbone
manually inside the <head>
tag of my index.html
page. For this to work I need to tell jshint
that these are globals, but except that, it works. This is just a very unclean solution given that webpack
should be able to add them to the bundle when these are required.
from webpack.
Maybe there is a way to omit the AMD flags completely if you wrap the define function and export AMD modules automatically?
from webpack.
I fixed the exports bug.
Keep in mind that the versions published to the jam package manager are special AMD versions and maybe behave different from the original versions.
It also includes the jam jquery, which requires a special jquery flag in the require.amd
object. You need to set it via webpacks options: { amd: { jQuery: true }}
.
In CommonJS Backbone don't require jquery, thats weird...
if (typeof exports !== 'undefined') {
// Node/CommonJS, no need for jQuery in that case.
factory(root, exports, require('underscore'));
}
from webpack.
Maybe Backbone.setDomLibrary(require("jquery"))
helps...
from webpack.
I assume this issue can be closed. I switched from grunt.js to a custom build.js file for building the project with webpack and got it all working. As far as I'm aware Phoscur has no issues anymore either.
Edit: Actually, Backbone.setDomLibrary(require("jquery"))
seems to be necessary. I did not try if a single call suffices, though.
from webpack.
Hi sokra,
I could go nuts: Just tried Backbone 0.9.10
and it seems that setDomLibrary()
got removed. Any ideas?
I checked all, the "vanilla" version, the jam and the npm module. I am not sure if it is save to remove that call. Currently I get the following errors, not sure if that's the actual cause though:
Uncaught TypeError: Expecting a function in instanceof check, but got [object Object] app.js:1694
_.extend.setElement app.js:1694
_.extend._ensureElement app.js:1762
Backbone.View app.js:1648
child app.js:1880
child app.js:1880
Application.start app.js:3424
...
which is, more specifically, the following method from Backbone.View:
setElement: function(element, delegate) {
if (this.$el) this.undelegateEvents();
this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
Uncaught TypeError: Expecting a function in instanceof check, but got [object Object]
this.el = this.$el[0];
if (delegate !== false) this.delegateEvents();
return this;
}
I do not think there is a way to fix this, so I just wanted to let you know. I even tried the version that used to work earlier (0.9.2
) - just to discover that this one has been changed as well! Gah! What is this?
Cheers,
Michael
from webpack.
Hi sokra,
quick update: I managed to restore an "old" old version of Backbone, which still works. But this is definitely a 0.9.2
version which is totally different from the 0.9.2
currently on jam and npm.
Cheers,
Michael
from webpack.
Hi,
I think you can just replace the setDomLibrary
call with a simple assignment to $
.
Backbone.setDomLibrary(require("jquery"));
// =>
Backbone.$ = require("jquery");
from webpack.
Hi sokra,
Sorry for the late confirmation - I tried that once, it didn't work. Then I investigated Backbone, realizing that it should work, though. When I gave it a second shot a couple of minutes ago, this resolved my issue. Thanks!
Cheers,
Michael
from webpack.
Where should Backbone.$ = require("jquery");
be placed? In the backbone.js
file?
from webpack.
You should not modify your dependencies because thus you can't just update them. I'm placing this kind of initialization code in my entry file. The entry file is the file you give to webpack.
from webpack.
Yes, I was asking because I didn't feel comfortable modificating an
external library
On Tue, Oct 15, 2013 at 9:35 AM, Johannes Ewald [email protected]:
You should not modify your dependencies because thus you can't just update
them. I'm placing this kind of initialization code in my entry file.
The entry file is the file you give to webpack.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/34#issuecomment-26314441
.
from webpack.
@sokra @jhnns Is there a better way to shim 'jquery' into 'Backbone' now?
With Require.js I use:
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
With WebPack I get "$: undefined" and it is causing a bit of trouble
from webpack.
Backbone.$
is undefined if you're using CommonJS (I work on Backbone). You must set it yourself, preferably in your app initialization code before any Backbone.$
functions are used.
from webpack.
@akre54 hm I'll try to force AMD loading then
from webpack.
Has anyone got any clarifaction on how to fix this issue? Im migrating from RequireJS with Backbone 1.1.0 and i've encountered this problem.
from webpack.
Related Issues (20)
- Too many logs by DefinePlugin HOT 2
- ERROR in Can't find self.__WB_MANIFEST in your SW source.
- [ProvidePlugin] force load modules whether use it or not HOT 1
- Problem with namespace import + default object destructuring getting mangled in export but not resolved in destructuring HOT 3
- Webpack not removing unused side-effect-free library from build HOT 1
- When can a patch release be published for the default mangle bug fixed last week in master? 5.92.0 and latest 5.92.1 are still broken HOT 2
- webpack5 devtools hidden-source-map does not generate sourcemap HOT 1
- hmr might fail if there are new initial chunks HOT 1
- Modules builded by Webpack dont work with SSH HOT 2
- angular 18: registerQuery in layout.mjs crashes in Production bundles. HOT 1
- Module federation prevents to use expose-shared modules as singletons HOT 3
- Improve access to resolver data in `module.rules` and `rule.use` HOT 1
- DefinePlugin breaks references to imports HOT 1
- Live reload of index.html not working after subsequent edits HOT 2
- Require is not defined in ES module scope, you can use import instead HOT 3
- PnP API is not discovered when compiling file from different directory, leading to Module not found error HOT 2
- Issue while bundling library type "module" in entries HOT 1
- Allow instantiation of WebAssembly module with `SharedArrayBuffer` memory HOT 3
- Webpack v5 keeps on compiling
- Give error as hexoid is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.