.babelrc inside libs

[ghost]

is it possible to add .babelrc inside libs? i already try to create .babelrc inside libs and add "webpackConfig": "@nrwl/react/plugins/webpack" inside libs but not works at all !!

i need add .babelrc because antd use babel-plugin-import to import style

[jon301]

Hi

Same problem for me :( Basically I'm trying to create a component library with EmotionJS and I need to add @emotion/babel-preset-css-prop to my babel config presets to be able to use the css prop in my react components.

I've tried to update the babelConfig property path of my library in workspace.json to make it point to this file:

module.exports = function (config) {
  const babelConfig = require('@nrwl/react/plugins/bundle-babel')(config);
  babelConfig.presets.push('@emotion/babel-preset-css-prop');
  return babelConfig;
};

When I build the library with nx run mylib:build, the custom babel config is correctly read (I've put a console.log inside), but it does not seem to work :(

I've also tried with a custom webpack config (https://github.com/nrwl/nx/issues/1721#issuecomment-521652145 from @jaysoo ) but with no success, as I presume libs read rollupConfig and not webpackConfig

---

EDIT: Found the solution. Not related to this issue. I had to add preserve: jsx in the compilerOptions of the tsconfig.json file so rollup preserves JSX for @emotion/babel-preset-css-prop to use.

[jaysoo]

As of Nx 9.4 we generate all apps and libs with their own .babelrc files. Each project can customize their babel setup, or you can use the root babel.config.json file for shared presets and plugins.

When you run the migration for 9.4 you will have all of these files generated for you: nx migrate @nrwl/workspace@9.4.

[Hotell]

absolutely amazing @jaysoo thx for this!

[vpalam-om]

I have the same issue, but "jsx": "preserve" didn't work. If I use css prop inside my component library and use the component inside nextjs application, the css prop ends up containing You have tried to stringify object.... .babelrc for my lib (it was generated automatically during migration to v9.5): { "presets": ["@nrwl/react/babel", "@emotion/babel-preset-css-prop"], "plugins": [] }

.babelrc for next application: { "presets": ["next/babel", "@emotion/babel-preset-css-prop"], "plugins": [] }

Sorry for posting my question in closed issue, but it seems to be very relevant to my problem.

[codewaseem]

@vpalam-om I'm facing the same issue. Did you find any solution for this?

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.