Nx: Babel and React ? Or maybe react-create-app's support ?

[AnatoleLucet]

Hello,
so is there any way to add a Babel support in a React application ?
I have thought about some way to do it, like for example building the React app with a separate process and put the static files in a @nrwl/web:application but I think this is not really viable.
Or maybe i can use something like Angular-builders's custom-webpack but again I don't think this can be the right way because it can (probably ?) interfere with nx if I try to change the default nrwl's builder.
And lastly i have also thought about Angular eject, but this is deprecated so nop...

I am not an Angular dev, I mainly work on React so I probably don't have the correct mind set on how to do this, and this is why I am asking it here.

So what do you think ? Is there an actual right way to do it ? Could we hope about a react-create-app's support in the future ?

[FrozenPandaz]

You can extend/change the webpack configuration in our build process to whatever you like :)

@jaysoo Can you post your webpack config to load typescript with babel since you've done this before?

@AnatoleLucet What transforms you need from babel that is not supported with the current default setup? Is it a particular library?

[AnatoleLucet]

@FrozenPandaz Thank you for your answer. Can you give me more informations on how to extend/change the webpack configuration in your build process ?

Actually I don't really know but I pretty much always need to add some babel plugins (for exemple @babel/plugin-syntax-dynamic-import), and sometimes modify my webpack config for adding some special files extensions support.

Edit : I have just seen your response on the issue #1509, do you think this can help me if I add a babel-loader in the webpack config ?

[FrozenPandaz]

Yes, that response details the option which you are looking for to extend/change the webpack configuration.

@jaysoo Has done this before and can probably share his configuration.

Basically, I imagine you would do something like the following:

module.exports = (config) => {
  config.modules.rules.unshift(
    {
      test: /\.m?(j|t)s$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  );
  return config;
}

If you find a solution which works please share it as well 😄

[AnatoleLucet]

@FrozenPandaz That seems nice. I will go try this out in the next two hours and let you know how my webpack config ended. Thank you again.

[AnatoleLucet]

Ok so, here is the final setup :

1. Install babel and webpack : yarn add -D babel-loader @babel/core @babel/preset-env webpack
2. You also need to install circular-dependency-plugin, if not you will have an error because it seems like babel need it : yarn add -D circular-dependency-plugin
3. Create a webpack.config.js in your application. Here is an example of his content :

module.exports = config => {
  config.module.rules.unshift({
    test: /\.m?(j|t)s$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          [
            '@babel/preset-env',
            {
              debug: true // If you see the debug in your console; this is working
            }
          ]
        ]
      }
    }
  });
  return config;
};

1. And finally you need to specify the path of the webpack config in your angular.json :

{
  "projects": {
    [application's name]: {
      "architect": {
        "build": {
          "options": {
            "webpackConfig": "apps/my-app/webpack.config.js" // Add this line
          }
        }
      }
    }
  }
}

And now if you see the babel's debug in your console when you do a yarn ng serve <app_name>, this is working.

[AnatoleLucet]

@FrozenPandaz Lastly do you think it can be a good idea to create a @nrwl/react-create-app to add a more complex react apps support ? If yes I think I will go try to contribute and do it !

[FrozenPandaz]

@AnatoleLucet That's fantastic! I imagine we could export something like @nrwl/react/plugins/babel which would be a function like the one you've written so that not everybody has to do the same. I haven't used babel extensively but it seems like it overlaps with Typescript quite often. I'll defer to @jaysoo he was also keen on adding this as well.

I imagine something that looks like 🤷‍♂ :

"webpackConfig": "@nrwl/react/plugins/babel"

[AnatoleLucet]

@FrozenPandaz Great ! I think creating a webpack config may not be enough. Create react app needs to be started with node, for exemple here is the start script which start the app on a dev server.

I will open a new issue to speak about more details.

[jaysoo]

@AnatoleLucet @FrozenPandaz The plugin approach to swap in babel works if the developers need to use babel plugins or presets.

CRA does more than just webpack + babel, so it'd be good if you list out feature requests that we can look into our dev-server.