Babel error: Module build failed (from ../node_modules/babel-loader/lib/index.js)

Get Help and Help Others
1

Hi all!

I recently ran into an issue trying to upgrade from 0.36 to 0.37. I’ll share the issue and my fix here in case anyone is getting the same thing.

I was getting errors like the following:

Compiled with problems:X

ERROR in ./src/components/Button/Button.tsx

Module build failed (from ../node_modules/babel-loader/lib/index.js):

It turns out that there are some differences in how SVGs are handled at 0.37 which was causing babel to throw parsing errors.

The issue is that I had been importing SVGs (for my logos) directly from the public directory and using them as components in various places.

The fix was to make dedicated components for the logos. For these components, I co-locate the logo SVG in its component directory, import the SVG, and render it out while spreading props. Something like this:

// @ts-expect-error svg dont have types
import CourseLiftLogo from './Logo.svg';

const Logo = (props) => {
  return <CourseLiftLogo {...props} />;
};

export default Logo;

Hopefully this is helpful for anyone facing the same issue!

5 Likes