[英]Nextjs-Graphql webpack loader: How to integrate Nextjs with Graphql loader
我正在尝试将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
请帮忙。
我让它在我的设置中如下工作。 不确定代码中有什么问题,但是您可以尝试一下,看看它是否有效:)您可以使用下一个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;
}
})
)
);
如果您只想修改代码而不安装插件,则可以从next-graphql-plugin启发自己。 该插件对我有用,与您的设置不同的是,它们的规则配置如下
config.module.rules.push({
test: /\.(graphql|gql)$/,
include: [dir],
exclude: /node_modules/,
use: [
{
loader: 'graphql-tag/loader'
}
]
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.