search

rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

Compiles fail with no output #395

Closed schneems closed 7 years ago

schneems commented 7 years ago

From https://github.com/heroku/heroku-buildpack-ruby/issues/562

I'm getting a non-trivial number of people getting compile failures, but with no debug output of any kind. Here's an example:

remote:        Webpacker is installed 🎉 🍰
remote:        Using /tmp/build_c3975d9e573c1bf0b4e6b532daa48fde/config/webpack/paths.yml file for setting up webpack paths
remote:        Compiling webpacker assets 🎉
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy....
remote: 
remote: !   Push rejected to [my app].

Is there anything else we can do when this happens? Any way to add debug info? Maybe toggle an environment variable for extra logging?

Have you seen silent failures like this before? Any ideas?

ytbryan commented 7 years ago

Thanks for filing this, Richard.

@flybayer Which version of webpacker are you using? Master branch? Can I confirm it's rails 5.1.0 and not 5.1.1? @fuffi Same question to you

gauravtiwari commented 7 years ago

@schneems Yepp, I have seen it before and most probably it's related to node-sass binary either not available or corrupted - related to https://github.com/sass/node-sass/issues/1918

One more thing I noticed and mentioned in (https://github.com/rails/webpacker/issues/169#issuecomment-288296033) was that with regular ruby buildpack npm isn't available alongside yarn. I think it would be useful to have that too on heroku. 

"scripts": {
"postinstall": "npm rebuild node-sass"
}

I think this is a bug we need to fix for compile task. Currently we are using a non-standard way to get output from webpack compile task, which is unhelpful for debugging. I started adding js scripts in #264. Perhaps, I can just make a PR with only scripts so it improves the debugging workflow.

flybayer commented 7 years ago

@ytbryan I'm using Rails 5.1.1 (5.1.0 didn't work either), webpacker latest master branch, ruby buildpack v160.

flybayer commented 7 years ago

Now precompiling is failing every single time regardless of cache state, including the exact code I was using the other week in a brand new dokku app. scratches head

Precompiling locally in production mode works flawlessly.

flybayer commented 7 years ago

Update: node-sass was my problem even though there was no logging indicating this.

Adding 

"postinstall": "npm rebuild node-sass"

to my package.json scripts has fixed all my deployment problems.

I no longer need to clear the cache before every deploy.

schneems commented 7 years ago

with regular ruby buildpack npm isn't available alongside yarn. I think it would be useful to have that too on heroku.

Can you say more here? What could this buy users of webpacker on Heroku?

gauravtiwari commented 7 years ago

@schneems at the moment if the users need to use npm for anything for ex - npm rebuild node-sass using post-install hook, the npm binary isn't available on heroku on ruby buildpack with webpacker. It is available in node-js build-pack though. Might make sense to have npm too if heroku has yarn support with webpacker?

BTW, fixed the debugging issue on master so, now compile task will provide much better debug output if assets:precompile fails because of webpacker.

screen shot 2017-05-22 at 16 43 21

screen shot 2017-05-22 at 16 44 42

Ref- #403

erikshestopal commented 7 years ago

I am still getting the same error as the original author, with exactly the same stack trace, even after running the npm rebuild command and evening purging the dependencies cache. Can anyone point me in the direction of resolving this?

I am running Ruby 2.3.1 with Rails 5.1.0 and Webpacker 1.2. Thanks.

flybayer commented 7 years ago

@thisiserik try running assets:precompile locally to see what error you get:

NODE_ENV=production RAILS_ENV=production rails assets:precompile --trace
erikshestopal commented 7 years ago

@flybayer It's complaining that I don't have transform-object-rest-spread installed, which I do. 

Using /Users/Erik/Desktop/Code/camp-paradise/config/webpacker.yml file for setting up webpack paths
** Invoke environment 
** Execute webpacker:compile
[Webpacker] Compiling assets 🎉
[Webpacker] Compilation Failed
Hash: 95406c2c03842d72f0de
Version: webpack 2.6.0
Time: 304ms
                                 Asset       Size  Chunks             Chunk Names
         index-ea927b537cff7ebd4831.js    1.97 kB       0  [emitted]  index
   application-a25a48882bbe5d5a3285.js    1.97 kB       1  [emitted]  application
           App-c7ab4878b13d50d47b2c.js    1.97 kB       2  [emitted]  App
      index-ea927b537cff7ebd4831.js.gz  652 bytes          [emitted]  
