reactjs `next build`: Module parse failed: Unexpected token (54:52)

I have 2 modules in a mono-repo with 2 web applications using ReactJS, NextJS:

/project
   |- api/
   |- lib/
   |- web/

    "react": "^17.0.1",
    "next": "^12.2.5",
    "ts-loader": "^9.3.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4",

webpack.config.js:

import path from 'path';

module.exports = {
    mode: "development",
    // Change to your "entry-point".
    entry: './index.ts',
    output: {
        path: path.resolve(__dirname, '.next'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: "ts-loader" },
            {
            // Include ts, tsx, js, and jsx files.
            // test: /\.(ts|js)x?$/,
            test: /\.tsx?$/,
            exclude: /node_modules/,
            use: [
                    {
                        loader: 'babel-loader',
                        options: {
                        presets: ['solid'],
                        },
                    },
                    {
                        loader: 'ts-loader',
                    },
                ]
        }],
    }
};

packages/web/tsconfig.json:

{
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.js",
    "**/*.tsx",
    "**/*.json"
  ],
  "node-option": [
    "experimental-specifier-resolution=node",
    "loader=ts-node/esm"
  ],
  "extensions": [
    "ts",
    "tsx"
  ],
  "compilerOptions": {
    "target": "es2022",
    "lib": [
      "dom",
      "dom.iterable",
      "es2022"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@app/api/*": [
        "../../api/*"
      ],
      "@app/lib/*": [
        "../../lib/*"
      ]
    },
    "incremental": true,
    "plugins": [
      {
        "name": "@rollup/plugin-typescript"
      },
      {
        "name": "@rollup/plugin-json"
      }
    ]
  },
    "references": [
        {
            "path": "../lib"
        },
        {
            "path": "../api"
        }
    ]
}

Expected Behaviour

Actual Behaviour

../api/src/auth/Auth.ts
Module parse failed: Unexpected token (54:52)
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
| }
| 
> export const signUp = async ({ username, password }): Promise<{ user?: { username: string }; error?: any }> => {
|   try {
|     const onSignUp: any = await Auth.signUp({

../api/src/components/DateTimeField.tsx
Module parse failed: Unexpected token (12:4)
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
| 
|   return (
>     <DateTimePicker
|       label={label || startCase(name)}
|       onChange={handleChange}

Steps to Reproduce the Problem

Location of a Minimal Repository that Demonstrates the Issue.

Sorry, it's a private repository.

Start with webpack.config.js and packages/web/tsconfig.json, then inspect the reported files ../api/src/auth/Auth.ts and ../api/src/components/DateTimeField.tsx to trace how the monorepo build handles imported TypeScript and TSX. Reproduce the failure if possible and verify that next build completes without the module-parse errors; the repository is private, so no minimal reproduction is available.