Code Monkey home page Code Monkey logo

Comments (17)

Phoscur avatar Phoscur commented on March 28, 2024

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.

miffels avatar miffels commented on March 28, 2024

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.

Phoscur avatar Phoscur commented on March 28, 2024

Maybe there is a way to omit the AMD flags completely if you wrap the define function and export AMD modules automatically?

from webpack.

sokra avatar sokra commented on March 28, 2024

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.

sokra avatar sokra commented on March 28, 2024

Maybe Backbone.setDomLibrary(require("jquery")) helps...

from webpack.

miffels avatar miffels commented on March 28, 2024

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.

miffels avatar miffels commented on March 28, 2024

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.

miffels avatar miffels commented on March 28, 2024

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.

sokra avatar sokra commented on March 28, 2024

Hi,

I think you can just replace the setDomLibrary call with a simple assignment to $.

Backbone.setDomLibrary(require("jquery"));
// =>
Backbone.$ = require("jquery");

from webpack.

miffels avatar miffels commented on March 28, 2024

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.

pherrymason avatar pherrymason commented on March 28, 2024

Where should Backbone.$ = require("jquery"); be placed? In the backbone.js file?

from webpack.

jhnns avatar jhnns commented on March 28, 2024

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.

pherrymason avatar pherrymason commented on March 28, 2024

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.

vladikoff avatar vladikoff commented on March 28, 2024

@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
image

from webpack.

akre54 avatar akre54 commented on March 28, 2024

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.

vladikoff avatar vladikoff commented on March 28, 2024

@akre54 hm I'll try to force AMD loading then

from webpack.

Georgegriff avatar Georgegriff commented on March 28, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.