CircleCI中的Poltergeist：TypeError：未定义不是对象（正在评估'this .__ reactAutoBindMap'）

Question

• Webpacker版本：3.5.5
• 反应/ ReactDOM版本：16.6.3
• Poltergeist版本：1.10.0
• 反应轨版本：1.6.2
• React_UJS版本：2.4.4

问题：

在CircleCI上运行我的测试版本时，我遇到了---- Capybara::Poltergeist::JavascriptError:

的几种不同风格

部分查看我的.circleci / config.yml

 - run:
      name: precompile assets (webpacker)
      command: NODE_ENV=test bundle exec rake webpacker:compile

使用webpack-dev-server的Chrome浏览器中的所有内容均应正常显示。名字后面的大空白只是一个已编辑的姓氏。

使用NODE_ENV = test运行构建时，我在Circle中收到此错误...

Invariant Violation: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%2C%20_store%7D&args[]=

（我已经研究了此异常，但在我们的上下文中我不理解它）

https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%2C%20_store%7D&args[]=

由于以开发人员身份运行时一切运转良好，因此我决定将NODE_ENV切换到开发以查看结果。以下是我得到的错误。

TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')

不幸的是，我只有一篇SO帖子可以找到提到'this.__reactAutoBindMap'的任何内容，而我在该帖子上没有发现任何帮助。 （TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')）

Procfile

web: bundle exec rails s
webpacker: yarn start

package.json

{
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@rails/webpacker": "3.5",
    "babel-preset-react": "^6.24.1",
    "caniuse-lite": "^1.0.30000697",
    "jquery": "^3.3.1",
    "prop-types": "^15.6.2",
    "rails-erb-loader": "^5.5.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react_ujs": "^2.4.4",
    "webpack": "^3.0.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.0",
    "@babel/core": "^7.2.0",
    "webpack-dev-server": "2.11.2"
  },
  "scripts": {
    "start": "./bin/webpack-dev-server"
  }
}

.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["last 2 versions", "safari >= 7"],
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

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: ['app/javascript/react_16_components']

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

  extensions:
    - .jsx
    - .js
    - .js.erb
    - .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

app / javascript / packs / application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
import "@babel/polyfill";

const react16Components = require.context('react_16_components',  true);
const ReactRailsUJS = require('react_ujs');
const $ = require('jquery');

ReactRailsUJS.useContext(react16Components);

// Generates and exposes Rails named URLs within React components!
// -- Restarting the server as you would when adding a new Rails route should expose it to the JS world, too.
require('../rails-js-routes/js-routes');

react_test.html.haml（current_user只是一个User对象）

= react_component 'admin/hello', visitor: current_user

组件：

app / javascript / react_16_components / admin / hello.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Nav from '../navigation/nav'

export default class Hello extends Component {
  static propTypes = {
    visitor: PropTypes.object.isRequired
  };

  seeingRed() {
    $('#color-here').css('color', 'red');
  }

  render() {
    const { visitor } = this.props;

    return(
      <div style={{'textAlign': 'center'}}>
        <Nav visitor={visitor.full_name} />
        <div>Lets hope webpack gives us minimal trouble!</div>
        <button id='color-here' onClick={this.seeingRed}>Click Here!</button>
      </div>
    );
  }
}

app / javascript / react_16_components / navigation / nav.jsx

import React from 'react'

const Nav = ({visitor}) => (
  <div><h3>{`H! ${visitor} -- I'm a stateless component navigation bar! I swear (⌐■_■)`}</h3></div>
);

export default Nav;

app / javascript / rails-js-routes / js-routes.js.erb

<%# encoding: UTF-8 %>

<%= JsRoutes.generate() %>

app / config / webpack / loaders / erb.js

module.exports = {
  test: /\.erb$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: [{
    loader: 'rails-erb-loader',
    options: {
      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
    }
  }]
}

app / config / webpack / environment.js

const { environment } = require('@rails/webpacker');
const erb =  require('./loaders/erb');

environment.loaders.append('erb', erb);

module.exports = environment;

app / config / webpack / test.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

上下文：

我们正在尝试将带有大量用CoffeeScript编写的JS的大型应用程序迁移到新版本的React。我没有改变版本并处理React-Rails gem中的弃用警告，而是尝试使其运行，以便我们暂时运行两个版本的React，以便每次同工接触旧的和过时的CoffeeScript文件，他们使用react-codemod和其他工具将代码转换为新的React 16文件（并将其放置在新的目录树中，以供Webpack而非Sprockets使用，填充/编译和编译）。我仍然不确定这是否可行，但是我能够在本地开发中运行良好，因此有希望（著名的遗言）。我还能够通过= react_component()来渲染旧的React 0.14组件，方法是在React 16组件的顶部使用camelCase类名，使用相同的辅助方法，但在同一页面上使用path参数而不是类名，没有控制台错误。

由于我们以非常规的方式（继承）使用React，因此我们对jQuery和Rails命名的路由暴露于React代码有怪异的依赖。我们已经将其添加到了我们的应用程序中，而不仅仅是暴露了Rails API，以便我们可以使用ReactRouter和Axios（或其他工具）以更像React的方式渲染/获取/操作数据。

我发现我的理解不多，Webpacker的约定有些“神奇”，这使我感到困惑。我几乎宁愿使用自己的Webpack配置而不是使用gem，但是为了希望我犯了一个相当愚蠢的错误（除了尝试使用两个版本的React），我想把它放在那里，看看是否有人可以帮助阐明一些。对Babel和Webpack来说是超级新手，所以请放轻松-但会爱上任何人的帮助。

谢谢。