Только что обновил пакеты React, Webpacker, Babel и теперь есть неожиданная ошибка токена: '<' в моем файле application.js - PullRequest
Новая
       10

Только что обновил пакеты React, Webpacker, Babel и теперь есть неожиданная ошибка токена: '<' в моем файле application.js

0 голосов
/ 29 июня 2019

поэтому я решил обновить свои пакеты сегодня, и все прошло гладко, но по какой-то причине мой Babel не читает мой JSX. По крайней мере, я думаю, что проблема в этом. Я получаю эту ошибку при запуске yarn run start: 

ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/anthony/challenges/tft-stats/app/javascript/packs/application.js: Unexpected token (14:15)

  12 |     if(window.railsEnv && window.railsEnv === 'development'){
  13 |       try {
> 14 |         render(<App />, reactElement)
     |                ^
  15 |       } catch (e) {
  16 |         render(<RedBox error={e} />, reactElement)
  17 |       }

Я пытался исправить это в течение нескольких часов. Я попытался добавить пресеты в мой babel.config.js. Я попытался отредактировать свой веб-упаковщик и попытался обновить файл package.json, включив в него: 

"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"

Но ничего, что я пробовал, не сработало. Вот мои файлы:

application.js: 

import React from 'react';
import { render } from 'react-dom';
import RedBox from 'redbox-react';
import 'semantic-ui-css/semantic.min.css';

import App from '../react/components/App';

document.addEventListener('DOMContentLoaded', () => {
  let reactElement = document.getElementById('app')

  if (reactElement) {
    if(window.railsEnv && window.railsEnv === 'development'){
      try {
        render(<App />, reactElement)
      } catch (e) {
        render(<RedBox error={e} />, reactElement)
      }
    }
    else {
      render(<App />, reactElement)
    }
  }
})

package.json: 

{
  "name": "tft-stats",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "prop-types": "~15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.1",
    "redbox-react": "1.6.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.87.2"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "~3.10.0",
    "fetch-mock": "7.3.3",
    "fetch-ponyfill": "^6.0.2",
    "jasmine-core": "~3.4.0",
    "jasmine-enzyme": "~7.0.2",
    "karma": "^4.1.0",
    "karma-coverage": "1.1.2",
    "karma-jasmine": "~2.0.1",
    "karma-phantomjs-launcher": "~1.0.4",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^4.0.2",
    "phantomjs-prebuilt": "~2.1.14",
    "react-addons-test-utils": "~15.6.2",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "scripts": {
    "start": "./bin/webpack-dev-server",
    "test": "node_modules/.bin/karma start karma.conf.js"
  }
}

Я никогда не обновлял свои пакеты раньше, и я занимался этим всего несколько месяцев, поэтому извините, если это глупый вопрос. Для контекста это приложение Rails / React.

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 && [
        require('@babel/preset-env').default,
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        require('@babel/preset-env').default,
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }
      ]
    ].filter(Boolean),
    plugins: [
      require('babel-plugin-macros'),
      require('@babel/plugin-syntax-dynamic-import').default,
      isTestEnv && require('babel-plugin-dynamic-import-node'),
      require('@babel/plugin-transform-destructuring').default,
      [
        require('@babel/plugin-proposal-class-properties').default,
        {
          loose: true
        }
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread').default,
        {
          useBuiltIns: true
        }
      ],
      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: false
        }
      ],
      [
        require('@babel/plugin-transform-regenerator').default,
        {
          async: false
        }
      ]
    ].filter(Boolean)
  }
}
...