Brunch: Replace inline script with "autoRequire" not working

Question

I am trying to remove <script> require('scripts/app').init(); </script> <script> require('scripts/app').init(); </script> from my front-end templates because internet explorer does not like this line. I see that you can use the "modules.autoRequire" key in the brunch config, but I can not get it working.

When I try to use autoRequire: { 'scripts/app.js': ['scripts/app.js'] } nothing is being output or run for me. Same with autoRequire: { 'scripts/app.js': ['scripts/app'] } .

When I use autoRequire: { 'scripts/app.js': ['init'] } I get the following error auto-reload.js:61 Uncaught Error: Cannot find module 'init' from '/' This is the only error i've ever gotten playing around with this setting.

brunch-config.js

module.exports = {
  paths: {
    public: 'web',
    watched: ['app', 'templates']
  },

  modules: {
    autoRequire: {
      'scripts/app.js': ['init']
    }
  },

  optimize: true,

  files: {
    javascripts: {
      entryPoints: {
        'app/scripts/app.js': 'scripts/app.js'
      },
      joinTo: {
        'scripts/auto-reload.js': '/node_modules/auto-reload-brunch/'
      }
    }
  }
};

app.js

'use strict';

const Pages = require('./pages');
const Global = require('./global');
const Components = require('./components');
const Home = Pages.Home;
const Happenings = Pages.Happenings;
const Leasing = Pages.Leasing;
const Updates = Pages.Updates;
const Events = Pages.Events;
const EventSlider = Components.EventSlider;

module.exports = {
  init: function(){
    Global.init();
    if($('.home-page').length){ new Home(); }
    if($('.leasing-page').length){ new Leasing(); }
    if($('.happenings-page').length){ new Happenings(); }
    if($('.updates-page').length){ new Updates(); }
    if($('.update-page').length){ new Updates(); }
    if($('.things-to-do-page').length){ new Events(); }

    if($('.event-slider').length){ new EventSlider(); }
  }
};

I would love for the init function in the app.js file to run when the page loads!

Answer 1

i've figured it out!

The autoRequire property should read like this:

autoRequire:  { 'scripts/app.js': ['scripts/app'] }

My problem was inside the module, where I had not told the code to start running.

const App = {
  init: function(){
    ...
  }
}
module.exports = App.init();

Where App.init() is the important missing line.