- Версия Webpacker: 3.5.5
- Версия React / ReactDOM: 16.6.3
- Версия Poltergeist: 1.10.0
- Версия React-Rails: 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
Все в моем браузере Chrome с использованием webpack-dev-server выглядит так, как должно.Большой пробел после имени - это просто отредактированная фамилия.
При запуске сборки с 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[]=
Поскольку все идет хорошокогда я работал как dev, я решил переключить NODE_ENV в разработку, чтобы посмотреть, что из этого получилось.Следующее было ошибкой, которую я получил.
TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')
К сожалению, есть только одна ТАК-я публикация, в которой упоминается что-то о 'this.__reactAutoBindMap', и я не нашел ничего полезного в посте.( TypeError: undefined не является объектом (оценивает 'this .__ ReactionAutoBindMap') )
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');
act_test.html.haml (current_user isпросто объект User)
= react_component 'admin/hello', visitor: current_user
Компоненты:
app / javascript / реаги_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 / реаги_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-routs / js-rout.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()
КОНТЕКСТ:
Мы пытаемся перенести наше большое приложение с большим количеством JS, написанных на CoffeeScript, на новую версию React.Вместо того, чтобы поднимать версию и прорабатывать предупреждения об устаревании в геме React-Rails, я пытаюсь сделать так, чтобы у нас временно работали две версии React и чтобы каждый раз, когда другой инженер прикасался к старому и устаревшему файлу CoffeeScriptони используют response-codemod и другие инструменты для преобразования кода в новый файл React 16 (и помещают его в новое дерево каталогов, которое будет использоваться, обрабатываться / транспортироваться и компилироваться Webpack вместо Sprockets).Я до сих пор не уверен, возможно ли это, но я умею хорошо управлять местным развитием, так что есть надежда (знаменитые последние слова).Я также могу рендерить старый компонент React 0.14 через = react_component(), используя имя класса camelCase поверх компонента React 16, используя тот же вспомогательный метод, но с аргументом пути вместо имени класса на той же странице, без консолиошибка.
У нас есть странные зависимости от jQuery и наших именованных маршрутов Rails, подвергающихся воздействию нашего кода React, потому что мы используем React довольно нетрадиционным способом (наследуемым).Мы добавили его в наше приложение тут и там, и не просто представили Rails API, чтобы мы могли использовать ReactRouter и Axios (или другие инструменты) для рендеринга / извлечения / манипулирования данными в более удобном для React-ишем виде.
Я обнаружил, что мое небольшое понимание и несколько «магия» конвенций Вебпакера запутывают меня.Я почти предпочел бы свернуть мою собственную конфигурацию Webpack вместо использования гема, но ради надежды я сделал довольно глупую ошибку (помимо попытки использовать две версии React), я хотел выложить это там, чтобы посмотреть, сможет ли кто-нибудьпомочь пролить свет.Супер новичок в Babel и Webpack, так что будь осторожен со мной - но ЛЮБОВЬ поможет кто-нибудь.
Заранее спасибо.