Is create-react-native-app supported?

I’m attempting to use this plugin with a create-react-native-app (CRNA) but when importing a .graphql file into a typescript file, I’m seeing the error:

Unable to resolve ./query.graphql" from "src/Welcome/index.tsx`: The module `./query.graphql` could not be found.

I noticed the babel-plugin-inline-import-graphql-ast package, but it works with react-app-rewired which is for create-react-app and not create-react-native-app.

Any ideas?

Here’s my .babelrc

{
  "plugins": ["import-graphql"],
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  }
}

and package.json

{
  "name": "tortuga",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@types/jest": "^22.2.3",
    "@types/react": "^16.3.14",
    "@types/react-native": "^0.55.16",
    "@types/react-test-renderer": "^16.0.1",
    "apollo-codegen": "^0.19.1",
    "babel-plugin-import-graphql": "^2.4.4",
    "react-app-rewired": "^1.5.2",
    "react-native-scripts": "1.14.0",
    "react-native-typescript-transformer": "^1.2.9",
    "tslint-react": "^3.6.0",
    "typescript": "^2.8.3"
  },
  "main": "./src/index.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest",
    "generate-schema": "apollo-codegen introspect-schema http://localhost:8080/graphql --output lib/schema.json"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "apollo-boost": "^0.1.7",
    "expo": "^27.0.2",
    "graphql": "^0.13.2",
    "react": "16.4.0",
    "react-apollo": "^2.1.4",
    "react-native": "~0.55.2",
    "tslint": "^5.10.0"
  }
}

[pm-dev]

Changing the module compiler option in tsconfig.json from commonjs to es2015 allowed the js bundle to build.

My IDE was still reporting an error because it couldn’t find the module for my .graphql file, which was fixed by your suggestion of adding fileExtensions.d.ts with

declare module '*.graphql';

Thanks for your help debugging.

[detrohutt]

Oh it sounds like just a type issue. What i did was make a types folder in my project root with a fileExtensions.d.ts file like this in it:

declare module '*.graphql';

And then add that folder to my typeRoots in tsconfig.json:

"typeRoots": ["./types/", "./node_modules/@types/", "./**/node_modules/@types/"]