使用 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

对于那些偶然发现并遇到此错误的人：

/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 预设是必需的，因为它存在于所有有效的配置中，但我不能确定

Answer 2

我遇到了与 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']
    }
 }

Answer 3

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 关键字创建该插件的实例。