Cloud 9 / Webpack / Rails settings

[kingpalethe]

I have been developing an application with webpacker/rails 5.2.

I have found 4 or 5 problems, and I can't tell which is related to which.

I am able to run the dev server, but I do have to tolerate this error appearing in the chrome console every three seconds.

Failed to load https://xxxx.c9users.io:8082/sockjs-node/info?t=1523421350452: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxx.c9users.io' is therefore not allowed access. The response had HTTP status code 503.

That is actually a best-case scenario. The really bad stuff seems to happen at random, like when I sit down to use the dev server after not having done it for a few hours. Suddenly, the dev server won't load in the browser, and in the Chrome console, I see this error message:

Refused to execute script from 'https://xxxx.c9users.io/packs/app-db2321ee442b54d8590a.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Interestingly, I have found the above error to be intermittent.... sometimes I can make it go away just by refreshing the web page a few times. This makes me think there might be a race condition somewhere.

So. I do roughly have a process to get the server back and running again... it take 5 to 10 minutes. To fix it, I do the following process:

1. I quit the rails server with CNTRL-C. The console confirms that both Rails and Webpackler have exited.
2. I restart the Cloud 9 instance. (If I skip this step, Webpacker won't run, because even though it should be dead, it is still using the 8082 port somehow, and I am unable how to figure out how to kill or even find the process using a utility like PS.)
3. After I restart the instance, when I try to run my startup script, I almost always get this error:

04:29:09 webpacker.1 | /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:47:in `exec': No such file or directory - /home/ubuntu/workspace/xxx/node_modules/.bin/webpack-dev-server (Errno::ENOENT)

To fix this error, I run these commands

bundle exec rails webpacker:install
bundle exec rails webpacker:install:react

These commands produce quite a lot of confusing errors, like:

attern ["prop-types@^15.6.1"] is trying to unpack in the same destination "/home/ubuntu/.cache/yarn/v1/npm-prop-types-15.6.1-36644453564255ddda391191fb3a125cbdf654ca" as pattern ["prop-types@^15.6.0","prop-types@^15.6.0"]. This could result in non-deterministic behavior, skipping.
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > react-web3@0.4.5" has incorrect peer dependency "react@^15.6.1".
warning " > webpack-cli@2.0.14" has unmet peer dependency "webpack@^4.0.0".
warning " > webpack-dev-server@2.11.2" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".

However, I can now boot rails and webpacker with my startup script (see startup script below)

The development app now loads, but now, every 3 seconds or so, I see this in the chrome console:

Failed to load https://xxxx.c9users.io:8082/sockjs-node/info?t=1523421350452: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxx.c9users.io' is therefore not allowed access. The response had HTTP status code 503.

I am guessing that this has something to do with hot module reloading.... and even though I see this error, I am still able to use the development server.

Typically at this point I CAN continue to use Webpack dev server for a few hours, but if I ever need to stop it and start it again, I need to start at the beginning and run through all of these errors again.

Here is a complete documentation of my environment:

Host: Cloud9 / Ubuntu 14.04

This is the bash script I am using to start rails and webpacker

#!/bin/bash
pkill -9 ruby
sudo service postgresql restart

# https://github.com/rails/webpacker/blob/master/docs/cloud9.md

# Immediately exit script on first error
set -e -o pipefail

if [ -n "${C9_USER}" ]; then
  # We are in a Cloud9 machine
  # Make sure that Postgres is running
  sudo service postgresql status || sudo service postgresql start

  # Adapt the configuration of the webpack-dev-server
  export APP_DOMAIN="${C9_HOSTNAME}"
  export RAILS_SERVER_BINDING='0.0.0.0'
  export RAILS_SERVER_PORT='8080'
  export WEBPACKER_DEV_SERVER_PORT='8082'
  export WEBPACKER_DEV_SERVER_HTTPS='true'
  export WEBPACKER_DEV_SERVER_HOST="localhost"
  export WEBPACKER_DEV_SERVER_PUBLIC="${C9_HOSTNAME}:${WEBPACKER_DEV_SERVER_PORT}"
  export WEBPACKER_DEV_SERVER_HMR='false'
  export WEBPACKER_DEV_SERVER_INLINE='false'
  export WEBPACKER_DEV_SERVER_OVERLAY='true'
  export WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK='true'
  export WEBPACKER_DEV_SERVER_USE_LOCAL_IP='false'
fi

foreman start -f Procfile.dev

This is my Procfile.dev

web: ./bin/rails server -b ${RAILS_SERVER_BINDING:-localhost} -p ${RAILS_SERVER_PORT:-3000}
webpacker: ./bin/webpack-dev-server

This is my Webpacker.yml

  # Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

This is my Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'
gem 'rails', '~> 5.2'
gem 'pg'
gem 'puma', '~> 3.11'
gem 'uglifier', '>= 1.3.0'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.1.0', require: false
group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'platform-api'
gem 'dotenv-rails'
gem 'webpacker'
gem 'bootstrap'
gem 'jquery-rails'
gem "bootstrap_form",
    git: "https://github.com/bootstrap-ruby/bootstrap_form.git",
    branch: "master"
gem 'devise'    
gem 'ethereum.rb'
gem 'httparty' 
gem 'local_time'

This is my package.json

{
  "name": "xxxxx",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "3.4",
    "axios": "^0.18.0",
    "babel-preset-react": "^6.24.1",
    "bignumber.js": "^6.0.0",
    "font-awesome": "^4.7.0",
    "lodash": "^4.17.5",
    "math.js": "^1.1.43",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-image-resizer": "^1.3.0",
    "react-web3": "^0.4.5",
    "truffle": "^4.1.5",
    "truffle-contract": "^3.0.4",
    "web3": "^0.20.0"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "2.11.2"
  }
}

This is in config/initializers/content_security_policy.rb

Rails.application.config.content_security_policy do |policy|
    policy.connect_src :self, :https,
    'http://xxxx.c9users.io:8082',
    'ws://xxxx.c9users.io:8082' if Rails.env.development?
end

# If you are using UJS then enable automatic nonce generation
Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }

Note -- I have tried these other troubleshooting steps.

1. Deleting webpacker.yml
2. Deleting the entire node_modules directory, and running yarn install

[kingpalethe]

For what it's worth, this error seems to be solved (so far)

Failed to load https://xxxx.c9users.io:8082/sockjs-node/info?t=1523421350452: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xxxxx.c9users.io' is therefore not allowed access. The response had HTTP status code 503.

It's solved by commenting out these lines in the start script

  # Adapt the configuration of the webpack-dev-server
  export APP_DOMAIN="${C9_HOSTNAME}"
  export RAILS_SERVER_BINDING='0.0.0.0'
  export RAILS_SERVER_PORT='8080'
  # export WEBPACKER_DEV_SERVER_PORT='8082'
  # export WEBPACKER_DEV_SERVER_HTTPS='true'
  # export WEBPACKER_DEV_SERVER_HOST="localhost"
  # export WEBPACKER_DEV_SERVER_PUBLIC="${C9_HOSTNAME}:${WEBPACKER_DEV_SERVER_PORT}"
  # export WEBPACKER_DEV_SERVER_HMR='false'
  # export WEBPACKER_DEV_SERVER_INLINE='false'
  # export WEBPACKER_DEV_SERVER_OVERLAY='true'
  # export WEBPACKER_DEV_SERVER_DISABLE_HOST_CHECK='true'
  # export WEBPACKER_DEV_SERVER_USE_LOCAL_IP='false'

... and then hard-coding these values in webpacker.yml

  dev_server:
    https: true
    host: localhost
    port: 8082
    public: xxxxxxxx.c9users.io:8082
    hmr: false
    inline: false
    overlay: true
    disable_host_check: true
    use_local_ip: false

[kingpalethe]

This fix doesn't seem to solve the issue where the webpacker-dev-server disappears.... after stopping the application, and trying to start it again, I still get this error

14:16:51 webpacker.1 | /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:47:in `exec': No such file or directory - /home/ubuntu/workspace/factbar/node_modules/.bin/webpack-dev-server (Errno::ENOENT)
14:16:51 webpacker.1 |  from /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:47:in `block in execute_cmd'
14:16:51 webpacker.1 |  from /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:46:in `chdir'
14:16:51 webpacker.1 |  from /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:46:in `execute_cmd'
14:16:51 webpacker.1 |  from /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/dev_server_runner.rb:11:in `run'
14:16:51 webpacker.1 |  from /usr/local/rvm/gems/ruby-2.5.1/gems/webpacker-3.4.3/lib/webpacker/runner.rb:6:in `run'

[kingpalethe]

Someone smarter than me should probably take a look at these directions, my guess is that something here is now outdated: https://github.com/rails/webpacker/blob/master/docs/cloud9.md

[guillaumebriday]

Is this issue still relevant ?

Can it be closed if not ?