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

[khteh]

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.

[stegano]

Try change the order of babe-loader and ts-loader. It appears to be an error that occurs because the Typescript file cannot be parsed.

[khteh]

I change to the following 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',
      },
      {
        test: /\.(ts|tsx)?$/,
        include: path.resolve(__dirname, '../lib/**/*'),
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
    ],
  },
}

And see the following error:

../lib/usePagination.ts
Module parse failed: Unexpected token (6:30)
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 { ApolloQueryResult } from '@apollo/client'
| 
> const getLoadMore = (fetchMore: QueryResult['fetchMore'], options: QueryHookOptions) => () => {
|   return fetchMore({
|     ...options, // Ensure that we pass in the latest nextToken into the options.variables here to query the new result

[stegano]

I change to the following 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',
      },
      {
        test: /\.(ts|tsx)?$/,
        include: path.resolve(__dirname, '../lib/**/*'),
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
    ],
  },
}

And see the following error:

../lib/usePagination.ts
Module parse failed: Unexpected token (6:30)
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 { ApolloQueryResult } from '@apollo/client'
| 
> const getLoadMore = (fetchMore: QueryResult['fetchMore'], options: QueryHookOptions) => () => {
|   return fetchMore({
|     ...options, // Ensure that we pass in the latest nextToken into the options.variables here to query the new result

Can you show me your project directory structure?

[khteh]

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

[stegano]

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

Where do you run the command and where is the package.json file?

[khteh]

I run yarn install yarn build from the tree root, i.e., project/ folder.

[stegano]

I run yarn install yarn build from the tree root, i.e., project/ folder.

🤔 Can you share your project repository?

[khteh]

It's private repo.

[pawelkrystkiewicz]

@khteh hey, did you have any luck resolving this issue?