Typescript webpack "cannot find module" error for one folder only

29 Views Asked by At

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 : enter image description here

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 !

0

There are 0 best solutions below