phoenixframework / phoenix

Peace of mind from prototype to production
https://www.phoenixframework.org
MIT License
21.38k stars 2.87k forks source link

phoenix.js compiled, but not written #1495

Closed yanivok closed 8 years ago

yanivok commented 8 years ago

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 commented 8 years ago

Which brunch version are you using? Which OS?

yanivok commented 8 years ago

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

josevalim commented 8 years ago

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

yanivok commented 8 years ago

nope, unfortunately still the same :\

josevalim commented 8 years ago

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

chrismccord commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 6 years ago

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
  }
};