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 !
Types
(src/@types/*
) alias folder? Are those*.d.ts
files?