I have a problem with my build in production environment of my react application with webpack and typescript.
To summarize, a single folder (src/api) comes up with an error when I try to import a file it contains from a component or other.
All other folders import correctly and pose no problems during build (components, types, etc.)
Webpack-dev-server works fine, and a local build works too, BUT the build containerized with Docker in the CI/CD chain (with Gitlab) brings up all imports from the /api/* folder in error, like this:
#16 14.05 ERROR in ./src/routes/Pages/History.tsx:23:24
#16 14.05 TS2307: Cannot find module 'Api/resources/SectorsAPI' or its corresponding type declarations.
#16 14.05 21 | import { getColorAndNameForClassifier, getColorAndNameForClassifierValues } from "Helpers/utils";
#16 14.05 22 | import {setConditionsLS} from "Helpers/localStorageManagement"
#16 14.05 > 23 | import SectorsAPI from "Api/resources/SectorsAPI";
#16 14.05 | ^^^^^^^^^^^^^^^^^^^^^^^^^^
#16 14.05 24 | import PatientCounterAPI from "Api/indicators/PatientCounterAPI";
#16 14.05 25 |
#16 14.05 26 | const classifiersList: ClassifierType[] = ["AGE", "SEX", "ARRIVAL_TYPE"]
#16 14.05
#16 14.05 ERROR in ./src/routes/Pages/ScheludedCare.tsx:14:24
#16 14.05 TS2307: Cannot find module 'Api/resources/SectorsAPI' or its corresponding type declarations.
#16 14.05 12 | import type { Unit } from "Types/resources/units";
#16 14.05 13 | import { useTranslation } from 'react-i18next'
#16 14.05 > 14 | import SectorsAPI from "Api/resources/SectorsAPI";
#16 14.05 | ^^^^^^^^^^^^^^^^^^^^^^^^^^
#16 14.05 15 | import ServicesAPI from "Api/resources/ServicesAPI";
#16 14.05 16 | import UnitsAPI from "Api/resources/UnitsAPI";
#16 14.05 17 |
Here my tsconfig.json :
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "react",
"module": "commonjs",
"outDir": "./build/",
"lib": ["es6", "dom", "es2016", "es2017", "esnext", "ES2022"],
"target": "es5",
"esModuleInterop": true,
"noImplicitAny": false,
"preserveConstEnums": true,
"sourceMap": true,
"removeComments": true,
"pretty":true,
"allowSyntheticDefaultImports" :true,
"skipDefaultLibCheck": false,
"resolveJsonModule": true,
"skipLibCheck": true,
"typeRoots": ["./src/types", "./node_modules/types"],
"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"]
}
And a part of my webpack.common.js :
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx", ".msj"],
fallback: {
"timers": false,
"fs": false,
"crypto": false
},
plugins: [
new TsconfigPathsPlugin({
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
})
]
},
...
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('ts-loader'),
options: {
getCustomTransformers: () => ({
before: [isDevelopment && ReactRefreshTypeScript()].filter(Boolean),
}),
transpileOnly: isDevelopment,
projectReferences: true
},
},
],
},
...
]
}
Here is my folder configuration :

And the content of SectorsAPI, but all the API files are problematic, and its constitute the same.
import axios from "../../services/axios_instance";
import { API_SECTORS} from 'Config/api';
import type { Sector, SectorsPageable } from "Types/resources/sectors";
function getSectorsByQuery(params):Promise<SectorsPageable>{
return axios.get(API_SECTORS + "/by-query", {params})
.then(res => res.data)
}
function getSectorsByIds(ids:string):Promise<Sector[]>{
return axios.get(API_SECTORS + `/by-ids/${ids}`)
.then(res => res.data)
}
export default {
getSectorsByQuery,
getSectorsById,
}
And Dockerfile (I just put between [] the url of our registry, but it's a node v16 image) :
FROM [privater-registry-url]/node-16:latest as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
ARG NPM_REPO_HOSTNAME
ARG NPM_TOKEN
COPY package*.json ./
RUN npm config set registry https://${NPM_REPO_HOSTNAME}
RUN npm config set //${NPM_REPO_HOSTNAME}/:_authToken=${NPM_TOKEN}
RUN npm ci -f
COPY . ./
RUN npm run build
FROM optainer.opta-lp.com/dockerhub/nginx
COPY --from=build /app/build /var/www
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 8006
CMD ["nginx", "-g", "daemon off;"]
I don't understand why, I also tried not to use aliases for this folder but the problem remains, so I think I can exclude aliases as the cause.
Would you have an idea? I confess I don't understand, I think the problem comes from tsconfig.json but I can't find where...
Thanks a lot !