CODEWITHSUNDEEP
jquerycsselixirphoenix-frameworkbrunch
user6574649
user6574649

Reputation:

Errors in assets -- js and css -- when running a phoenix/elixir app with the default setting with brunch

I have a lot of "Uncaught ReferenceError:" and "jquery.waypoints.min.js:7 Uncaught TypeError: Cannot read property" kinds of errors in my phoenix/elixir app. This is because of the wrong order in which the js fileds are concatendated or loaded and namespaces which brunch inserts I think. But all the setting are default and there's nothing about that in the documenation.

My js and css are untouched, as well as brunch-config.js. I'm using bootstrap and jquery and my own scripts and css files. How can I set them up correctly? Should I put my jquery script and bootstrap into /vendor?

Here's my brunch-config.js

exports.config = {
  files: {
    javascripts: {
      joinTo: {
        "js/app.js": /^(web\/static\/js)/,
        "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      },
    },

    stylesheets: {
      joinTo: {
        "css/app.css"
        templates: {
          joinTo: "js/app.js"
        }
      }
    },

    conventions: {
      assets: /^(web\/static\/assets)/
    },

    paths: {
      watched: [
        "web/static",
        "test/static"
      ],

      public: "priv/static"
    },

    plugins: {
      babel: {
        ignore: [/web\/static\/vendor/]
      }
    },

    modules: {
      autoRequire: {
        "js/app.js": ["web/static/js/app"]
      }
    },

    npm: {
      enabled: true,
      whitelist: ["phoenix", "phoenix_html"]
    }
  }
};

And my app.js

import "phoenix_html"
import "jquery"
import "bootstrap"

Upvotes: 1

Views: 692

Answers (1)

Ege Ersoz
Ege Ersoz

Reputation: 6571

Option 1:

If you want to change the order the files are concatenated, you can do this inside your brunch-config.js:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
      order: {
        before: [
          "web/static/vendor/js/jquery-2.1.1.js",
          "web/static/vendor/js/bootstrap.min.js"
        ]
      }
    }
  }
}

You can do the same for CSS:

stylesheets: {
  joinTo: "css/app.css",
  order: {
    after: ["web/static/css/app.css"] // concat app.css last
  }
}

You can read the Brunch docs for more info.

Note that if you go with this approach, you'll have to import the module inside your app.js file. For JQuery, assuming you installed it using npm, this should be import $ from "jquery".

Option 2:

You can also place the files you want inside /priv/static/js and priv/static/css and then load them from inside your html (such as your layout file) like this:

<script src="<%= static_path(@conn, "/js/myscript.js") %>"></script>
  <link rel="stylesheet" href="<%= static_path(@conn, "/css/mystyles.css") %>">

I've had to do that a few times, such as when the library didn't expose itself as a module.

Upvotes: 2

Related Questions