We are trying to make our React + GraphQL project independent of any other layers in the ecosystem to improve developers experience. In line with that, we have written a thin HOC that wraps Apollo own graphql HOC and uses an internal environment variable to switch between network fetching and mock data. On production builds, all that mock data is, obviously, not used, even if it is imported.

Is there any way to avoid including modules in Webpack's production bundle that you know you are not going to need while keeping everything else the same/not breaking the app?

Something like dynamic import() could do the trick, but that ends up chunking your build rather than omitting what you don't need/want.

UPDATE: The app was created using create-react-app 1.0.17 and later ejected.

We are trying to make our React + GraphQL project independent of any other layers in the ecosystem to improve developers experience. In line with that, we have written a thin HOC that wraps Apollo own graphql HOC and uses an internal environment variable to switch between network fetching and mock data. On production builds, all that mock data is, obviously, not used, even if it is imported.

Is there any way to avoid including modules in Webpack's production bundle that you know you are not going to need while keeping everything else the same/not breaking the app?

Something like dynamic import() could do the trick, but that ends up chunking your build rather than omitting what you don't need/want.

UPDATE: The app was created using create-react-app 1.0.17 and later ejected.

• javascript
• reactjs
• webpack
• babeljs
• graphql

• 1 Would it be possible to resolve the mock data module to an empty module in production? github./facebookincubator/create-react-app/blob/master/… – HMR Commented Nov 29, 2017 at 5:25
• mock apollo client to return the data you want to mock, locally resolve apollo to your mocked module using NODE_ENV env var in your webpack.conf file when NODE_ENV==='production' don't provide mocks for apollo, let it follow its course. That should work – Dayan Moreno Leon Commented Nov 30, 2017 at 6:54
• @HMR I believe that would be one straight forward solution. Any ideas on how to approach that? – Nicolás Fantone Commented Dec 1, 2017 at 0:01
• @DayanMorenoLeon I get your idea. It's similar to one of the answers given below. In this case, it's not as simple as swapping one module with another, I'm afraid. – Nicolás Fantone Commented Dec 1, 2017 at 0:09
• 1 @whitep4nther Wanted to give the bounty to mauron85 but setting an alias seems to be a cleaner solution (one global switch instead of possibly many files having conditional import statements). I'll check tomorrow and see if anyone added an answer. – HMR Commented Dec 1, 2017 at 17:07

2 Answers 2

I'm using following dir structure.

api
  index.js
  apimock.js
  apirest.js

In index.js you switch implementation depending on NODE_ENV:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./apirest');
} else {
  module.exports = require('./apimock');
}

You will need to use webpack DefinePlugin to set NODE_ENV:

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: `"${process.env.NODE_ENV || 'development'}"`,
    ENABLE_DEVTOOLS: JSON.stringify(!!process.env.ENABLE_DEVTOOLS)
  }
})

Build mand (npm script):

NODE_ENV=production webpack --config webpack.config.js

or for mock implementation:

NODE_ENV=development webpack --config webpack.config.js

Webpack will only bundle single implementation depending on NODE_ENV.

In your ponent (saga...) you simply import api:

import * as api from 'api';

In your webpack.config.dev.js:

resolve: {
  alias:{
    "react-apollo":"./mock.js"
  }
}

Now all modules requesting react-apollo will get the mock when you pile for dev.

I don't have apollo-client but here is an example of mocking jQuery:

Your code:

import $ from 'jquery';
console.log($().message)

webpack.dev.config.js:

alias:{
  "jquery":"./mock.js"
}

mock.js:

const org = require('../node_modules/jquery/src/jquery');
org.fn.message = "Hello from mock";
export default org;