aunty.config.js breaks React build

[AshKyd]

On a new project, the following aunty.config.js breaks the React build:

module.exports = {
  build: { },
  webpack: function(config){
    return config;
  }
}

with the following error:

Module build failed: SyntaxError: Unexpected token (9:9)

   7 | function init() {
   8 |   const App = require('./components/App');
>  9 |   render(<App projectName={PROJECT_NAME} />, root);
     |          ^
  10 | }
  11 | 
  12 | init();

Edit: this also applies to the following webpack.config.js:

module.exports = [(() => {
  let config = require('@abcnews/aunty').getDefaultWebpackConfig();
  return config;
})()];

[AshKyd]

This can be fixed by manually adding babel-preset-react to the config with something like this:

const path = require('path');
module.exports = {
  webpack: function(config){
    const jsRule = config.module.rules.find(rule => String(rule.test).includes('.js'));
    jsRule.options.presets.push(path.join(__dirname, 'node_modules/babel-preset-react/lib/index.js'));
    return config;
  }
};

Looks like the default webpack config doesn't have it.

[colingourlay]

I'm hoping this is something that can be fixed by adding the type property to your config object:

module.exports = {
  type: 'react', // <-- ✨
  build: { },
  webpack: function(config){
    return config;
  }
}

[AshKyd]

Yeah, that's correct. Let's close this as user error unless you have more specific thoughts.