application-a25a48882bbe5d5a3285.js.gz  652 bytes          [emitted]  
        App-c7ab4878b13d50d47b2c.js.gz  651 bytes          [emitted]  
                         manifest.json  172 bytes          [emitted]  
   [0] ./app/javascript/packs/App.js 1.47 kB {2} [built] [failed] [1 error]
   [1] ./app/javascript/packs/application.js 1.47 kB {1} [built] [failed] [1 error]
   [2] ./app/javascript/packs/index.js 1.47 kB {0} [built] [failed] [1 error]

ERROR in ./app/javascript/packs/application.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "/Users/Erik/Desktop/Code/camp-paradise/.babelrc" at 0, attempted to resolve relative to "/Users/Erik/Desktop/Code/camp-paradise"
    at /Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-loader/lib/index.js:48:20)
    at Object.module.exports (/Users/Erik/Desktop/Code/camp-paradise/node_modules/babel-loader/lib/index.js:163:20)
flybayer commented 7 years ago

@thisiserik do you have babel-plugin-transform-object-rest-spread installed as a dev dependency? It must be a normal dependency

erikshestopal commented 7 years ago

@flybayer

It must be a normal dependency

As opposed to what?

flybayer commented 7 years ago

As opposed to a dev dependency.

So you need in your package.json this:

  "dependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "..."
  },
  "devDependencies": {
    "..."
  },

instead of this:

  "dependencies": {
    "..."
  },
  "devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "..."
  },
erikshestopal commented 7 years ago

@flybayer That solved one problem, but Uglify is throwing more errors. These are not syntax errors, as I have checked. 

[Webpacker] Compiling assets 🎉
[Webpacker] Compilation Failed
Hash: b8a8965c924a031847e8
Version: webpack 2.6.0
Time: 11271ms
                                 Asset       Size  Chunks                    Chunk Names
application-f1044aff7d41a0cfc0af.js.gz  323 bytes          [emitted]         
           App-4d5a66eef65594d6529f.js    2.35 MB    0, 1  [emitted]  [big]  App
   application-f1044aff7d41a0cfc0af.js  552 bytes       2  [emitted]         application
          App-b8a8965c924a031847e8.css  273 bytes    0, 1  [emitted]         App
        index-b8a8965c924a031847e8.css  273 bytes    1, 0  [emitted]         index
         index-70f1b68da2f4a44fba00.js    2.35 MB    1, 0  [emitted]  [big]  index
       App-b8a8965c924a031847e8.css.gz  160 bytes          [emitted]         
     index-b8a8965c924a031847e8.css.gz  160 bytes          [emitted]         
        App-4d5a66eef65594d6529f.js.gz     473 kB          [emitted]  [big]  
      index-70f1b68da2f4a44fba00.js.gz     473 kB          [emitted]  [big]  
                         manifest.json  280 bytes          [emitted]         
   [0] ./~/moment/moment.js 129 kB {0} {1} [built]
   [1] ./~/react/react.js 56 bytes {0} {1} [built]
   [7] ./~/react-redux/es/index.js 194 bytes {0} {1} [built]
  [10] ./~/react-router-redux/es/index.js 356 bytes {0} {1} [built]
  [15] ./~/redux-persist/es/index.js 978 bytes {0} {1} [built]
  [18] ./app/javascript/packs/index.js 1.21 kB {0} {1} [built]
  [19] ./~/react-router-dom/es/index.js 925 bytes {0} {1} [built]
  [39] ./~/react-dom/index.js 59 bytes {0} {1} [built]
  [64] ./~/redux/es/index.js 1.08 kB {0} {1} [built]
  [98] ./~/history/createBrowserHistory.js 9.53 kB {0} {1} [built]
 [301] ./app/javascript/packs/App.js 3.28 kB {0} {1} [built]
 [316] ./app/javascript/packs/reducers/rootReducer.js 394 bytes {0} {1} [built]
 [317] ./~/redux-logger/lib/index.js 5.4 kB {0} {1} [built]
 [318] ./~/redux-thunk/lib/index.js 529 bytes {0} {1} [built]
 [545] ./app/javascript/packs/application.js 515 bytes {2} [built]
    + 536 hidden modules

ERROR in App-4d5a66eef65594d6529f.js from UglifyJs
Unexpected character '`' [App-4d5a66eef65594d6529f.js:52560,39]

ERROR in index-70f1b68da2f4a44fba00.js from UglifyJs
Unexpected character '`' [index-70f1b68da2f4a44fba00.js:52560,39]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/styles/camps/RoomTypeCard.scss 417 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
gauravtiwari commented 7 years ago

I guess you are not using latest .babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ]
}
erikshestopal commented 7 years ago

@gauravtiwari This is my .babelrc file and the trace is the same. 

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current",
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }], "react",

  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}
flybayer commented 7 years ago

@thisiserik can you post your entire package.json?

erikshestopal commented 7 years ago

@flybayer Sure! Here you go... 

{
  "dependencies": {
    "animated-scroll-to": "^1.0.1",
    "autoprefixer": "^7.1.1",
    "axios": "^0.16.1",
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.23.0",
    "bootstrap": "^4.0.0-alpha.6",
    "classnames": "^2.2.5",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "halogen": "^0.2.0",
    "js-yaml": "^3.8.4",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "npm": "^4.6.1",
    "octicons": "^5.0.1",
    "parse-link-header": "^1.0.0",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.2",
    "precss": "^1.4.0",
    "prop-types": "^15.5.8",
    "rails-erb-loader": "^5.0.1",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-shallow-compare": "^15.5.1",
    "react-addons-transition-group": "^15.4.2",
    "react-dates": "^10.0.0",
    "react-dom": "^15.4.2",
    "react-octicon": "^2.0.0",
    "react-octicons-svg": "^1.1.13",
    "react-redux": "^5.0.4",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-stripe-checkout": "^2.2.5",
    "reactstrap": "^4.4.0",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.1",
    "redux-persist": "^4.0.0-beta1.2",
    "redux-thunk": "^2.2.0",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.0",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }
}
gauravtiwari commented 7 years ago

Not sure if node and browser option works together well? May be remove the node option and re-run again :)

gauravtiwari commented 7 years ago

Closing in favour of #403, which addresses this issue 👍

cgs commented 7 years ago

I'm still getting this error, Rails 5.1 and webpacker 2.0. It's definitely something to do with UglifyJs. If I comment out this section of production.js, "compiling webpacker assets" succeeds on Heroku:

const webpack = require('webpack')
const merge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin')
const sharedConfig = require('./shared.js')

module.exports = merge(sharedConfig, {
  output: { filename: '[name]-[chunkhash].js' },
  devtool: 'source-map',
  stats: 'normal',

  plugins: [
    // new webpack.optimize.UglifyJsPlugin({
    //   minimize: true,
    //   sourceMap: true,

    //   compress: {
    //     warnings: false
    //   },

    //   output: {
    //     comments: false
    //   }
    // }),

    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
    })
  ]
})
gauravtiwari commented 7 years ago

@cgs Are you using latest .babelrc and could you please paste the log?

cgs commented 7 years ago

@gauravtiwari

.babelrc:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    ["transform-class-properties", { "spec": true }]
  ]
}

From stack trace:

ERROR in guided_search/guided_search-7c6b026ae1cfdc904357.js from UglifyJs
Unexpected token: name (defaults) [./~/vue-scrollto/src/scrollTo.js:14,0][guided_search/guided_search-7c6b026ae1cfdc904357.js:38449,4]

Looks like UglifyJs is not understanding new syntax. Not sure what the fix would be for this

gauravtiwari commented 7 years ago

Are you using typescript - just to confirm?

cgs commented 7 years ago

Nope just ES2015. It's choking on this file: https://github.com/rigor789/vue-scrollto/blob/master/src/scrollTo.js

gauravtiwari commented 7 years ago

Ahh I see. May be this is related to vue-scrollto

Please could you addvue-scrollto to include array in babel-loader please?

{
  test: /\.vue$/,
// .. rest of the config
  include: ['vue-scrollto']
}

Looks like vue-scrollto is using ES6 and since babel-loader is excluding node_modules it just skips it.

cgs commented 7 years ago

👍 That fixed it. What about vue-scrollto was causing this issue?

Oops, sorry, premature reply. I forgot to uncomment the uglifyjs bit. Still failing with the same error.

cgs commented 7 years ago

Here's some of my own code it's also failling on:

new Vue({
  el: '#filtered-search',
  data: {
    resultCount: 0
  },
  created() {    
    // from SearchFilter
    this.$bus.$on('count', (c) => {
      this.resultCount = c
    })
  },
  components: {
    SearchFilter,
    SearchResults
  }
})

Specifically, the created() bit which is ES2015...

gauravtiwari commented 7 years ago

@cgs How does your vue.js loader looks? For some reason it's not compiling es6 code since you got an arrow function there. Lets debug this together please.

cgs commented 7 years ago

Sure thing. Here's my vue loader:

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
    }
  }
}
gauravtiwari commented 7 years ago

@cgs Ahh that's why. Please use the updated one: 

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
    }
  }
}
gauravtiwari commented 7 years ago

or run bundle exec rails webpacker:install:vue

cgs commented 7 years ago

Hmm, still no dice. I seem to be getting less errors now, just the one related to vue-scrollto:

ERROR in guided_search/guided_search-86ef66c69a817e0cb25c.js from UglifyJs
Unexpected token: name (defaults) [./~/vue-scrollto/src/scrollTo.js:14,0][guided_search/guided_search-86ef66c69a817e0cb25c.js:38593,4]

I tried adding vue-loader to the babel js loader again, but then I get the above error as well as two other errors pointing to my code.

gauravtiwari commented 7 years ago

Did you include the vue-scrollto to whitelist?

cgs commented 7 years ago

Where do I do that?

gauravtiwari commented 7 years ago

Within the vue.js loader:

{
  test: /\.vue$/,
// .. rest of the config
  include: ['vue-scrollto']
}
cgs commented 7 years ago

with the include, all my .vue files fail:

ERROR in ./app/javascript/packs/filtered_search/search_filter.vue
Module parse failed: /myapp/app/javascript/packs/filtered_search/search_filter.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="search-filter">
|     <label>

(one for each .vue file)

gauravtiwari commented 7 years ago

@cgs If you are okay I am happy to take a look at the repo with you.

For quick fix though, you can do following -

  1. Add 
yarn add babel-preset-babili

  1. Remove or comment Uglify plugin from production.js

  2. In your .babelrc - add babili to presets array and then try re-compiling

cgs commented 7 years ago

@gauravtiwari Sorry I'm not able to share the code, but I got it working with a different workaround. I changed the way I was including vue-scrollto from my code. Specifically this is from an entry point file:

How I was including it from my code:

import VueScrollTo from 'vue-scrollto/src'

Now:

import VueScrollTo from 'vue-scrollto/vue-scrollto'

So I'm basically just including the dist / ES5 version. Not sure if the first way I was including it was incorrect. Thanks for helping me with this.

gauravtiwari commented 7 years ago

No worries!

Nice! Yepp that's another to solve this, totally forgot 👍 Basically the problem is vue-scrollTo has es6 code, which isn't being compiled by babel-loader since node_modules are ignored. Will add this to README 👍 until we start using es6-aware minifier.

erikshestopal commented 7 years ago

@gauravtiwari I removed the node option and the error still persists...

** Invoke assets:precompile (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Invoke environment (first_time)
** Execute environment
** Invoke yarn:install (first_time)
** Execute yarn:install
yarn install v0.22.0
warning No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
✨  Done in 4.76s.
** Execute assets:precompile
** Invoke webpacker:compile (first_time)
** Invoke webpacker:verify_install (first_time)
** Invoke webpacker:check_node (first_time)
** Execute webpacker:check_node
** Invoke webpacker:check_yarn (first_time)
** Execute webpacker:check_yarn
** Invoke webpacker:check_webpack_binstubs (first_time)
** Execute webpacker:check_webpack_binstubs
** Execute webpacker:verify_install
Webpacker is installed 🎉 🍰
Using /Users/Erik/Desktop/Code/test/config/webpacker.yml file for setting up webpack paths
** Invoke environment 
** Execute webpacker:compile
[Webpacker] Compiling assets 🎉
[Webpacker] Compilation Failed
Hash: bb530fe9b256af61d40b
Version: webpack 2.6.0
Time: 11853ms
                                 Asset       Size  Chunks                    Chunk Names
application-f1044aff7d41a0cfc0af.js.gz  323 bytes          [emitted]         
           App-da1e7f9d53a7a2c5797a.js    2.35 MB    0, 1  [emitted]  [big]  App
   application-f1044aff7d41a0cfc0af.js  552 bytes       2  [emitted]         application
          App-bb530fe9b256af61d40b.css  266 bytes    0, 1  [emitted]         App
        index-bb530fe9b256af61d40b.css  266 bytes    1, 0  [emitted]         index
         index-c88aba159e3987f50abe.js    2.35 MB    1, 0  [emitted]  [big]  index
       App-bb530fe9b256af61d40b.css.gz  156 bytes          [emitted]         
     index-bb530fe9b256af61d40b.css.gz  156 bytes          [emitted]         
        App-da1e7f9d53a7a2c5797a.js.gz     472 kB          [emitted]  [big]  
      index-c88aba159e3987f50abe.js.gz     472 kB          [emitted]  [big]  
                         manifest.json  280 bytes          [emitted]         
   [0] ./~/moment/moment.js 129 kB {0} {1} [built]
   [1] ./~/react/react.js 56 bytes {0} {1} [built]
   [7] ./~/react-redux/es/index.js 194 bytes {0} {1} [built]
  [10] ./~/react-router-redux/es/index.js 356 bytes {0} {1} [built]
  [15] ./~/redux-persist/es/index.js 978 bytes {0} {1} [built]
  [18] ./app/javascript/packs/index.js 1.21 kB {0} {1} [built]
  [19] ./~/react-router-dom/es/index.js 925 bytes {0} {1} [built]
  [39] ./~/react-dom/index.js 59 bytes {0} {1} [built]
  [64] ./~/redux/es/index.js 1.08 kB {0} {1} [built]
  [98] ./~/history/createBrowserHistory.js 9.53 kB {0} {1} [built]
 [301] ./app/javascript/packs/App.js 2.6 kB {0} {1} [built]
 [316] ./app/javascript/packs/reducers/rootReducer.js 394 bytes {0} {1} [built]
 [317] ./~/redux-logger/lib/index.js 5.4 kB {0} {1} [built]
 [318] ./~/redux-thunk/lib/index.js 529 bytes {0} {1} [built]
 [545] ./app/javascript/packs/application.js 515 bytes {2} [built]
    + 536 hidden modules

ERROR in App-da1e7f9d53a7a2c5797a.js from UglifyJs
Unexpected character '`' [App-da1e7f9d53a7a2c5797a.js:52539,39]

ERROR in index-c88aba159e3987f50abe.js from UglifyJs
Unexpected character '`' [index-c88aba159e3987f50abe.js:52539,39]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/styles/camps/Camps.scss 219 bytes {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
       [1] ./~/css-loader!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/styles/camps/RoomTypeCard.scss 413 bytes {0} [built]
gauravtiwari commented 7 years ago

@thisiserik Ahh, then I would suggest to give babili a shot. - yarn add babel-preset-babili and remove uglify altogether.

erikshestopal commented 7 years ago

@gauravtiwari Would I remove uglify: true from .babelrc, correct?

erikshestopal commented 7 years ago

@gauravtiwari As such? 

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
      },
      "useBuiltIns": true
    }],
    "react",

  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}
gauravtiwari commented 7 years ago

Yes please - everything related to uglify must go

gauravtiwari commented 7 years ago

If you are feeling fancy you can give prepack a try with babili using - https://github.com/gajus/prepack-webpack-plugin

  // production.js
  devtool: 'source-map',

  plugins: [
    new PrepackWebpackPlugin({ sourceMaps: true }),
    new BabiliPlugin(),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
    })
  ]

Note: Sourcemap is optional you can remove devtool and sourcemap from prepack option - much smaller bundle size.

erikshestopal commented 7 years ago

