Я создавал приложение Rails 6 / React, используя Webpack по умолчанию в Rails 6. У меня все работало нормально в development с использованием bin/webpack-dev-server, но после слияния из ветки в master ( для развертывания в Heroku) синтаксический анализ JSX больше не работает. Я предполагаю, что это проблема babel, но не совсем уверен, как ее решить. Я пытался yarn install, bundler, удаляя мои модули узлов и файл блокировки пряжи и снова делая yarn install. Ничего не работает Вот ошибки, которые я получаю, и мои настройки:
Ошибка:
ERROR in ./app/javascript/packs/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/App.jsx: Unexpected token (28:8)
26 |
27 | render(
> 28 | <Provider store={store}>
| ^
29 | <Dashboard />
30 | </Provider>,
31 | document.body.appendChild(document.createElement('div')),
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseExprListItem (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:10361:18)
at Parser.parseCallExpressionArguments (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9468:22)
ERROR in ./app/javascript/packs/Dashboard.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/Dashboard.jsx: Unexpected token (24:6)
22 | render() {
23 | return (
> 24 | <Container className="dashboard">
| ^
25 | <Grid>
26 | <Grid.Row>
27 | <Grid.Column width={10}>
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ERROR in ./app/javascript/packs/components/CreateModalComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/components/CreateModalComponent.js: Unexpected token (130:6)
128 | console.log(this.state, this.props);
129 | return (
> 130 | <>
| ^
131 | <Button onClick={this.handleShow} color="yellow">
132 | Create Outage
133 | </Button>
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ERROR in ./app/javascript/packs/components/CurrentOutagesComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/components/CurrentOutagesComponent.js: Unexpected token (17:6)
15 | render() {
16 | return (
> 17 | <>
| ^
18 | {this.props.services &&
19 | this.props.services.map(service => (
20 | <Table key={uuidv4()} celled striped>
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ERROR in ./app/javascript/packs/components/EditOutageModal.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/components/EditOutageModal.js: Unexpected token (121:6)
119 | console.log(this.state);
120 | return (
> 121 | <>
| ^
122 | <Button.Group>
123 | <Button
124 | icon
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ERROR in ./app/javascript/packs/components/FutureOutageComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/components/FutureOutageComponent.js: Unexpected token (12:6)
10 | render() {
11 | return (
> 12 | <>
| ^
13 | {this.props.futureOutages &&
14 | this.props.futureOutages.map(futureOutage => (
15 | <Card.Group key={uuidv4()}>
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ERROR in ./app/javascript/packs/components/RecurringOutageComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/demiansims/Development/tml_info/tml_dashboard/app/javascript/packs/components/RecurringOutageComponent.js: Unexpected token (13:6)
11 | render() {
12 | return (
> 13 | <>
| ^
14 | {this.props.recurringOutages && this.props.recurringOutages.map(recurringOutage => (
15 | <Card.Group key={uuidv4()}>
16 | <Card
at Parser.raise (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:7044:17)
at Parser.unexpected (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:8422:16)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9701:20)
at Parser.parseExprSubscripts (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9287:23)
at Parser.parseMaybeUnary (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9267:21)
at Parser.parseExprOps (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9137:23)
at Parser.parseMaybeConditional (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9110:23)
at Parser.parseMaybeAssign (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9065:21)
at Parser.parseParenAndDistinguishExpression (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9842:28)
at Parser.parseExprAtom (/Users/demiansims/Development/tml_info/tml_dashboard/node_modules/@babel/parser/lib/index.js:9622:21)
ℹ ｢wdm｣: Failed to compile.
My package.json:
{
"name": "tml_dashboard",
"private": true,
"dependencies": {
"@babel/core": "^7.0.0-0",
"@babel/preset-react": "^7.8.3",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"add": "^2.0.6",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"popper.js": "^1.16.1",
"prop-types": "^15.7.2",
"qs": "^6.9.1",
"react": "^16.12.0",
"react-datepicker": "^2.13.0",
"react-dom": "^16.12.0",
"react-input-range": "^1.3.0",
"react-moment": "^0.9.7",
"react-redux": "^7.1.3",
"react-semantic-ui-datepickers": "^2.3.0",
"react-simple-timefield": "^3.0.0",
"react-time-picker": "^3.9.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"semantic-ui-calendar-react": "^0.15.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.88.2",
"turbolinks": "^5.2.0",
"uuid": "^3.3.3",
"web-dev-server": "^1.6.7",
"webpacker": "^4.6.0",
"yarn": "^1.22.0"
},
"version": "0.1.0",
"devDependencies": {
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"webpack-dev-server": "^3.10.3"
}
}
Нет файла .babelrc, который Я читал о некоторых решениях, но есть файл babel.config.js:
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')
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 {
presets: [
isTestEnv && [
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@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
}
]
].filter(Boolean)
}
}
Я заявил, что у меня не было этой проблемы в development, но У меня была эта проблема в production с RAILS_ENV=production rails assets:precompile или пытаясь развернуть в Heroku. Теперь я получаю эту проблему также в development.
ОБНОВЛЕНИЕ Кажется, есть проблема с объединением из ветки, которая работает. Я go на мою master ветку и git merge develop_13 (ветку, которая работает). Существует проблема с объединением, которая приводит к сбою ветви master. Я новичок с git, так что, возможно, мне чего-то не хватает.