rake assets:precompile doesn't work when using ES6 on Heroku #137
Comments
|
Do you have browserify-rails in your production environment too (in Gemfile)? If not... |
|
Oh, I checked your example and it looks like it is in all envs. So it's not that. |
|
I don't know if we support the |
|
Hey @cymen, yep, this error ocurrs when try to deploy to heroku. Same error with |
|
So can you run Have you done this part: https://github.com/browserify-rails/browserify-rails#deploying-to-heroku |
|
Yep @cymen. My heroku buildpacks are setup (nodejs before ruby). Yes, I get this error both in Heroku and when running Have no idea why it works in developement mode |
|
I can't spend more time on it at the moment but if you comment out the line for this:
In |
|
Thanks @cymen Yes, with the Will try the |
|
Hey, this is related to recent babel changes. Better explained here: http://stackoverflow.com/questions/35178096/how-to-configure-a-rails-app-with-es6-support I had to add @cymen I can a create a PR updating the README if you think this is relevant |
|
@Rodrigora Excellent -- thanks for figuring it out. A PR for the README would be great. |
|
I've followed the instructions and I'm having trouble getting this to work in production with react. I'm getting this error: Heres my configs: config.browserify_rails.commandline_options = '-t [ babelify --presets [ es2015 react ] ]'{
"name": "theartistunion",
"dependencies": {
"alt": "^0.18.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "~> 10.2.4",
"browserify-incremental": "^3.0.1",
"classnames": "^2.2.3",
"es6-promise": "^3.0.2",
"history": "^1.17.0",
"jquery": "^2.2.0",
"minigrid": "^2.2.0",
"nprogress": "^0.2.0",
"react": "^0.14.7",
"react-addons-update": "^0.14.7",
"react-cookie": "^0.4.3",
"react-dom": "^0.14.7",
"react-router": "^1.0.3",
"react-select": "^0.9.1",
"react-timer-mixin": "^0.13.3",
"shitty-qs": "^1.0.1",
"soundmanager2": "^2.97.20150601",
"superagent": "^1.7.2",
"underscore": "^1.8.3",
"wallop": "git://github.com/jamesfzhang/wallop.git",
"whatwg-fetch": "^0.11.0"
},
"license": "MIT",
"engines": {
"node": ">= 0.10",
"npm": "2.14.7"
},
"devDependencies": {
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0"
}
}Works fine locally but assets can't finish precompiling on Heroku ( I have the nodejs & ruby buildpacks). |
|
@jamesfzhang I think you need to move those two dev dependencies to regular dependencies as your build on Heroku is probably production not dev. So move these two lines up into "babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0" |
|
@cymen Good catch, but those presets are actually in |
|
Ah, I missed that. Hrm... |
|
Here's the full error: |
|
@jamesfzhang Unfortunately, I don't know. If your immediate goal is to be able to deploy, it might be worth precompiling the assets locally, committing them and making it so Heroku doesn't try to compile them. Just to get it working now. You can precompile them locally by running:
That is by memory so good to verify. Then commit That is not ideal but at least you would not be blocked. |
|
Thanks @cymen for the suggestion, I'll do that until we figure out what's going on here. |
|
If you're using Browserify not only for modules but also using transformers like babelify, you need to make sure every file that need to be transformed (e.g. from ES6) is properly wrapped into module by adding |
|
@dlackty Yes, that is a good point. I recommend having one initial starting module so it would look something like: application.js: //= require something-crufty
var bootstrap = require('./bootstrap');
bootstrap();bootstrap.js -- do not use any sprocket requires ( module.exports = function bootstrap() {
// start your application here
};That avoids having to do anything hacky in my experience. The goal being to get pulled in via sprockets for the asset pipeline but using CommonJS for the rest of the application. If you want some non-CommonJS code, pull it in via application.js and it'll be in the normal global (Rails) approach. |
|
(it can be multiple modules but mastering one module first is a good start) |
|
Here's my application.js: //= require turbolinks
require('v2/application');Here's 'use strict';
require('bootstrap');
require('whatwg-fetch');
require('es6-promise').polyfill();
var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./routes');
$(document).ready(function() {
ReactDOM.render(routes, document.getElementById('app'));
});Every file required by routes from here on has |
|
Still running into the same error. // application.js
let application = require('v2/application');
application();// v2/application.js
'use strict';
require('bootstrap');
require('whatwg-fetch');
require('es6-promise').polyfill();
var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./routes');
module.exports = function() {
$(document).ready(function() {
ReactDOM.render(routes, document.getElementById('app'));
});
}; |
cymen
changed the title
|
We're seeing similar issues and tracked it down to the uglifier. When we copied the uglifier setting from |
|
@mockdeep Why is a jQuery file from a gem being browserified? Did you try to do a I suspect the issue is trying to use gems for JavaScript assets -- if you're going to use CommonJS, it's a good idea to stop using gems that package JavaScript files. |
|
@cymen We're gradually moving our assets over to browserify, but still have some references to gem assets. I found a couple places where we have sprockets requires and a |
|
@mockdeep That is really odd. In general, I've found the best approach is to have one file that does any sprocket requires at the top and then does a CommonJS require (or import now w/ browserify-rails 3.0.1) and from that CommonJS module down, stay with CommonJS and try not to mix in sprockets -- trying to blend it does cause issues. Another approach is to have a core bundle with all the sprockets-required JavaScript and separate bundle for CommonJS. Not a huge difference technically. |
|
Yeah, we're basically taking that approach, though a couple of files slipped through. It doesn't actually seem to be causing any other issues, though, surprisingly. |
|
Ah! That is good to know. When I was using this gem daily (prior employment, not needed in current employment), we ran into issues early and went that route so I don't have much experience mixing the two. |
|
@jamesfzhang did you ever figure out what's going on? Cannot get my app deployed to Heroku :(
|
|
Hey @rloomba, are you using the react-rails gem? If not, change the command lines options to this: |
|
Yeah, looks like you don't have a processor to handle |
|
yeah I am using the react-rails gem @Rodrigora @mockdeep thanks for the help guys, this works! 🙏 |
Resources: - https://github.com/lautis/uglifier - https://stackoverflow.com/q/30422437/2066546 - http://jilles.me/webpack-is-not-as-complicated-as-you-think/ - https://webpack.js.org/configuration/ - https://stackoverflow.com/a/34404979/2066546 - https://stackoverflow.com/q/42375468/2066546 - browserify-rails/browserify-rails#137 - babel/babel-loader#249 - https://stackoverflow.com/a/41537551/2066546 Trello: https://trello.com/c/fY3vpcgm/1192-vuejs https://trello.com/c/TDzuEXbb/1138-installation-von-webpacker
Is it bad to do this? I had to do this to get a heroku deploy to go through |
Hey Guys,
I'm struggling to precompile my Javascript files. I already tried the solutions of #133 and #132.
To exemplify the issue, I created this app. It is a
"empty" rails app with browserify-rails gem and 1 JS file using ES6 syntax.
Some relevant files:
package.json
config/application.rb
config.browserify_rails.commandline_options = "-t babelify --extension-'.jsx'"app/assets/javascripts/components/hello.jsx
I'm using
jsxextension because I intend to add react to this projectThe error is:
The text was updated successfully, but these errors were encountered: