React_on_rails: Can't deploy to heroku due to Syntax Error (unrecognized JSX)

Created on 17 Apr 2018 · 3Comments · Source: shakacode/react_on_rails

Hi,
just did a fresh install with Rails 5.1.5, added react_on_rails, works nice locally, but fails to deploy (it doesn't seem to recognize JSX).

simulator master $ git push heroku master Counting objects: 539, done. Delta compression using up to 8 threads. Compressing objects: 100% (424/424), done. Writing objects: 100% (539/539), 237.61 KiB | 0 bytes/s, done. Total 539 (delta 183), reused 216 (delta 60) remote: Compressing source files... done. remote: Building source: remote: remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): unspecified remote: engines.npm (package.json): unspecified (use default) remote: engines.yarn (package.json): unspecified (use default) remote: remote: Resolving node version 8.x... remote: Downloading and installing node 8.11.1... remote: Using default npm version: 5.6.0 remote: Resolving yarn version 1.x... remote: Downloading and installing yarn (1.6.0)... remote: Installed yarn 1.6.0 remote: remote: -----> Restoring cache remote: Skipping cache restore (not-found) remote: remote: -----> Building dependencies remote: Installing node modules (yarn.lock) remote: yarn install v1.6.0 remote: [1/4] Resolving packages... remote: [2/4] Fetching packages... remote: info [email protected]: The platform "linux" is incompatible with this module. remote: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. remote: [3/4] Linking dependencies... remote: warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697". remote: warning " > [email protected]" has unmet peer dependency "babel-runtime@>= 6". remote: warning " > [email protected]" has unmet peer dependency "js-yaml@>= 3.0.0". remote: warning " > [email protected]" has incorrect peer dependency "react@^0.14 || ^15.0.0-rc || ^15.0". remote: warning " > [email protected]" has incorrect peer dependency "react-dom@^0.14 || ^15.0.0-rc || ^15.0". remote: warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0". remote: warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0". remote: [4/4] Building fresh packages... remote: Done in 32.28s. remote: remote: -----> Caching build remote: Clearing previous node cache remote: Saving 2 cacheDirectories (default): remote: - node_modules remote: - bower_components (nothing to cache) remote: remote: -----> Pruning devDependencies remote: yarn install v1.6.0 remote: [1/4] Resolving packages... remote: [2/4] Fetching packages... remote: info [email protected]: The platform "linux" is incompatible with this module. remote: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. remote: [3/4] Linking dependencies... remote: warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697". remote: warning " > [email protected]" has unmet peer dependency "babel-runtime@>= 6". remote: warning " > [email protected]" has unmet peer dependency "js-yaml@>= 3.0.0". remote: warning " > [email protected]" has incorrect peer dependency "react@^0.14 || ^15.0.0-rc || ^15.0". remote: warning " > [email protected]" has incorrect peer dependency "react-dom@^0.14 || ^15.0.0-rc || ^15.0". remote: warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0". remote: warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0". remote: [4/4] Building fresh packages... remote: warning Ignored scripts due to flag. remote: Done in 7.51s. remote: remote: -----> Build succeeded! remote: ! This app may not specify any way to start a node process remote: https://devcenter.heroku.com/articles/nodejs-support#default-web-process-type remote: remote: ! Unmet dependencies don't fail yarn install but may cause runtime issues remote: https://github.com/npm/npm/issues/7494 remote: remote: -----> Ruby app detected remote: -----> Compiling Ruby/Rails remote: -----> Using Ruby version: ruby-2.3.7 remote: -----> Installing dependencies using bundler 1.15.2 remote: Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment remote: Fetching gem metadata from https://rubygems.org/......... remote: Fetching version metadata from https://rubygems.org/.. remote: Fetching dependency metadata from https://rubygems.org/. remote: Fetching rake 12.3.1 remote: Fetching concurrent-ruby 1.0.5 remote: Fetching minitest 5.11.3 remote: Installing rake 12.3.1 remote: Installing minitest 5.11.3 remote: Installing concurrent-ruby 1.0.5 remote: Fetching thread_safe 0.3.6 remote: Installing thread_safe 0.3.6 remote: Fetching builder 3.2.3 remote: Installing builder 3.2.3 remote: Fetching erubi 1.7.1 remote: Fetching mini_portile2 2.3.0 remote: Installing erubi 1.7.1 remote: Installing mini_portile2 2.3.0 remote: Fetching crass 1.0.4 remote: Fetching rack 2.0.4 remote: Installing crass 1.0.4 remote: Fetching nio4r 2.3.0 remote: Installing rack 2.0.4 remote: Installing nio4r 2.3.0 with native extensions remote: Fetching websocket-extensions 0.1.3 remote: Installing websocket-extensions 0.1.3 remote: Fetching mini_mime 1.0.0 remote: Installing mini_mime 1.0.0 remote: Fetching arel 8.0.0 remote: Installing arel 8.0.0 remote: Fetching public_suffix 3.0.2 remote: Using bundler 1.15.2 remote: Fetching coffee-script-source 1.12.2 remote: Installing public_suffix 3.0.2 remote: Installing coffee-script-source 1.12.2 remote: Fetching execjs 2.7.0 remote: Fetching method_source 0.9.0 remote: Installing execjs 2.7.0 remote: Installing method_source 0.9.0 remote: Fetching thor 0.20.0 remote: Fetching connection_pool 2.2.1 remote: Installing thor 0.20.0 remote: Installing connection_pool 2.2.1 remote: Fetching diff-lcs 1.3 remote: Fetching ffi 1.9.23 remote: Installing diff-lcs 1.3 remote: Fetching multi_json 1.13.1 remote: Installing multi_json 1.13.1 remote: Fetching libv8 6.3.292.48.1 (x86_64-linux) remote: Installing ffi 1.9.23 with native extensions remote: Installing libv8 6.3.292.48.1 (x86_64-linux) remote: Fetching pg 1.0.0 remote: Installing pg 1.0.0 with native extensions remote: Fetching puma 3.11.4 remote: Installing puma 3.11.4 with native extensions remote: Fetching rb-fsevent 0.10.3 remote: Installing rb-fsevent 0.10.3 remote: Fetching rspec-support 3.7.1 remote: Installing rspec-support 3.7.1 remote: Fetching tilt 2.0.8 remote: Installing tilt 2.0.8 remote: Fetching turbolinks-source 5.1.0 remote: Installing turbolinks-source 5.1.0 remote: Fetching rainbow 2.2.2 remote: Installing rainbow 2.2.2 with native extensions remote: Fetching i18n 1.0.0 remote: Installing i18n 1.0.0 remote: Fetching tzinfo 1.2.5 remote: Installing tzinfo 1.2.5 remote: Fetching nokogiri 1.8.2 remote: Installing nokogiri 1.8.2 with native extensions remote: Fetching websocket-driver 0.6.5 remote: Installing websocket-driver 0.6.5 with native extensions remote: Fetching mail 2.7.0 remote: Installing mail 2.7.0 remote: Fetching rack-test 1.0.0 remote: Installing rack-test 1.0.0 remote: Fetching rack-proxy 0.6.4 remote: Installing rack-proxy 0.6.4 remote: Fetching sprockets 3.7.1 remote: Installing sprockets 3.7.1 remote: Fetching addressable 2.5.2 remote: Installing addressable 2.5.2 remote: Fetching coffee-script 2.4.1 remote: Installing coffee-script 2.4.1 remote: Fetching uglifier 4.1.9 remote: Installing uglifier 4.1.9 remote: Fetching mini_racer 0.1.15 remote: Installing mini_racer 0.1.15 with native extensions remote: Fetching rb-inotify 0.9.10 remote: Installing rb-inotify 0.9.10 remote: Fetching rspec-core 3.7.1 remote: Installing rspec-core 3.7.1 remote: Fetching rspec-expectations 3.7.0 remote: Installing rspec-expectations 3.7.0 remote: Fetching rspec-mocks 3.7.0 remote: Installing rspec-mocks 3.7.0 remote: Fetching turbolinks 5.1.1 remote: Installing turbolinks 5.1.1 remote: Fetching activesupport 5.1.6 remote: Fetching loofah 2.2.2 remote: Installing loofah 2.2.2 remote: Installing activesupport 5.1.6 remote: Fetching sass-listen 4.0.0 remote: Installing sass-listen 4.0.0 remote: Fetching rspec 3.7.0 remote: Installing rspec 3.7.0 remote: Fetching rails-html-sanitizer 1.0.4 remote: Installing rails-html-sanitizer 1.0.4 remote: Fetching sass 3.5.6 remote: Installing sass 3.5.6 remote: Fetching rails-dom-testing 2.0.3 remote: Installing rails-dom-testing 2.0.3 remote: Fetching globalid 0.4.1 remote: Installing globalid 0.4.1 remote: Fetching activemodel 5.1.6 remote: Installing activemodel 5.1.6 remote: Fetching jbuilder 2.7.0 remote: Fetching actionview 5.1.6 remote: Installing jbuilder 2.7.0 remote: Installing actionview 5.1.6 remote: Fetching activejob 5.1.6 remote: Installing activejob 5.1.6 remote: Fetching activerecord 5.1.6 remote: Installing activerecord 5.1.6 remote: Fetching actionpack 5.1.6 remote: Installing actionpack 5.1.6 remote: Fetching actioncable 5.1.6 remote: Installing actioncable 5.1.6 remote: Fetching actionmailer 5.1.6 remote: Fetching railties 5.1.6 remote: Installing actionmailer 5.1.6 remote: Installing railties 5.1.6 remote: Fetching sprockets-rails 3.2.1 remote: Installing sprockets-rails 3.2.1 remote: Fetching coffee-rails 4.2.2 remote: Fetching rails 5.1.6 remote: Installing coffee-rails 4.2.2 remote: Installing rails 5.1.6 remote: Fetching sass-rails 5.0.7 remote: Fetching webpacker 3.4.3 remote: Installing sass-rails 5.0.7 remote: Installing webpacker 3.4.3 remote: Fetching react_on_rails 10.0.2 remote: Installing react_on_rails 10.0.2 remote: Bundle complete! 20 Gemfile dependencies, 71 gems now installed. remote: Gems in the groups development and test were not installed. remote: Bundled gems are installed into ./vendor/bundle. remote: Bundle completed (33.62s) remote: Cleaning up the bundler cache. remote: -----> Detecting rake tasks remote: -----> Preparing app for Rails asset pipeline remote: Running: rake assets:precompile remote: ReactOnRails: Set generated_assets_dir to default: public/webpack/production remote: cd /tmp/build_93fd636f62c13aa901396765b5b646cc && RAILS_ENV=production bin/webpack remote: Hash: fa96312fb31240ca4f50 remote: Version: webpack 3.11.0 remote: Time: 1768ms remote: Asset Size Chunks Chunk Names remote: hello-world-bundle-012443c678121fbca9cb.js 901 kB 0 [emitted] [big] hello-world-bundle remote: hello_react-cbedc3a09ac1270ea6f2.js 2.98 kB 1 [emitted] hello_react remote: application-db50d639870ec0024f48.js 3.27 kB 2 [emitted] application remote: hello-world-bundle-012443c678121fbca9cb.js.map 1.02 MB 0 [emitted] hello-world-bundle remote: hello_react-cbedc3a09ac1270ea6f2.js.map 2.5 kB 1 [emitted] hello_react remote: application-db50d639870ec0024f48.js.map 3.19 kB 2 [emitted] application remote: manifest.json 450 bytes [emitted] remote: [45] (webpack)/buildin/global.js 509 bytes {0} [built] remote: [64] ./app/javascript/packs/application.js 515 bytes {2} [built] remote: [65] ./app/javascript/packs/hello_react.jsx 226 bytes {1} [built] [failed] [1 error] remote: [66] ./app/javascript/packs/hello-world-bundle.js 224 bytes {0} [built] remote: + 131 hidden modules remote: remote: ERROR in ./app/javascript/packs/hello_react.jsx remote: Module build failed: SyntaxError: Unexpected token (10:2) remote: remote: 8 | remote: 9 | const Hello = props => ( remote: > 10 | <div>Hello {props.name}!</div> remote: | ^ remote: 11 | ) remote: 12 | remote: 13 | Hello.defaultProps = { remote: remote: remote: ERROR in ./app/javascript/bundles/HelloWorld/components/HelloWorld.jsx remote: Module build failed: SyntaxError: Unexpected token (16:6) remote: remote: 14 | render() { remote: 15 | return ( remote: > 16 | <App> remote: | ^ remote: 17 | <MainChart /> remote: 18 | <Timeline /> remote: 19 | </App> remote: remote: @ ./app/javascript/packs/hello-world-bundle.js 3:0-69 remote: rake aborted! remote: Command failed with status (2): [cd /tmp/build_93fd636f62c13aa901396765b5b6...] remote: /tmp/build_93fd636f62c13aa901396765b5b646cc/vendor/bundle/ruby/2.3.0/gems/react_on_rails-10.0.2/lib/tasks/assets.rake:64:in `block (3 levels) in <top (required)>' remote: /tmp/build_93fd636f62c13aa901396765b5b646cc/vendor/bundle/ruby/2.3.0/gems/rake-12.3.1/exe/rake:27:in `<top (required)>' remote: Tasks: TOP => assets:precompile => react_on_rails:assets:compile_environment => react_on_rails:assets:webpack remote: (See full trace by running task with --trace) remote: ! remote: ! Precompiling assets failed. remote: ! remote: ! Push rejected, failed to compile Ruby app. remote: remote: ! Push failed remote: Verifying deploy... remote: ! [remote rejected] master -> master (pre-receive hook declined) e

Source

hakunin

Most helpful comment

Followed the tutorial from README https://github.com/shakacode/react_on_rails where it says rails new my-app --webpack=react, but now I re-ran the command in an empty directory and it does create .babelrc.

I must have copied the files wrong when I moved them. Looks like mv somedir/* . omits dotfiles. https://askubuntu.com/questions/259383/how-can-i-get-mv-or-the-wildcard-to-move-hidden-files

hakunin on 17 Apr 2018

❤1 👍1