javascript - 使用 babel-relay-plugin 时出错

Question

我在使用 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)

有关如何在同一文件中修复此问题的任何指示都会很棒。提前致谢。

我的所有软件包都是最新的，我已经问过了，这不是中继端的问题。

Answer 1

我遇到了OP所面临的相同问题，@steveluscher提供的解决方案引发了TypeError:无法读取未定义的属性“Plugin”。

有一个插件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']
    }
 }