Module parse failed: Unexpected token (x:y)

[khteh]

Bug report

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

/project
   |- api/
   |- web/

    "react": "^18.2.0",
    "next": "^12.2.5",
    "react-dom": "^18.2.0",
    "rollup": "^2.79.0",
    "rollup-plugin-ts": "^3.0.2",
    "ts-loader": "^9.3.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"

next.config.js:

const aliases = {
  api: path.join(__dirname, '../api/'),
}
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    forceSwcTransforms: true,
    swcTraceProfiling: true,
  },
  output: 'standalone',
  i18n: {
    defaultLocale: 'us',
    locales: ['us', 'sg', 'my', 'th', 'vn', 'id', 'de'],
  },
  webpack: (config) => {
    // Add aliases
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      ...aliases,
    }
    // Find rules that includes current directory
    const rulesWithCurrentDir = config.module.rules.filter((rule) => rule.include && rule.include.includes(dirname))
    // Prepare the sibling package paths that we want to include
    const siblingPackagePaths = [path.resolve(`${dirname}../api`)]
    // Push sibling package paths
    rulesWithCurrentDir.forEach((ruleWithCurrentDir) => ruleWithCurrentDir.include.push(...siblingPackagePaths))
    return config
  },
}

webpack.config.js:

import path from 'path';

module.exports = {
    mode: "development",
    // Change to your "entry-point".
    entry: './index',
    output: {
        path: path.resolve(__dirname, '.next'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
    },
    module: {
        rules: [
        {
            test: /\.(css)$/,
            include: [/stylesheets/, /node_modules/],
            use: [
                'css-loader',
            ],
        },
        {
            test: /\.css$/,
            exclude: [/stylesheets/, /node_modules/],
            use: [
                'css-loader?sourceMap&modules,localIdentName=[local]-[hash:base64]',
            ],
        },            
      {
        test: /\.(ts|tsx)?$/,
        include: path.resolve(__dirname, '**/*'),
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.(ts|tsx)?$/,
        include: path.resolve(__dirname, '../api/**/*'),
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      ],
    }
};

.babelrc:

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
}

tsconfig.json:

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

next.config.mjs:

export default {
  swcMinify: true,
  experimental: {
    forceSwcTransforms: true,
    swcTraceProfiling: true,
  },
  output: 'standalone',
};

next build errors:

../web/src/views/Dashboard/Bids/BidDetailsDescriptionTable.tsx
Module parse failed: Unexpected token (58: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
|   const { subtotal, shipping } = pricing || {}
|   return (
>     <Root>
|       <Hidden mdDown>
|         <Table className={classes.tableBody}>

../web/src/views/Dashboard/Bids/QuotationDetails/QuotationSlip.tsx
Module parse failed: Unexpected token (65: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
|   const { sellerSignature, sellerSigneeName, sellerSigneeDesignation, quotationTimeStamp } = quotationBid || {}
|   return (
>     <Root className={classes.boxWrap}>
|       <SharedSlipDetails titleType="Quotation" bidStatusTimeStamp={QUOTATION_TIME_STAMP} quotationBid={quotationBid} />
|       <BidDetailsDescriptionTable quotationBid={quotationBid} />

../web/src/views/Dashboard/Bids/SharedSlipDetails.tsx
Module parse failed: Unexpected token (69: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 (
>     <Root>
|       <Box display="flex">
|         <img src="/images/kyberlife-bid-form-logo.png" alt="logo" className={classes.imgSize} />

../web/src/views/Dashboard/Messages/Messages.tsx
Module parse failed: Unexpected token (194:27)
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
| 
|   // Getters
>   const getInitialChats = (): ChatInterface[] => {
|     const isNewChatAlreadyExists =
|       hasNewChat && prevChats?.find((prevChat) => prevChat.participantIDs.includes(query.sellerID as string))

../web/src/views/Dashboard/Messages/utils.ts
Module parse failed: Unexpected token (9:42)
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 { SellerInterface } from '@app/api/src/modules/Seller/model/Seller'
| 
> export const getUnreadMessageCount = (chat: ChatInterface, userID: string): number => {
|   const unReadMessages =
|     chat?.messages?.filter(({ isReadIDs }) => !isReadIDs || !isReadIDs.includes(userID))?.length || 0

I only see this error after upgrading from Next.JS 11 to 12.

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

Other relevant information:
webpack version: 5.74.0
Node.js version: v18.8.0
Operating System: Ubuntu 22.04
Additional tools: yarn 1.22.19

[alexander-akait]

Looks like you don't convert JSX to pure JS, you need a loader (swc/babel) to do it

[alexander-akait]

If you create reproducible test repo I will help you, without this we can't tell you what is wrong