Search code examples
javascriptherokuzurb-foundationphoenix-frameworkbrunch

jQuery.Deferred exception: i is not a function TypeError: i is not a function


I've deployed the carcass of my Phoenix app to Heroku (Link) but have a similar warning and error in the js console:

Warning:

jQuery.Deferred exception: i is not a function TypeError: i is not a function

Error:

Uncaught TypeError: i is not a function

In the development environment, all works fine.

Tried to recompile brunch with Heroku run brunch build and tried to modify brunch config file. Looks like something got lost or put in the wrong order after minification. Now I am just stuck.

Can someone help me?

brunch-config.js

  exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo:
        "js/app.js",
      order: {
        before: [
          "node_modules/jquery/dist/jquery.js",
          "node_modules/what-input/src/what-input.js",
          "node_modules/foundation-sites/js/foundation.core.js",
          "node_modules/foundation-sites/js/foundation.topbar.js",
          "node_modules/foundation-sites/js/foundation.reveal.js",
          "node_modules/foundation-sites/js/foundation.offcanvas.js"
        ]
      }

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    },
    sass: {
      options: {
        includePaths: [
          'node_modules/foundation-sites/scss',
          'node_modules/motion-ui/src'
        ]
      }
    }
  },
  modules: {
    autoRequire: {
      "js/app.js":            ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
    },
    whitelist: ["phoenix", "phoenix_html", "jquery", "jquery-validation", "foundation-sites"]
  }
};

Solution

  • I've found solution by copying foundation.min.js to web/static/vendor:

    cp ./node_modules/foundation-sites/dist/js/foundation.min.js web/static/vendor/
    

    Pushed changes to heroku and now all works fine.