phoenix.js compiled, but not written

[yanivok]

Hi, i'm getting this warning everytime i'm running my server :

warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config

searched for answers but with no success. this is my brunch-config.js file : http://pastebin.com/UCvwX1rC

how can i solve this?

[josevalim]

Which brunch version are you using? Which OS?

[yanivok]

"brunch": "^2.1.1", On Ubuntu 14.04

[josevalim]

Can you see the brunch version on node_modules? If you run npm install brunch@2.1.3 does it solve the issue?

[yanivok]

nope, unfortunately still the same :\

[josevalim]

Can you provide an application that reproduces the error? Then we can send it to the brunch folks to further investigate. :D

[chrismccord]

@yanivok If you have time to put together an application that reproduces this issue, please let us know. It would also be worth trying out the latest brunch release. Thanks!

[rodgomes]

Not sure if still relevant, but maybe helps people in future. What is happening is: the default brunch-configuraton.js configuration comes with this "joinTo: "js/app.js" uncommented by default. So, it does not contain any regex to include the js files, and by consequence it includes all of them.

As we try to follow the recommended pattern of separating the js files into app.js and vendor.js, we get from the examples the following configuration: joinTo: { "js/app.js": /^(web\/static\/js)/, "js/vendor.js": /^(web\/static\/vendor)|(deps)/ },

But, the phoenix files come from a different folder, which is "priv/static/phoenix*.js", then we get the warning.

warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config

One way of solving this is adding an extra regex. Something like: "js/vendor.js": /^(web\/static\/vendor)|(deps)|(priv\/static\/phoenix*)/

Then, the warning is gone.

But I'm not sure if this is the right way of solving this issue. I would not expect any developer having to map framework specific scripts, I mean, those should be included by default always IMHO.

I'm quite new to Elixir/Phoenix and brunch, but If there is anything I can do to help, let me know.

[bmagrys]

@rodgomes Thank you for your suggestion, your way of solwing this worked for me. In addition to what you wrote, I would like to add that after this change I has to add additional script tag with vendor file as a source (before script with app.js as a source) in my main eex file: <script src="<%= static_path(@conn, "/js/vendor.js") %>"></script> <script src="<%= static_path(@conn, "/js/app.js") %>"></script> I also removed import "phoenix_html"; from app.js file.

Of course, I am not convinced that this convention is good. Also, I have not found a better way.

[nlifors]

Since the app.js in your joinTo config references the node module 'phoenix_html', join the node_modules in your app.js regex:

 joinTo: {
    "js/app.js": /^(web\/static\/js|node_modules)/,
    "js/vendor.js": /^(web\/static\/vendor)|(deps)/
 },

[matisojka]

@nlifors Could you explain a little bit why your solution actually works? I'm trying to understand better what's going on to write a blog post about it, but I am a bit stuck.

[nlifors]

@yagooar Sorry for the late reply, just revisited this thread myself to solve this again.

Basically, when bundling into multiple files, the app.js path will pull all js files from the web/static/js path, but by default Brunch won't include imported files from e.g. the node_modules directory.

Per the message warn: node_modules/phoenix/priv/static/phoenix.js compiled, but not written. Check your javascripts.joinTo config, Brunch is saying it has compiled the imported file phoenix.js, but not included it in the final bundle.

By adding the regex |node_modules, to the joinTo path, we can tell Brunch to also include any imported and compiled js from the node_modules path into the final bundle.

Hope this helps.

[genericlady]

I ran into this problem today with Phoenix v1.3 just changed the path in regex to look in assets in project root.

joinTo: {                         
  "js/vendor.js": /^(assets\/vendor\/js)|(deps)/                              
}

[isAlmogK]

I'm running into the same issue here is my config can someone help I have two folders in js admin and public loading different js and css for each one

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: {
        // public js
        'js/app.js': /^(assets\/js\/public)/,
        'js/countdown.js': /^(assets\/js\/public)/,
        'js/jquery.steps.min.js': /^(assets\/js\/public)/,
        'js/jquery-3.1.1.min.js': /^(assets\/js\/public)/,
        'js/flickity.min.js': /^(assets\/js\/public)/,
        'js/parallax.js': /^(assets\/js\/public)/,
        'js/scripts.js': /^(assets\/js\/public)/,
        'js/smooth-scroll.min.js': /^(assets\/js\/public)/,
        'js/typed.min.js': /^(assets\/js\/public)/,
        'js/ytplayer.min.js': /^(assets\/js\/public)/,

        // admin js
        'js/app-admin.js': /^(assets\/js\/admin)/ ,
        'js/jquery-1.11.2.min.js': /^(assets\/js\/admin)/,
        'js/jquery-migrate-1.2.1.min.js': /^(assets\/js\/admin)/,
        'js/bootstrap.js': /^(assets\/js\/admin)/,
        'js/jquery.autosize.js': /^(assets\/js\/admin)/,
        'js/jquery.App2.js': /^(assets\/js\/admin)/,
        'js/jquery.AppNavigation2.js': /^(assets\/js\/admin)/,
        'js/jquery.editirmd.js': /^(assets\/js\/admin)/,
        'js/lib/flowchart.min.js': /^(assets\/js\/admin)/,
        'js/lib/jquery.flowchart.min.js': /^(assets\/js\/admin)/,
        'js/lib/marked.min.js': /^(assets\/css\/admin)/,
        'js/lib/prettify.min.js': /^(assets\/js\/admin)/,
        'js/lib/raphael.min.js': /^(assets\/js\/admin)/,
        'js/lib/sequence-diagram.min.js': /^(assets\/js\/admin)/,
        'js/lib/underscore.min.js': /^(assets\/js\/admin)/,
      }

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: {
        // Public css
        'css/bootstrap.css': /^(assets\/css\/public)/,
        'css/stack-interface.css': /^(assets\/css\/public)/,
        'css/socicon.css': /^(assets\/css\/public)/,
        'css/flickity.css': /^(assets\/css\/public)/,
        'css/iconsmind.css': /^(assets\/css\/public)/,
        'css/query.steps.css': /^(assets\/css\/public)/,
        'css/theme.css': /^(assets\/css\/public)/,
        'css/custom.css': /^(assets\/css\/public)/,
        'css/lightbox.min.css': /^(assets\/css\/public)/,

        // Admin css
        'css/bootstrap2.css': /^(assets\/css\/admin)/,
        'css/materialadmin.css': /^(assets\/css\/admin)/,
        'css/font-awesome.css': /^(assets\/css\/admin)/,
        'css/material-design-iconic-font.css': /^(assets\/css\/admin)/,
        'css/editormd.css': /^(assets\/css\/admin)/,
      }
    },
    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 "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      //ignore: [/vendor/]

      ignore: [
        /vendor/,
        /assets\/css\/public\/vendor/,
        /assets\/css\/admin\/vendor/
      ]
    }
  },

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

  npm: {
    enabled: true
  }
};