Webpack - Typescript aliases error in production mode only

Question

I'm having a problem with a React project configured with Webpack and using Typescript. Containerized with Docker (CI/CD with gitlab) .

Before we didn't use aliases on our project and builds in production environment worked without any problem.

Since then, we've switched to using aliases with this configuration :

In webpack.common.js :

 alias: {
      Assets: path.resolve(__dirname,  'src/assets'),
      Components: path.resolve(__dirname, 'src/components'),
      Api: path.resolve(__dirname, 'src/api'),
      Types: path.resolve(__dirname, 'src/@types'),
      Helpers: path.resolve(__dirname, 'src/helpers'),
      Config: path.resolve(__dirname, 'src/config'),
      Store: path.resolve(__dirname, 'src/store'),
},
...,
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              getCustomTransformers: () => ({
                before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
              }),
              transpileOnly: isDevelopment,
            },
          },
        ],
      },

And my configuration tsconfig.json :

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "noImplicitAny": false,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "pretty":true,
    "allowSyntheticDefaultImports" :true,
    "lib": ["es6", "dom", "es2016", "es2017", "esnext"],
    "typeRoots": ["./src/@types", "./node_modules/@types"],
    "resolveJsonModule": true,
    "paths": {
      "Assets/*": ["src/assets/*"],
      "Components/*": ["src/components/*"],
      "Api/*": ["src/api/*"],
      "Types/*": ["src/@types/*"],
      "Helpers/*": ["src/helpers/*"],
      "Config/*": ["src/config/*"],
      "Store/*": ["src/store/*"],
    } 
  },
  "include": [
    "./src/index.tsx",
    "./src/**/*",
  ],
  "files": ["./src/@types/custom.d.ts"],
  "exclude":["/node_modules"],
}

I add that in dev everything works, and a npm run build locally manages to build the project, but when it passes via the CI/CD chain on gitlab and build image returns me this kind of errors :

#16 13.97 ERROR in ./src/routes/Pages/Users.tsx:10:22
#16 13.97 TS2307: Cannot find module 'Types/resources/users' or its corresponding type declarations.
#16 13.97      8 | import { UserState } from "Store/user/reducer"
#16 13.97      9 | import { ServerSideTable } from "@optalp/react-server-side-table"
#16 13.97   > 10 | import { User } from "Types/resources/users"
#16 13.97        |                      ^^^^^^^^^^^^^^^^^^^^^^^

And a part of my package.json :

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@react-keycloak/web": "^3.4.0",
    "@stomp/stompjs": "^6.1.2",
    "axios": "^0.21.4",
    "date-fns": "^2.30.0",
    "file-saver": "^2.0.5",
    "html-webpack-plugin": "^4.5.2",
    "keycloak-js": "^22.0.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "polished": "^4.2.2",
    "qs": "^6.11.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^4.0.3",
    "react-select": "^4.3.1",
    "remixicon": "^2.5.0",
  },
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js --mode-development --hot",
    "build": "webpack --config webpack.prod.js --env NODE_ENV=production",
  },
  "devDependencies": {
    "copy-webpack-plugin": "^9.1.0",
    "css-loader": "^5.2.7",
    "dotenv": "^8.6.0",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^7.3.0",
    "mini-css-extract-plugin": "^1.6.2",
    "postcss-loader": "^4.3.0",
    "react-refresh": "^0.14.0",
    "react-refresh-typescript": "^2.0.9",
    "resolve-url-loader": "^3.1.5",
    "sass": "^1.69.5",
    "sass-loader": "^10.4.1",
    "source-map-loader": "^1.1.3",
    "style-loader": "^2.0.0",
    "styled-components": "^5.3.11",
    "terser-webpack-plugin": "^5.3.9",
    "ts-loader": "^8.4.0",
    "typescript": "^4.9.5",
    "webpack": "^5.89.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^5.10.0"
  }
}

Does anyone have any clues? A wrong tsconfig.json or webpack configuration ? If there's a need for more configuration, I can specify it further.

Thank you !

Answer 1

I suspect the problem is in the way how you import types. During production build all types are ignored, which means the import below won't work:

import { User } from "Types/resources/users"

Which is why all types have to imported using type keyword:

import type { User } from "Types/resources/users"