Add AWS module support by including the JSON loader

[kellyjanderson]

The AWS JavaScript SDK recently added support for JS modules and Webpack Webpack Support - issue the one thing that the AWS JavaScript SDK requires, that create-react-app does not provide, is the JSON loader Bundling Applications with Webpack. Considering the prevalence of the AWS stack this would be a significant improvement allowing the use of the AWS JavaScript API without having to eject.

[gaearon]

Create React App already uses JSON loader. Have you tried to use the library? What issue are you getting?

[kellyjanderson]

Oh, my mistake, I could not find any documentation indicating that the json-loader was included in the box. I checked the documentation and I assumed by this section https://github.com/facebookincubator/create-react-app#whats-inside that only the style-loader was included; I also searched the page for any reference to the json-loader being included. Perhaps the use of json-loader is mentioned somewhere I missed?

[gaearon]

It's not really documented because this is implementation detail. Our average reader won't know what json-loader is anyway, so it probably doesn't make sense to mention as a "feature". Handling JSON works out of the box in all other bundlers so we just thought we need to fix it up for our Webpack setup as well. Let me know if you have any issues!

[kellyjanderson]

I was able to use the AWS SDK without any difficulty, well other than the difficulty of the SDK itself. :-D

[flaviocarmo]

Did you use json-loader without ejecting the webpack configuration? I need to do this, too, because i have external configurations, like API URL

[gaearon]

@flaviocarmo

Have you had a chance to read my comment in #1650 (comment)? We already use json-loader in our config by default, you don’t need to do anything extra to get it working. Do you have any issues?

[flaviocarmo]

i dont know how to use it with create-react-app. I my own webpack.config.js, i use like this:

module.exports = {
  entry: [
    './src/index.jsx'
  ],
  externals: {
    'Config': JSON.stringify(require('./config.dev.json'))
  },
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'js/bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './output/'
  }
};

How can i do this with create-react-app?

[gaearon]

You don’t need to do anything. It’s already there. If you use Create React App, importing JSON already works. Have you tried it?

[flaviocarmo]

@gaearon

I'm sorry, but I could not explain correctly what problem I'm facing. Today I use the webpack in my application to store the development and production environment settings in two json files: config.dev.json and config.prod.json.

When running the npm scripts for development using the dev-server webpack, it loads the notes into the corresponding environment. When I go to production, I simply run the npm build, and in addition to the minification, the webpack uses the other json file.

So, my problem is how, using create-react-app, I use the webpack to load configuration files into my development and production environments, according to the npm script I run.

[Timer]

@flaviocarmo So it sounds like you want to switch what you're importing based on whether you're building for development or production.
You can try this:

const Config = require(process.env.NODE_ENV === 'production' ? 'config.prod.json' : 'config.dev.json')

[flaviocarmo]

@Timer Yes, something like that. But i need to this file by file or at index.js level?

[Timer]

That would need to be file by file, you can go ahead and make it available globally by attaching it to the window, or by creating a stub file which hides the logic and require that stub in every file. I'd probably do the latter.

edit: see @gaearon stub to achieve a properly eliminated code segment

[gaearon]

Note that I don't recommend dynamic requires. Write it like this:

var config;
if (process.env.NODE_ENV === 'production') {
  config = require('./config.prod');
} else {
  config = require('./config.dev');
}

This way it will be properly eliminated in production.

You can do this in any file.

[Timer]

I believe this is missing from our User Guide, especially the part about not using a ternary operator.
We touch on it very lightly here.

Would you like to submit a PR detailing this suggestion, @flaviocarmo ? 😄

[gaearon]

IMO it’s a bit too specific for user guide—the problem isn’t really unique to ternaries, but occurs with any sort of dynamic requires.

[Timer]

I guess what I meant to say is that we don't detail how to dynamically configure anything based on NODE_ENV, require or configuration/text otherwise.
If this is too advanced of a section we'd like to leave out, that's fine too.

[gaearon]

OK, maybe we can include this more explicitly.