Importing *.graphql files via absolute path does not work

[RemLampa]

Issue Labels

• [x] has-reproduction
• [ ] feature
• [ ] docs
• [ ] blocking
• [ ] good first issue

In my webpack config: resolve.modules = [ 'src', 'node_modules'];

I have various folders inside src, notably components and graphql-docs.

This absolute import works: import SomeComponent from 'components/SomeComponent';

This relative import also works: import SomeQuery from './graphql-docs/SomeQuery.graphql';

But this absolute import doesn't work: import SomeQuery from 'graphql-docs/SomeQuery.graphql';

Error: /path/to/src/AnotherComponent.jsx: Cannot find module 'graphql-docs/SomeQuery.graphql'

This is somewhat related to #198, but that points out a bug in Webpack aliases, while this one is about the Webpack module resolver.

Node version: 8.12.0 npm version: 6.4.1 graphql-tag version: 2.9.2 webpack version: 4.12.1

[mhaagens]

Samme issue here.

[langpavel]

Yeah, this is probably related to webpack (may be in your config) itself, not this loader. Try add loader as first in chain.

[nazar]

Yeah, this is probably related to webpack (may be in your config) itself, not this loader. Try add loader as first in chain.

Nope:

    module: {
      rules: [
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          use: 'graphql-tag/loader',
        },
    }

Throws a GraphQLError: Syntax Error: Unexpected Name "module" error on the first .gql the loader encounters in a CRA 2.x ejected application.

I took another stab at this and got absolute imports working for the #import keyword in a CRA 2.x ejected application:

#import 'queries/talentOffer/talentOfferFields.gql'

query talentOffer($id: Int!) {
  talentOffer(id: $id) {
    ...talentOfferFields
  }
}

The key was adding an alias to the ejected config/webpack.config.js file:

      alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',

        // START - ADDED AFTER EJECTING CRA
        // point to the src/queries for the graphql-tag/loader loader
        queries: path.resolve(__dirname, '../src/queries/')
        // END - ADDED AFTER EJECTING CRA
      },

The loader was added right before the last file-loader:

            // START - ADDED AFTER EJECTING CRA
            {
              test: /\.(graphql|gql)$/,
              exclude: /node_modules/,
              loader: 'graphql-tag/loader',
            },
            // END - ADDED AFTER EJECTING CRA

            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.
            {
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.

HTH

[dobesv]

I don't think this is a bug in graphql-tag, maybe you should try stack overflow or somewhere people can help you with webpack questions.