Create React App Fix for Webpack Symlinks Without Ejecting

When restructuring my project and moving it to use Create React App I've ended up with an odd error for my shared jsx components (I've split the project into two separate apps but some of the styling and UI components will be the same so didn't want to duplicate code.)

./_shared/components/Spinner.jsx 21:2
Module parse failed: Unexpected token (21:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I spent some time figuring out why this file refused to work while other components used the .jsx extension and did not throw errors. Eventually looking at issues with the same error I realized it was the symlinks causing problems. I had to symlink _shared as CRA does not allow modules outside src...

Now for the solution. Webpack has a config option webpack.resolve.symlinks that fixes the issue above.

But with a CRA you can't edit webpack config directly. I didn't want to eject - since the whole point of moving to CRA was to not have to deal with config discrepancies (or at least deal with them less). I already use craco for handling less and antd, so only needed to add the webpack section as below.

/* craco.config.js */
module.exports = {
	// ...
	webpack: {
		configure: {
			resolve: {
				symlinks: false,
			},
		},
	},
};