@gauravtiwari That did the trick! Thanks.

Here is the contents of the my files that got the deploy to work after running npm install --save babili 

/* .babelrc */ 

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "uglify": true, /* remove */ 
        "browsers": "> 1%",
      },
      "useBuiltIns": true
    }],
    "react",

  ],
  "plugins": [
    "transform-object-rest-spread",
    "babili"
  ]
}

/* production.js */ 

/* eslint global-require: 0 */
// Note: You must run bin/webpack for changes to take effect

const webpack = require('webpack')
const merge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin')
const sharedConfig = require('./shared.js')

module.exports = merge(sharedConfig, {
  output: { filename: '[name]-[chunkhash].js' },

  plugins: [
    // new webpack.optimize.UglifyJsPlugin(),
    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|svg|eot|ttf|woff|woff2)$/
    })
  ]
})

/* package.json */

{
  "dependencies": {
    "animated-scroll-to": "^1.0.1",
    "autoprefixer": "^7.1.1",
    "axios": "^0.16.1",
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-babili": "^0.1.2",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.23.0",
    "babili": "^0.1.2",
    "bootstrap": "^4.0.0-alpha.6",
    "classnames": "^2.2.5",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "halogen": "^0.2.0",
    "js-yaml": "^3.8.4",
    "moment": "^2.18.1",
    "node-sass": "^4.5.3",
    "npm": "^4.6.1",
    "octicons": "^5.0.1",
    "parse-link-header": "^1.0.0",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.2",
    "precss": "^1.4.0",
    "prop-types": "^15.5.8",
    "rails-erb-loader": "^5.0.1",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-shallow-compare": "^15.5.1",
    "react-addons-transition-group": "^15.4.2",
    "react-dates": "^10.0.0",
    "react-dom": "^15.4.2",
    "react-octicon": "^2.0.0",
    "react-octicons-svg": "^1.1.13",
    "react-redux": "^5.0.4",
    "react-router-dom": "^4.0.0",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-stripe-checkout": "^2.2.5",
    "reactstrap": "^4.4.0",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.1",
    "redux-persist": "^4.0.0-beta1.2",
    "redux-thunk": "^2.2.0",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.1",
    "uglify-js": "^3.0.13",
    "webpack": "^2.6.0",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }
}
gauravtiwari commented 7 years ago

@thisiserik babili should be under presets and not plugins 👍

bajalovic commented 7 years ago

Hi there,

I am also having an issue, with deploying using capistrano


 DEBUG [3cbcc299]   Webpacker is installed 🎉 🍰

 DEBUG [3cbcc299]

 DEBUG [3cbcc299]   Using /home/deploy/apps/habitat/releases/20170602161234/config/webpacker.yml file for setting up webpack paths

 DEBUG [3cbcc299]

 DEBUG [3cbcc299]   [Webpacker] Compiling assets 🎉

 DEBUG [3cbcc299]

 DEBUG [3cbcc299]   [Webpacker] Compilation Failed

yarn run v0.24.5

$ "/home/deploy/apps/habitat/releases/20170602161234/node_modules/.bin/webpack" --config /home/deploy/apps/habitat/releases/20170602161234/config/webpack/production.js

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Killed

error Command failed with exit code 137.

This is my .babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

and package.json

{
  "name": "habitat",
  "private": true,
  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^3.3.7",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "jquery": "^3.2.1",
    "js-yaml": "^3.8.4",
    "masonry-layout": "^4.2.0",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-cssnext": "^2.11.0",
    "postcss-loader": "^2.0.5",
    "postcss-smart-import": "^0.7.4",
    "prop-types": "^15.5.10",
    "query-string": "^4.3.4",
    "rails-erb-loader": "^5.0.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-google-maps": "^6.3.0",
    "react-select": "^1.0.0-rc.5",
    "react-slick": "^0.14.11",
    "resolve-url-loader": "^2.0.2",
    "sass-loader": "^6.0.5",
    "slick-carousel": "^1.6.0",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.1",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  },
  "postinstall": "npm rebuild node-sass"
}

Rails 5.1.1 and Node 6.9.1

Any hint where to look up for the issue?

gauravtiwari commented 7 years ago

Which webpacker version are you using?