React / Relay Modern / Простая настройка проекта GraphQL с проблемами Babel

Я последовал руководству по Relay, чтобы начать работу после создания приложения create-react-app, чтобы запустить новый модуль реакции. Я запускал его как в режиме TypeScript (отсюда: https://github.com/Microsoft/TypeScript-React-Starter), так и в обычном режиме JavaScript, и сначала пришел к одному и тому же результату.

Это ошибка, которую я получаю, когда пытаюсь запустить приложение:

Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as graphql

Я подозреваю, что Babel вообще не работал, но я не уверен, что это полностью правда. Я последовал за этим: https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892, чтобы посмотреть, поможет ли это запустить мой babel в моем новом приложении create-response-app + relay без везения. Я даже удалил приложение из приложения create-response-app и изменил веб-пакет, чтобы он заработал. Ниже приведены соответствующие файлы. Я провел тонну поисков по этой теме, но безуспешно, и не могу найти пример, использующий React + Relay Modern + Graphql.

package.json

{
  "name": "testProj",
  "version": "0.1.0",
  "private": true,
  "metadata": {
    "graphql": {
      "schema": "./graphql/testProj.json"
    }
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.42",
    "@babel/runtime": "^7.0.0-beta.42",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-relay": "^1.5.0",
    "react-scripts-ts": "2.14.0",
    "relay-runtime": "^1.5.0"
  },
  "scripts": {
    "start": "node ./setup && react-scripts-ts start",
    "build": "node ./setup && react-scripts-ts build",
    "test": "node ./setup && react-scripts-ts test --env=jsdom",
    "relay": "relay-compiler --src ./src --schema graphql/implementato.graphql --extensions ts tsx"
  },
  "devDependencies": {
    "@babel/register": "^7.0.0-beta.42",
    "@types/jest": "^22.2.0",
    "@types/node": "^9.4.7",
    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",
    "@types/react-relay": "^1.3.4",
    "babel-plugin-relay": "^1.5.0",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-relay-plugin-loader": "^0.11.0",
    "graphql": "^0.13.2",
    "relay-compiler": "^1.5.0",
    "typescript": "^2.7.2"
  }
}

setup.js

const fs = require('fs');
const path = require('path');

const file = path.resolve('./node_modules/babel-preset-react-app/index.js');
let text = fs.readFileSync(file, 'utf8');

if (!text.includes('babel-plugin-relay')) {
    if (text.includes('const plugins = [')) {
        text = text.replace(
            'const plugins = [',
            "const plugins = [\n  require.resolve('babel-plugin-relay'),",
        );
        fs.writeFileSync(file, text, 'utf8');
    } else {
        throw new Error(`Failed to inject babel-plugin-relay.`);
    }
}

App.tsx (или App.jsx)

import * as React from 'react';
import { QueryRenderer, graphql } from 'react-relay';
import environment from './environment';

const query = graphql`
  query AppQuery{
    allAccounts {
      totalCount
    }
  }`;

class App extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment = {environment}
        query = {query}
        variables = {{}}
        render = {({ error, props }) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return <div>Loaded!</div>;
        }}
      />
    );
  }
}

export default App;

Пожалуйста, дайте мне знать, если еще какие-нибудь файлы или информация будут вам полезны. Я был бы очень признателен за любое направление, которое смогу получить. Спасибо!

Какую последовательность сценариев из вашего package.json вы выполнили, чтобы добраться до этой ошибки?

hisa_py 19.03.2018 22:30
yarn relay --watch в одном терминале и yarn start в другом терминале после завершения первого.
pinguinos 19.03.2018 22:39

yarn relay --watch создает соответствующие файлы .graphql.js или ничего не делает?

hisa_py 20.03.2018 13:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
3
1 226
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я столкнулся с этой проблемой в том же руководстве. По сути, это проблема конфигурации Babel. Есть способы перепрыгнуть через обручи, чтобы заставить это работать с приложением create response, но самый простой способ - просто извлечь приложение и выполнить следующие шаги:

Запустите react-scripts eject (убедитесь, что react-scripts установлен глобально)

Отрегулируйте конфигурацию вашего Webpack, чтобы включить 'babel-loader':

{
    test: /\.jsx$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
},

Добавьте .babelrc в корневой каталог вашего проекта:

{
    "presets": [
        "env"
    ],
    "plugins": [
        "relay"
    ]
}

Установите babel-core, babel-preset-env и babel-loader как зависимости разработчика в вашем проекте.

Как только Babel заработает правильно, вы больше не должны получать ошибку, которую видите.

Да, похоже, это сработало. Я бы хотел, чтобы решение не требовало извлечения приложения create-response-app.

pinguinos 23.03.2018 22:44

В случае create-react-app вы можете избежать извлечения, установив babel-plugin-relay/macro и выполнив следующие действия:

import graphql from "babel-plugin-relay/macro";

Вместо импорта тега graphql из react-relay.

Другие вопросы по теме