[Bug] Module parse failed: The keyword 'interface' is reserved

Estou tendo o seguinte erro:

../../packages/design-system/components/Text/index.tsx
Module parse failed: The keyword 'interface' is reserved (4:0)
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
| import styled from 'styled-components';
| 
> interface TextProps {
|   tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|   children: React.ReactNode;

Na aula é comentado sobre esse erro e a solução sugerida é utilizar as bibliotecas next-compose-plugins e next-transpile-modules porém mesmo seguindo as intruções da aula o erro persistiu.

Meu código está assim:

next-config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  '@alura/design-system',
  '@alura/utils'
]);

/**
 * @type {import('next').NextConfig}
 */

module.exports = withPlugins([withTM], {
  trailingSlash: true,
});

web-public/package.json

{
  "name": "@alura/web-public",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@alura/design-system": "*",
    "@alura/utils": "*",
    "next": "^14.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "20.9.1",
    "@types/react": "18.2.37",
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^10.0.1",
    "typescript": "5.2.2"
  }
}

components/Text/index.tsx

import React from 'react';
import styled from 'styled-components';

interface TextProps {
  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
  children: React.ReactNode;
}

const StyledText = styled.span`
  font-family: sans-serif;
`;

export function Text({tag, children, ...props}: TextProps) {
  return (
    <StyledText as={tag} {...props}>
      {children}
    </StyledText>
  );
}

pages/index.tsx

import { Text } from '@alura/design-system/components/Text';
import { sum } from '@alura/utils/math/sum';

export default function HomeScree() {
  return (
    <main>
      <Text tag='h1'>Home</Text>
      <p>Local Module {sum(2, 2)}</p>
    </main>
  );
}