Backbone Paginator breaks Webpack

Question

I have a small app that uses Webpack and backbone.paginator. It works perfectly without webpack.

With webpack, when I require backbone.paginator in my collection, it completely breaks the app. I don't even have to use the paginator, simply requiring it will break the app. It will actually create a pageable collection and works correctly, but if I try to create a view after requiring paginator, it will say Backbone.Marionette is not defined.

Here is the Model:

 var User = require("../models/User");
 var PageableCollection = require("backbone.paginator");

 var Users = Backbone.PageableCollection.extend({
  url: 'http://localhost:8000/api/users',
  model: User,
});

module.exports = Users;

If there are any views, as soon as I require it there will be an error. If I remove the require('backbone-paginator') there are no errors.

Here is my webpack.config.js:

const webpack = require("webpack");
const path = require("path");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, 'app', 'index.html'),
  filename: 'index.html',
  inject: 'body'
});

var paths = {
  ENTRY: path.join(__dirname, 'app', 'main.js'),
  OUTPUT_FILENAME: "bundle.js",
  OUTPUT: path.join(__dirname, "app", 'static'),
  APP: path.join(__dirname, 'app')
};

module.exports = {
  entry: [
    paths.ENTRY
  ],
  devServer: {
    contentBase: "./app"
  },
  resolve: {
    alias: {
      "marionette": "backbone.marionette"
    }
  },
  module: {
    preLoaders: [
     {
       test: /\.js$/,
       include: __dirname + '/app',
       exclude: [/node_modules/, paths.APP + '/public', paths.APP + '/bower_components'],
       loader: 'jshint-loader'
      }
    ],
    loaders: [
      { test: /\.html/, include: paths.APP + '/templates', loader:     "underscore-template-loader" }
    ],
  },
  output: {
    filename: paths.OUTPUT_FILENAME,
    path: paths.OUTPUT
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new webpack.ProvidePlugin({
      $: 'jquery',
      _: 'underscore'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: { warnings: false },
    //   mangle: true,
    //   sourcemap: false,
    //   beautify: false,
    //   dead_code: true
    // })
  ]
};

Edit: I removed pretty much everything and pared it down to just this:

var Marionette = require('marionette');
var PageableCollection = require("backbone.paginator")

var Users = Backbone.PageableCollection.extend({
  url: 'http://localhost:8000/api/users'
})

var UsersView = Backbone.Marionette.View.extend({
  tagName: 'div',
  template: _.template("hello")
})

It will not allow me to define a view after requiring backbone.paginator. If I console.log Marionette, it is still there but when I define a view it is saying that it is undefined.

Both Marionette and Backbone.Paginator write references to the Backbone object. If Backbone.Paginator were to cause Backbone to load again (i.e. recreate the object) then Marionette references on that object would disappear. Looking at the code for both libraries, I can't see how that would happen, you are using CommonJS style modules, so both should be accessing `require('backbone')`. This normally happens because there's 2 copies of Backbone somewhere. — mikeapr4, Oct 31 '16 at 18:27

Backbone Paginator breaks Webpack

0 Answers0