I have a project in Next.js and Typescript where I am trying to ensure code splitting and tree shaking works well for our purposes. I recently upgraded to Next.js 13.x and migrated from Babel to SWC.
We have a lot of modules exposed using barrel files, i.e. index.ts files that are mapping default exports to named exports, for making them easier to import:
// /components/index.ts
export { default as someComponent } from './someComponent`;
... more component exports like the one above ...
And when we consume the component in another file we import it like this:
import { someComponent } from '../components`
I know importing through these barrel files poses a problem for tree shaking, but I much prefer this style of importing over referencing the /components/someComponent file:
import someComponent from './components/someComponent`
This style of import requires a new line for every component is a bit longer and generally a bit harder to read in my opinion.
We already use the shorter style of imports for several libraries and we have set up module transpilation to rewrite the above syntax to direct imports:
// next.config.js
{
...
transpilePackages: ['libraryA', 'libraryB']
...
}
Previously we used babel-plugin-transform-imports to achieve this, but now use SWC instead of Babel and we are using the configuration built into Next.js
My question is, how can I configure my project to transpile these paths when I'm referencing files internal to my project?
