babel-plugin-module-resolver

babel-plugin-module-resolver copied to clipboard

I'm trying to use this plugin in conjunction with babel-plugin-import-graphql.

I'd like to be able to do something like the following:

#import "components/Mail/fragments.gql"
...

However, when I try this, it takes it as a relative import from the directory it is being imported from, and my build fails with a file not found error. Is it possible to have this plugin update imports in .gql files as well, so that the above would work?

The way the babel-plugin-import-graphql works is that it replaces the import with a variable with the imported data. By the time this plugin sees that variables, it doesn't appear to be an import.

If you wanted the resolution rules of this plugin to apply to babel-plugin-import-graphql you would have to modify that plugin in some way to be aware of this plugin's configuration.

the plugins shouldn't have to know anything about each-other. As long as babel-plugin-module-resolver can replace the import with a relative path first, babel-plugin-import-graphql would work perfectly fine, using the updated import path.

Yes, that would make sense. However, once babel-plugin-module-resolver sees the graphql import, it's not an import any more.

babel-plugin-import-graphql takes something like:

import query from './query.graphql';

And replaces it with something like this:

const query = { kind: 'DocumentNode', definitions: [ ... ] };

The generated code does not have any require or import for babel-plugin-module-resolver to transform, all the imports were already handled inside of babel-plugin-import-graphql.

In our project we have abandoned babel-plugin-import-graphql and instead use graphql-tag/loader to load graphql files in webpack, graphql-tag-loader-register to load graphql files in babel-node like environments, and graphql2js to convert graphql files to js in places where we currently use babel. Babel converts our JavaScript & TypeScript source, graphql2js converts graphql to js in the same folder as part of the same build process.

The main reason we dropped babel-plugin-import-graphql is that webpack and babel do not detect changes to graphql files properly when it is in use, resulting in having to clean the babel cache and restart webpack every time we change a graphql file.

In theory we could run the output of graphql2js through babel to benefit from the babel-plugin-module-resolver because it generates js files that do use require to load files that are imported.

I wanted to do this, but unfortunately I couldn't get it working (easily) with graphql-tag-loader-register because that hook doesn't run babel on its own output.

You are assuming that babel-plugin-import-graphql would be run first. That is why I specified that as long as babel-plugin-module-resolver is run first (before babel-plugin-import-graphql), it would be able update the import inside of the gql file before babel-plugin-import-graphql gets to it.

I'm also not talking about importing gql files inside of js files. I'm talking about importing gql files (with fragments) from inside of other gql files.

The module resolver doesn't know how to parse and modify graphql files, though. So it can't process the graphql file before the graphql plugin runs. It helps resolve the path to the first graphql file but cannot inspect the imports inside that graphql file.

On May 18, 2019 at 3:26 PM, <kaitlynbrown [email protected]> wrote:

You are assuming that babel-plugin-import-graphql would be run first. That is why I specified that as long as babel-plugin-module-resolver is run first (before babel-plugin-import-graphql), it would be able update the import inside of the graphql file before babel-plugin-import-graphql gets to it.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tleunen/babel-plugin-module-resolver/issues/339?email_source=notifications&email_token=AACQBGJF5M3PKVEE55TGOB3PWB67XA5CNFSM4GKP7NMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWXB2A#issuecomment-493711592, or mute the thread https://github.com/notifications/unsubscribe-auth/AACQBGKXNNVA5VVSYXRFN5DPWB67XANCNFSM4GKP7NMA .

Right, I didn't think about that, that makes more sense now