我在使用babel-relay-plugin时偶然发现了一个错误。
当我需要babel-relay-plugin模块并使用我的graphql架构导出输出并在路径工作时在我的webpack babel插件列表中调用它。
// webpack/plugins/babel-relay-plugin.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../../cloud/data/schema.json');
module.exports = babelRelayPlugin(schema.data);
// webpack/pro.config.js
module.exports = [
{
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
'./webpack/plugins/babel-relay-plugin'
]
}
}
]
}
}
]
但是当我在同一个文件中创建插件时:
// webpack/pro.config.js
var BabelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
name: 'server',
target: 'node',
devtool: 'cheap-module-source-map',
entry: cloudPath,
output: {
path: buildPath,
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new BabelRelayPlugin(schema)
]
}
}
]
}
}
]
它会抛出此错误堆栈:
ERROR in ./cloud/index.js
Module build failed: TypeError: Cannot read property '__esModule' of null
at Function.normalisePlugin (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:156:20)
at /Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:197:30
at Array.map (native)
at Function.normalisePlugins (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
at OptionManager.mergeOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
at OptionManager.init (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
at File.initOptions (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/AJ/Desktop/winebox/app/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/Users/AJ/Desktop/winebox/app/node_modules/babel-loader/index.js:88:12)
关于如何在同一个文件中修复它的任何指针都很棒。提前谢谢。
我所有的软件包都是最新的,我已经问过,这不是一个接力方问题。
答案 0 :(得分:4)
我遇到了OP所面临的同样问题,@ steveluscher提供的解决方案提出了TypeError: Cannot read property 'Plugin' of undefined
。
有一个插件babel-plugin-react-relay可以解决这个问题。它可以采用json文件,URL或graphql-js
架构。
它依赖于babel-relay-plugin
,因此您无需创建自己的插件。
用法很简单:
npm install --dev babel-plugin-react-relay
在.babelrc
文件中,添加:
"plugins": [
"react-relay"
],
在package.json
中,添加架构的路径:
“react-relay-schema”:“./ data /schema.json”
如果您使用的是webpack
,请在babel-loader
下为您的加载器指定插件:
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.join(__dirname, 'src')
],
query: {
plugins: ['react-relay'],
presets: ['react', 'es2015']
}
}
答案 1 :(得分:1)
require('babel-relay-plugin')
返回一个函数,您可以使用该函数获取给定模式的插件。我认为您正在寻找的用法是:
// webpack/pro.config.js
var babelRelayPlugin = require('babel-relay-plugin');
var schema = require('./../cloud/data/schema.json').data;
module.exports = [
{
/* ... */
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
new (babelRelayPlugin(schema))()
]
}
}
]
}
}
]
内部表达式返回一个插件,而外部表达式使用new
关键字创建该插件的实例。
答案 2 :(得分:0)
对于那些偶然发现并且收到此错误的人:
/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53
var Plugin = _ref.Plugin;
^
TypeError: Cannot read property 'Plugin' of undefined
at new <anonymous> (/app/client/node_modules/babel-relay-plugin/lib/getBabelRelayPlugin.js:53:22)
以下是我用来修复它的配置:
位于我的客户端应用的根目录:babelRelayPlugin.js
const getBabelRelayPlugin = require('babel-relay-plugin');
// Make sure the path is correct here
const schemaData = require('../data/schema.json');
module.exports = getBabelRelayPlugin(schemaData.data);
然后在我的.babelrc
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["./babelRelayPlugin"]
}
以下是我的package.json
中的依赖项 "dependencies": {
"babel-preset-stage-0": "^6.24.1",
"babel-relay-plugin": "0.10.0",
"node-sass": "^4.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-relay": "0.10.0",
"sass-loader": "^6.0.2",
"semantic-ui-css": "^2.2.10",
"semantic-ui-react": "^0.68.3"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "6.22.0",
"babel-preset-react": "^6.23.0",
"babel-runtime": "^6.22.0",
"css-loader": "0.26.1",
"extract-text-webpack-plugin": "^v2.0.0-rc.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.26.0",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-cleanup-plugin": "^0.4.2",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.4.1"
}
我相信babel stage-0
预设是必需的,因为它存在于所有可用的配置中但我不能肯定地说