Я последовал за ретрансляционным пособием, чтобы начать работу после создания приложения-реагирования, чтобы получить новую реакцию и работу. Я запускал его как в режиме 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 и модифицировал веб-пакет, чтобы заставить его работать. Ниже я считаю, что соответствующие файлы. Я проделал тонну поиска по этой теме без такой удачи и не могу найти пример использования 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;
Пожалуйста, дайте мне знать, будут ли полезны дополнительные файлы или информация. Я бы очень признателен за любое направление, которое я могу получить. Благодарю!
Я столкнулся с этой проблемой в том же учебнике. В принципе, это проблема конфигурации 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
качестве зависимостей разработчиков в вашем проекте.
Как только Babel работает правильно, вы больше не сможете получить ошибку, которую видите.
yarn relay --watch
в одном терминале иyarn start
в другом терминале после завершения первого.