使用 babel-relay-plugin 时出错
Error using babel-relay-plugin
我在使用 babel-relay-plugin 时偶然发现了一个错误。
当我需要 babel-relay-plugin 模块并使用我的 graphql 模式导出输出并在我的 babel 插件的 webpack 列表中调用它作为路径工作时。
// 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)
关于如何在同一文件中解决此问题的任何指针都会很棒。提前谢谢。
我所有的软件包都是最新的,我已经问过了,这不是中继端的问题。
我遇到了与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']
}
}
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
关键字创建该插件的实例。
对于那些偶然遇到此错误并遇到此错误的人:
/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"]
}
这是我在我的包中的依赖项.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
预设是必需的,因为它存在于所有有效的配置中,但我不能肯定地说
- javascript中的数组出错
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- 如何在javascript上使用flak-babel进行翻译
- 在Meteor项目中安装并包含npm模块后出错
- 解析JSON并从中删除对象会出错
- AngularJS指令出错-无法读取属性'编译'的未定义
- 使用javascript在MVC中查找网格长度时出错
- 尝试调用AngularJS上的函数时出错
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 全局安装gull后出错
- 将webpack和babel与父项目目录中的文件一起使用
- 我在代码点火器中出错
- Java脚本将URL转换为已保存的URL时出错
- Backbone.js将模型绑定到视图时出错
- 将javascript代码转换为jquery代码时出错
- 运行babel节点时出错
- 使用 babel-relay-plugin 时出错
- 从Babel 5迁移到6时出错(ReferenceError:未定义导出)
- 在使用es2015语法导入模块并将Babel编译为es5时出错
- 使用ES7 async/await与node, webpack和babel-loader时出错