Meteor, React and Browserify

I have been chasing down an odd issue with a Meteor/React app I am building. The error showing up in the browser console is:

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

I am using this amazing component, which uses Redux that is giving the error:

https://github.com/moroshko/react-autosuggest

To use these types of components from the npm repo on a client, we need to follow this process: https://react-in-meteor.readthedocs.org/en/latest/client-npm/

The error is happening because we are not fully processing the code and replacing any environment variables. Loose-envify to the rescue.

The fix is to add the npm file to our project:

packages.json:

"loose-envify" : "1.1.0"

And the final app.browserify.options.json file will be (this is stored in client/lib):

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require",
        "react-dom": "React.require"
      }
    },
    "loose-envify": {
      "global": true,
      "NODE_ENV": "production",
      "_": "purge"
    }
  }
}

HTH!

• Meteor
• Programming
• React