detrohutt / babel-plugin-import-graphql

Enables import syntax for .graphql and .gql files
https://www.npmjs.com/package/babel-plugin-import-graphql
MIT License
314 stars 22 forks source link

Library not working if graphql files located in root directory #49

Open Daavidaviid opened 5 years ago

Daavidaviid commented 5 years ago

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.

detrohutt commented 5 years ago

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

Kisepro commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Did someone already tried on IOS ?

Kisepro commented 5 years ago

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