search

tobias-tengler / create-relay-app

Relay setup automation for CRA, Next.js and Vite
MIT License
73 stars 2 forks source link

Missing Babel Typescript Presets Causing Errors #19

Open rdey0 opened 7 months ago

rdey0 commented 7 months ago

Adding graphql code blocks (even if commented out) was causing babel transform errors. I'm using vite, typescript, and pnpm.

My Code

import React from 'react';
import { graphql} from 'relay-runtime';

const splashScreenLoginMutation = graphql`
mutation SplashScreenLoginMutation($credentials: String!) {
  loginOrSignUpWithGoogle(credentials: $credentials) {
    ... on LoginSuccess {
        success
    }
    ... on LoginFailure {
        error
    }
  }
}
`

interface SplashScreenProps {
    onLoginCallback?: () => void;
};

const SplashScreen: React.FC<SplashScreenProps> = ({ onLoginCallback }) => {
    // Component code
};

export default SplashScreen;

Stack Trace

[vite] Internal server error: /Users/roydey/Documents/projects/jot/Client/jot/src/screens/SplashScreen.tsx: Unexpected reserved word 'interface'. (22:0)

  20 | // `
  21 |
> 22 | interface SplashScreenProps {
     | ^
  23 |     onLoginCallback?: () => void;
  24 | }
  25 |
  Plugin: vite:relay
  File: /Users/roydey/Documents/projects/jot/Client/jot/src/screens/SplashScreen.tsx:22:0
  19 |   }
  20 |   `
  21 |  
     |   ^
  22 |  interface SplashScreenProps {
  23 |      onLoginCallback?: () => void;
      at constructor (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:356:19)
      at Parser.raise (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:3223:19)
      at Parser.checkReservedWord (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12072:12)
      at Parser.parseIdentifierName (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12051:12)
      at Parser.parseIdentifier (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12026:23)
      at Parser.parseExprAtom (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:11231:27)
      at Parser.parseExprSubscripts (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10857:23)
      at Parser.parseUpdate (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10840:21)
      at Parser.parseMaybeUnary (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10816:23)
      at Parser.parseMaybeUnaryOrPrivate (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10654:61)
      at Parser.parseExprOps (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10659:23)
      at Parser.parseMaybeConditional (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10636:23)
      at Parser.parseMaybeAssign (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10597:21)
      at Parser.parseExpressionBase (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10551:23)
      at /Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10547:39
      at Parser.allowInAnd (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12279:16)
      at Parser.parseExpression (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:10547:17)
      at Parser.parseStatementContent (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12737:23)
      at Parser.parseStatementLike (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12588:17)
      at Parser.parseModuleItem (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12565:17)
      at Parser.parseBlockOrModuleBlockBody (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:13189:36)
      at Parser.parseBlockBody (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:13182:10)
      at Parser.parseProgram (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12464:10)
      at Parser.parseTopLevel (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:12454:25)
      at Parser.parse (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:14376:10)
      at parse (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+parser@7.23.4/node_modules/@babel/parser/lib/index.js:14417:38)
      at parser (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/parser/index.js:41:34)
      at parser.next (<anonymous>)
      at normalizeFile (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
      at normalizeFile.next (<anonymous>)
      at run (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/transformation/index.js:21:50)
      at run.next (<anonymous>)
      at transform (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/transform.js:22:33)
      at transform.next (<anonymous>)
      at evaluateSync (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:251:28)
      at sync (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/gensync@1.0.0-beta.2/node_modules/gensync/index.js:89:14)
      at stopHiding - secret - don't use this - v1 (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
      at transformSync (/Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/@babel+core@7.23.3/node_modules/@babel/core/lib/transform.js:42:76)
      at TransformContext.transform (file:///Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/vite-plugin-relay@2.0.0_babel-plugin-relay@14.1.0_vite@4.5.0/node_modules/vite-plugin-relay/dist/plugin.js:8:19)
      at Object.transform (file:///Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/vite@4.5.0/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:62)
      at async loadAndTransform (file:///Users/roydey/Documents/projects/jot/Client/jot/node_modules/.pnpm/vite@4.5.0/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29)
/Users/roydey/Documents/projects/jot/Client/jot/src/screens/SplashScreen.tsx: Unexpected reserved word 'interface'. (22:0)

Solution

The stack trace suggested that babel was not properly configured for typescript. Installing @babel/preset-typescript fixed the issue for me. Not sure if others have experienced this, but adding this package to the installer might help preempt issues for people who are using a build similar to mine.