Загрузчик веб-пакетов Nextjs-Graphql: как интегрировать Nextjs с загрузчиком Graphql

Я пытаюсь интегрировать Nextjs с graphql-tag / loader, это мой файл next.config.js:

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
  }
})

Я не могу построить, я получаю следующее сообщение об ошибке:

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

Пожалуйста помоги.

Я попытался добавить правило, когда isServer === true, и когда isServer === false все еще не может быть собран, с той же ошибкой.

— 17.09.2018 18:37

javascript webpack graphql next.js graphql-tag

17.09.2018 18:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 274

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я заставил его работать в своей настройке следующим образом. Не уверен, что не так в вашем коде, но вы можете попробовать и посмотреть, работает ли он :) Для этого вы можете использовать следующий плагин js. Может быть, порядок плагинов имеет значение. Вот мой конфиг. Есть дополнительный код, но я уверен, что вы получите то, что вам нужно. Что касается версии библиотек «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;
      }
    })
  )
);

Если вы предпочитаете просто модифицировать свой код и не устанавливать плагины, вы можете вдохновиться этим следующий-graphql-плагин. Плагин работает для меня, отличие от вашей настройки в том, что у них настроено правило следующим образом

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

Спасибо, подробнее посмотрю на плагин next-graphql-plugin.

— 17.09.2018 21:25

17.09.2018 21:20