Apollo + graphql-tag/loader + fragments + #import not working in production

[tsdexter]

Hi @leebenson

When I try to use graphql fragments as suggested in the Apollo docs it works fine for dev but when I try to build production it is failing at the #import (I can grab the actual error message when I'm back at my computer later but I'm guessing I'm just setting up the webpack config incorrectly)

I've added to webpack config in loaders section in both base.js and browser.js the snippet from apollo which gets it going locally for dev but not for production - do you know how to set this up properly to use fragments and graphql-tag/loader?

module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
},

There was no rules section in the reactql configs so I put it in loaders as it had similar objects and I'm not a webpack expert.

[leebenson]

@tsdexter - I'll add this as a feature to the next version.

[tsdexter]

Awesome thx. If you know the solution before you have time for a release can you hint at it here in case you figure it out before me.

[leebenson]

I'll need to dig in further. I had it working with singular .gql files a few months back, but I've not yet tried the #import syntax. In the meantime, if you paste the error you're seeing, that might give me some hints. Thanks.

[tsdexter]

@leebenson It's building and running with the loader rule in the base.js file instead of browser.js or both.

/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */

// This is our base config file.  All of our configs will extend from this,
// so we'll define all the foundational stuff that applies to every build
// and add to it in other files

// ----------------------
// IMPORTS

// Webpack 2 is our bundler of choice.
import webpack from 'webpack';

// We'll use `webpack-config` to create a 'base' config that can be
// merged/extended from for further configs
import WebpackConfig from 'webpack-config';

// PostCSS filters
import postcssNested from 'postcss-nested';

// CSSNext is our PostCSS plugin of choice, that will allow us to use 'future'
// stylesheet syntax like it's available today.
import cssnext from 'postcss-cssnext';

// CSSNano will optimise our stylesheet code
import cssnano from 'cssnano';

// Show a nice little progress bar
import ProgressBarPlugin from 'progress-bar-webpack-plugin';

// Chalk lib, to add some multi-colour awesomeness to our progress messages
import chalk from 'chalk';

// Our local path configuration, so webpack knows where everything is/goes.
// Since we haven't yet established our module resolution paths, we have to
// use the full relative path
import PATHS from '../../config/paths';

// ----------------------

// Export a new 'base' config, which we can extend/merge from
export default new WebpackConfig().merge({

  // Javascript file extensions that webpack will resolve
  resolve: {
    // I tend to use .js exclusively, but .jsx is also allowed
    extensions: ['.js', '.jsx'],

    // When we do an `import x from 'x'`, webpack will first look in our
    // root folder to try to resolve the package this.  This allows us to
    // short-hand imports without knowing the full/relative path.  If it
    // doesn't find anything, then it'll check `node_modules` as normal
    modules: [
      PATHS.root,
      'node_modules',
    ],
  },

  // File type config and the loaders that will handle them.  This makes it
  // possible to do crazy things like `import css from './style.css'` and
  // actually get that stuff working in *Javascript* -- woot!
  module: {
    loaders: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
      // Fonts
      {
        test: /\.(woff|woff2|ttf|eot)$/i,
        loader: 'file-loader',
        query: {
          name: 'assets/fonts/[name].[hash].[ext]',
        },
      },

      // Images.  By default, we'll just use the file loader.  In production,
      // we'll also crunch the images first -- so let's set up `loaders` to
      // be an array to make extending this easier
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          {
            loader: 'file-loader',
            query: {
              name: 'assets/img/[name].[hash].[ext]',
            },
          },
        ],
      },
    ],
  },

  // Output settings.  Where our files will wind up, and what we consider
  // to be the root public path for dev-server.
  output: {

    // Our compiled bundles/static files will wind up in `dist`
    path: PATHS.public,

    // Deem the `dist` folder to be the root of our web server
    publicPath: '/',

    // Filenames will simply be <name>.js
    filename: '[name].js',
  },

  plugins: [
    // Progress bar + options
    new ProgressBarPlugin({
      format: ` ${chalk.magenta.bold('ReactQL')} building [:bar] ${chalk.green.bold(':percent')} (:elapsed seconds)`,
    }),

    // Options that our module loaders will pull from
    new webpack.LoaderOptionsPlugin({

      // Switch loaders to `minimize mode` where possible
      minimize: true,

      // Turn off `debug mode` where possible
      debug: false,
      options: {

        // The 'context' that our loaders will use as the root folder
        context: PATHS.src,

        // PostCSS -- @import, cssnext
        postcss() {
          return {
            plugins: [
              postcssNested(),
              cssnext(),
              cssnano({
                // Disable autoprefixer-- CSSNext already used it
                autoprefixer: false,
              }),
            ],
          };
        },

        // image-webpack-loader image crunching options
        imageWebpackLoader: {
          mozjpeg: {
            quality: 65,
          },
          pngquant: {
            quality: '65-90',
            speed: 4,
          },
          svgo: {
            plugins: [
              {
                removeViewBox: false,
              },
              {
                removeEmptyAttrs: false,
              },
            ],
          },
        },
      },
    }),
  ],
});

[leebenson]

Thanks @tsdexter. I'll re-open this to track adding it as standard to the next version.

[tsdexter]

No problem - that was quick. Thanks!