nx/packages/react/plugins/bundle-rollup.ts
Jack Hsu 6c5916a79f
feat(rollup): use .cjs file extension for config files (#29196)
The `rollup.config.js` file will be resolved as ESM if the closest
`package.json` has `type: 'module`. This causes an error when computing
the project graph and when reading the file for builds.

```
  Original error: require is not defined in ES module scope, you can use import instead
```

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

This PR also updates the output directory to `{projectRoot}/dist` for
the new TS setup.

## Current Behavior
`nx g @nx/react:lib --bundler=rollup` has an error due to Node
resolution

## Expected Behavior
`nx g @nx/react:lib --bundler=rollup` works out of the box

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #29193, #[29195](https://github.com/nrwl/nx/issues/29195)

---------

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>
2024-12-04 12:53:42 -05:00

55 lines
1.4 KiB
TypeScript

import * as rollup from 'rollup';
// TODO(v22): Remove this in Nx 22 and migrate to explicit rollup.config.cjs files.
/**
* @deprecated Use `withNx` function from `@nx/rollup/with-nx` in your rollup.config.cjs file instead. Use `nx g @nx/rollup:convert-to-inferred` to generate the rollup.config.cjs file if it does not exist.
*/
function getRollupOptions(options: rollup.RollupOptions) {
const extraGlobals = {
react: 'React',
'react-dom': 'ReactDOM',
'styled-components': 'styled',
'@emotion/react': 'emotionReact',
'@emotion/styled': 'emotionStyled',
};
if (Array.isArray(options.output)) {
options.output.forEach((o) => {
o.globals = { ...o.globals, ...extraGlobals };
});
} else {
options.output = {
...options.output,
globals: {
...options.output.globals,
...extraGlobals,
},
};
}
// React buildable libs support SVGR, but not for React Native.
// If imports fail, ignore it.
try {
const url = require('@rollup/plugin-url');
const svg = require('@svgr/rollup');
options.plugins = [
svg({
svgo: false,
titleProp: true,
ref: true,
}),
url({
limit: 10000, // 10kB
}),
...(Array.isArray(options.plugins) ? options.plugins : []),
];
} catch {
// Ignored for React Native
}
return options;
}
module.exports = getRollupOptions;