babel-plugin-import-graphql icon indicating copy to clipboard operation
babel-plugin-import-graphql copied to clipboard

Library not working if graphql files located in root directory

Open Daavidaviid opened this issue 6 years ago • 5 comments

Hi, Thanks for your work.

I don't know if you're aware of it, but I lost a lot of time because of a very specific issue today. When the structure of your react-native project is the following :

./react-native-app/
    ./ios/
    ./android/
    ./node_modules/
    ./graphql/
        ./queries/
            ./query.graphql // <-- Trying to import this file
    ./App.js // <-- From this file, doing `import query from "./graphql/queries/query.graphql"`

It resulted every time in an error like : build failed: couldn't find module "./graphql/queries/query.graphql"

But if I nest .js files in a /src/ directory, and the structure is like this :

./react-native-app/
    ./ios/
    ./android/
    ./node_modules/
    ./src/
        ./graphql/
            ./queries/
                ./query.graphql // <-- Trying to import this file
        ./App.js // <-- From this file, doing `import query from "./graphql/queries/query.graphql"`

Only then it works. And I'm aware that I have to remove the babel cache everytime I update something .graphql related. You can reproduce this bug by simply creating a new project with :

1/ react-native init project 2/ Follow the instruction to install this library 3/ Create a dumb ./graphql/queries/query.graphql 4/ Try to import it from ./App.js

Regards.

Daavidaviid avatar Nov 13 '18 21:11 Daavidaviid

Thanks for reporting this, and for the easy repro instructions. I'll try my best to check this out over the weekend!

detrohutt avatar Nov 16 '18 14:11 detrohutt

Hi,

I have the same error since I changed my react-native version from 0.55.4 to 0.57.5 (but seems to happen too on 0.56.x). I tried on IOS and android.

However my situation is a bit different.

./react-native-app/
   ./src/
      ./components
         ./compA
            ./query.js (including my gql file)
            ./myQuery.gql

I tried to move query.js from directories but it still does not work.

I don't manage to run my project anymore, so even a work around would be great :-)

Kisepro avatar Nov 20 '18 03:11 Kisepro

Ok for my part was because I had something wrong with my package and versions and in my .babelrc RN 57 requires to update few things like the preset "metro-react-native-babel-preset" instead of the deprecated one and it requires to change the .baberc like following :

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["import-graphql"]
}

Kisepro avatar Nov 20 '18 10:11 Kisepro

@detrohutt It works on windows but the same code on IOS give the same error message :-(

Did someone already tried on IOS ?

Kisepro avatar Nov 24 '18 14:11 Kisepro

This issue may be a path problem too https://github.com/detrohutt/babel-plugin-import-graphql/issues/50

Kisepro avatar Nov 25 '18 21:11 Kisepro