8

I am trying to integrate Nextjs with graphql-tag/loader, This is my next.config.js file:

const withSass = require('@zeit/next-sass')
const graphqlLoader = require('graphql-tag/loader')

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      loader: graphqlLoader,
      exclude: /node_modules/
    })

    return config
  }
})

I am unable to build, I get the error below:

/HOME/node_modules/graphql-tag/loader.js:43
  this.cacheable();
       ^
TypeError: Cannot read property 'cacheable' of undefined

Please help.

acmoune
  • 2,981
  • 3
  • 24
  • 41
  • I have tried to add the rule when `isServer === true`, and when `isServer === false`, stil unable to build, with the same error. – acmoune Sep 17 '18 at 16:37

1 Answers1

5

i made it working in my setup as follows. Not sure what is wrong in your code, but you can try it and see if it is working :) You can use next js plugin for it. Maybe the order of plugins matter. Here is my config. There are some additional code, but i am sure, that you will get it what you need from it. As for the libraries version "next": "6.1.1", "next-optimized-images": "1.4.1", "next-plugin-graphql": "^0.0.1",

const withSass = require("@zeit/next-sass");
const webpack = require("webpack");
const withGraphQL = require("next-plugin-graphql");
const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages(
  withGraphQL(
    withSass({
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]"
      },
      webpack: config => {

        config.plugins.push(
          new webpack.ContextReplacementPlugin(
            /graphql-language-service-interface[\\/]dist$/,
            new RegExp(`^\\./.*\\.js$`)
          )
        );

        return config;
      }
    })
  )
);

If you would prefer just to modify your code and do not install plugins you can inspire yourself from this next-graphql-plugin. The plugin is working for me, the difference from your setup is that they have rule configured as follows 

  config.module.rules.push({
       test: /\.(graphql|gql)$/,
       include: [dir],
       exclude: /node_modules/,
       use: [
           {
             loader: 'graphql-tag/loader'
           }
       ]
    })
David Mraz
  • 545
  • 4
  • 8
  • Thanks, I will look at the plugin next-graphql-plugin in more details. – acmoune Sep 17 '18 at 19:25
  • So once one does this, how does one then use graphql files in their project? Can you just import a graphql file into a .ts file? – tettoffensive Apr 13 '22 at 20:52
  • @tettoffensive you'll need to define a type for .graphql files in a `@types` folder within your source directory. the type being: `declare module '*.graphql' { import { DocumentNode } from 'graphql'; const value: DocumentNode; export = value; }` and add @types to your tsconfig if not already present, e.g. assuming a src folder: `"compilerOptions": { ... "typeRoots": ["src/@types", ...], },` – Kevin K. Feb 17 '23 at 16:35