Webpack: defining 'query' with multiple loaders with react-hot and babel

Question

UPDATE: The solution, thanks to @bebraw, is to use the new babel preset:

Please note that react-hot has been deprecated and there's an equivalent babel plugin now. npmjs.com/package/babel-preset-react-hmre does the setup for you.

The specific error is:

Cannot define 'query' and multiple loaders in loaders list

This link is someone who ran into the same error, but has a different solution.

Ideally, I could run something like this:

module: 
  {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/,
        include: path.join(__dirname, 'app'),
        query: {
          stage: 0,
          plugins: ['./babelRelayPlugin']
        }
      },

I want things that run through Babel to go through babelRelayPlugin, which is a js file that lives at /.

My babelRelayPlugin.js file looks like this:

var babelRelayPlugin   = require('babel-relay-plugin');
var introspectionQuery = require('graphql/utilities').introspectionQuery;
var request            = require('sync-request');

var graphqlHubUrl = 'http://www.GraphQLHub.com/graphql';
var response = request('GET', graphqlHubUrl, {
  qs: {
    query: introspectionQuery
  }
});

var schema = JSON.parse(response.body.toString('utf-8'));

module.exports = babelRelayPlugin(schema.data, {
  abortOnError: true,
});

The problem is that you cannot use multiple loaders and have a query. I think the solution lies somewhere with "query parameters" that are inline using a ?, but I have tried many possible solutions and cannot get it to work.

Please note that react-hot has been deprecated and there's an equivalent babel plugin now. https://www.npmjs.com/package/babel-preset-react-hmre does the setup for you. — Juho Vepsäläinen, Apr 06 '16 at 19:19
Agh! Thanks @bebraw. I've been out of the game for too long. — samcorcos, Apr 06 '16 at 19:52
It's ok. Maybe we can close this question somehow. The answer would have been to split it up btw. — Juho Vepsäläinen, Apr 06 '16 at 20:02

score 0 · Accepted Answer · answered Apr 07 '16 at 06:30

Please note that react-hot has been deprecated and there's an equivalent babel plugin now. npmjs.com/package/babel-preset-react-hmre does the setup for you.

Alternatively you could split your configuration like this:

{
  test: /\.js$/,
  loaders: ['react-hot'],
  exclude: /node_modules/,
  include: path.join(__dirname, 'app')
},
{
  test: /\.js$/,
  loaders: [babel'],
  exclude: /node_modules/,
  include: path.join(__dirname, 'app'),
  query: {
    stage: 0,
    plugins: ['./babelRelayPlugin']
  }
}

Note that loaders are evaluated from right to left and from bottom to top. Hence the order.

Webpack: defining 'query' with multiple loaders with react-hot and babel

1 Answers1