Nextjs-Graphql webpack loader:如何将 Nextjs 与 Graphql loader 集成 [英] Nextjs-Graphql webpack loader: How to integrate Nextjs with Graphql loader
问题描述
我正在尝试将 Nextjs 与 graphql-tag/loader 集成,这是我的 next.config.js
文件:
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
请帮忙.
推荐答案
我让它在我的设置中工作如下.不确定您的代码有什么问题,但您可以尝试一下,看看它是否正常工作:) 您可以使用下一个 js 插件.也许插件的顺序很重要.这是我的配置.还有一些额外的代码,但我敢肯定,你会从中得到你需要的东西.至于库版本next":6.1.1",next-optimized-images":1.4.1",next-plugin-graphql":^0.0.1",
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;
}
})
)
);
如果您只想修改代码而不安装插件,您可以从这个 next-graphql-plugin.该插件对我有用,与您的设置不同的是它们的规则配置如下
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'
}
]
})
这篇关于Nextjs-Graphql webpack loader:如何将 Nextjs 与 Graphql loader 集成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!