Question

在执行create-react-app之后，我按照Relay教程开始，以获得新的反应并运行。我在TypeScript模式下运行它（从这里：https://github.com/Microsoft/TypeScript-React-Starter），也在普通的JavaScript模式下运行，最初得到了相同的结果。

这是我在尝试运行应用时遇到的错误：

未设置Babel转换，或者无法识别这个电话网站。确保将其逐字用作graphql

我怀疑巴贝尔根本就没有跑步，但我不确定这是否完全正确。我按照这个：https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892看看这是否有助于我的babel在我的新create-react-app + relay应用程序中执行而没有运气。我甚至从create-react-app中弹出了应用程序并修改了webpack以使其正常工作。以下是我认为的相关文件。我已经对这个主题进行了大量的搜索而没有这样的运气，并且无法找到使用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;

如果有更多文件或信息有用，请告诉我。我真的很感激我能得到的任何方向。谢谢！

Answer 1

我在同一个教程中遇到了这个问题。基本上，这是一个Babel配置问题。有很多方法可以通过创建反应应用程序来实现这一点，但最简单的方法就是弹出应用程序并执行以下步骤：

运行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作为dev依赖项。

一旦Babel正常运行，您就不会再遇到错误了。

Answer 2

对于create-react-app，您可以通过安装babel-plugin-relay/macro并执行以下操作来避免弹出：

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

与其从graphql导入react-relay标签，而是相反。

React / Relay Modern / GraphQL简单项目设置与Babel问题

2 个答案: