🐛 fix dependencies issues

.browserslistrc

@@ -1 +0,0 @@
-defaults

.yarnclean

@@ -34,8 +34,6 @@ Gruntfile.js
 .flowconfig
 .documentup.json
 .yarn-metadata.json
-.*.yml
-*.yml
 
 # misc
 *.gz

Gemfile.lock

@@ -356,7 +356,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.3.1)
+    loofah (2.4.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -388,7 +388,7 @@ GEM
       net-ssh (>= 2.6.5, < 6.0.0)
     net-ssh (5.2.0)
     nio4r (2.5.1)
-    nokogiri (1.10.5)
+    nokogiri (1.10.7)
       mini_portile2 (~> 2.4.0)
     nokogumbo (2.0.1)
       nokogiri (~> 1.8, >= 1.8.4)
@@ -660,7 +660,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (4.2.0)
+    webpacker (4.2.2)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)

Procfile.dev

@@ -1,4 +1,4 @@
 web: env PORT=3000 bundle exec puma -C config/puma.rb
 sidekiq: env PORT=3000 bundle exec sidekiq
-stream: env PORT=4000 yarn run start
+stream: killall node && env PORT=4000 yarn run start
 webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0

app/javascript/packs/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

babel.config.js

@@ -1,71 +1,91 @@
-module.exports = (api) => {
-  const env = api.env();
+module.exports = function (api) {
+  var validEnv = ['development', 'test', 'production'];
+  var currentEnv = api.env();
+  var isDevelopmentEnv = api.env('development');
+  var isProductionEnv = api.env('production');
+  var isTestEnv = api.env('test');
 
-  const reactOptions = {
-    development: false,
-  };
-
-  const envOptions = {
-    loose: true,
-    modules: false,
-    debug: false,
-  };
-
-  const config = {
-    presets: [
-      ['@babel/react', reactOptions],
-      ['@babel/env', envOptions],
-    ],
-    plugins: [
-      ['@babel/proposal-decorators', { legacy: true }],
-      '@babel/proposal-class-properties',
-      ['react-intl', { messagesDir: './build/messages' }],
-      'preval',
-    ],
-    overrides: [
-      {
-        test: /tesseract\.js/,
-        presets: [
-          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
-        ],
-      },
-    ],
-  };
-
-  switch (env) {
-  case 'production':
-    config.plugins.push(...[
-      'lodash',
-      [
-        'transform-react-remove-prop-types',
-        {
-          mode: 'remove',
-          removeImport: true,
-          additionalLibraries: [
-            'react-immutable-proptypes',
-          ],
-        },
-      ],
-      '@babel/transform-react-inline-elements',
-      [
-        '@babel/transform-runtime',
-        {
-          helpers: true,
-          regenerator: false,
-          useESModules: true,
-        },
-      ],
-    ]);
-    break;
-  case 'development':
-    reactOptions.development = true;
-    envOptions.debug = true;
-    break;
-  case 'test':
-    envOptions.modules = 'commonjs';
-    break;
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: ' +
+      JSON.stringify(currentEnv) +
+      '.',
+    );
   }
 
-  return config;
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current',
+          },
+          modules: 'commonjs',
+        },
+        '@babel/preset-react',
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns       : 'entry',
+          corejs            : 3,
+          modules           : false,
+          exclude           : ['transform-typeof-symbol'],
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true,
+        },
+      ],
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-decorators',
+        { 'legacy': true },
+      ],
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true,
+        },
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true,
+        },
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers    : false,
+          regenerator: true,
+          corejs     : false,
+        },
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false,
+        },
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true,
+        },
+      ],
+    ].filter(Boolean),
+  };
 };
-

bin/webpack

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

bin/webpack-dev-server

@@ -7,7 +7,6 @@ require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"

config/webpack/test.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()

config/webpacker.yml

@@ -7,7 +7,7 @@ default: &default
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
-  webpack_compile_output: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -34,6 +34,7 @@ default: &default
     - .woff2
 
   extensions:
+    - .jsx
     - .mjs
     - .js
     - .sass
@@ -69,6 +70,7 @@ development:
     disable_host_check: true
     use_local_ip: false
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

package.json

@@ -68,6 +68,7 @@
     "@babel/preset-react": "^7.7.4",
     "@babel/runtime": "^7.7.4",
     "@clusterws/cws": "^0.16.0",
+    "@rails/webpacker": "^4.2.2",
     "array-includes": "^3.0.3",
     "arrow-key-navigation": "^1.1.0",
     "autoprefixer": "^9.6.1",
@@ -119,10 +120,10 @@
     "pg": "^6.4.0",
     "postcss-loader": "^3.0.0",
     "postcss-object-fit-images": "^1.1.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.7.2",
     "punycode": "^2.1.0",
     "rails-ujs": "^5.2.4",
-    "react": "^16.10.2",
+    "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hotkeys": "^1.1.4",
     "react-immutable-proptypes": "^2.1.0",