cra-rewired

You can add loaders or change other webpack configs without npm run eject from create-react-app

Examples

• add yaml-loader: source, changes
• add pug-as-jsx-loader: source, changes

Quick Overview

create-react-app my-app
cd my-app
npm install cra-rewired --save-dev
echo "SKIP_PREFLIGHT_CHECK=true" >> .env

Then create a custom options file. This example adds a loader that loads the contents of the yaml file json.

// webpack.custom.js
module.exports = function (paths) {
  return {
    // path in webpack.config
    'module.rules...oneOf': {
      // operation: $unshift | $push | $set
      $unshift: [
        {
          test: /\.(yml|yaml)$/,
          include: paths.appSrc,
          use: ['json-loader', 'yaml-loader']
        }
      ]
    }
  };
};

Update scripts.start in package.json as follows.

{
  ...
  "scripts": {
    "start_old": "react-scripts start",
    "start": "cra-rewired -s react-scripts -m start -c webpack.custom.js",
    ...
  },
  ...
}

Now you can import yaml file contents.

import data from './data.yml';

console.log(data); // { message: 'hello world' }