rival-black•2y ago

Webpack returning errors from the lib

Hello, I updated refine packages to the latest version, and now is printing errors related to the lib.. Any tips? Weird thing about that is that I have skipLibCheck: true in my tsconfig file, so deps shouldn't be checked by Typescript 🫤

20 Replies

rival-black•2y ago

Here is my package.json (nothing fancy)

{
  "name": "pdf-service-refine",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mantine/dates": "5.6.2",
    "@mantine/dropzone": "5.6.2",
    "@mantine/modals": "5.6.2",
    "@pankod/refine-core": "3.88.0",
    "@pankod/refine-mantine": "1.11.0",
    "@pankod/refine-react-router-v6": "3.36.2",
    "@pankod/refine-react-table": "4.9.0",
    "@tabler/icons": "1.107.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "14.4.3",
    "axios": "0.27.2",
    "cors": "2.8.5",
    "dayjs": "1.11.5",
    "express": "4.18.2",
    "query-string": "7.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "uniqid": "5.4.0",
    "web-vitals": "3.0.3"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/jest": "29.2.0",
    "@types/react": "18.0.23",
    "@types/react-dom": "18.0.6",
    "nodemon": "2.0.20",
    "prettier": "2.7.1",
    "typescript": "4.8.4"
  },
  "scripts": {
    "start": "npm run dev",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "nodemon backend/server.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

{
  "name": "pdf-service-refine",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mantine/dates": "5.6.2",
    "@mantine/dropzone": "5.6.2",
    "@mantine/modals": "5.6.2",
    "@pankod/refine-core": "3.88.0",
    "@pankod/refine-mantine": "1.11.0",
    "@pankod/refine-react-router-v6": "3.36.2",
    "@pankod/refine-react-table": "4.9.0",
    "@tabler/icons": "1.107.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "14.4.3",
    "axios": "0.27.2",
    "cors": "2.8.5",
    "dayjs": "1.11.5",
    "express": "4.18.2",
    "query-string": "7.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "uniqid": "5.4.0",
    "web-vitals": "3.0.3"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/jest": "29.2.0",
    "@types/react": "18.0.23",
    "@types/react-dom": "18.0.6",
    "nodemon": "2.0.20",
    "prettier": "2.7.1",
    "typescript": "4.8.4"
  },
  "scripts": {
    "start": "npm run dev",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "nodemon backend/server.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

also, my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]
}

harsh-harlequin•2y ago

Hi @kino90, I am happy to see you again 👋 did you try clean install ? I mean, Installing npm after deleting node_modules and package-lock.json

rival-black•2y ago

hey @alicanerdurmaz 👋 Sadly, yes.. first thing i did was update to the latest packages (as of today.. had this issue since last week), then i removed my whole node_modules and package-lock.json and try installing again.. same errors

harsh-harlequin•2y ago

ofc 🙏 import { RefineProps, useLogin, useTranslate, ILogData, } from '@pankod/refine-core';

or absolute paths of these files

when you import directly like that. without alias, do you have any issues ? i'm still not sure but it's seems not refine problem. I'm able to run a project with that package.json. I believe problem on this config

    "baseUrl": "src",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]

    "baseUrl": "src",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]

you can try more clear path options like this.

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@interface/*": ["../path/to/interface/*"],
     ....
    }
   "include": ["src"]
  }

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@interface/*": ["../path/to/interface/*"],
     ....
    }
   "include": ["src"]
  }

I will investigate more. In this time maybe one of our community or core member can find fix 🙏

rival-black•2y ago

I do import them like that, it looks like it's compiling also the deps, which it shouldnt with the skipLibCheck option enable.. so weird

ERROR in node_modules/@pankod/refine-core/src/components/pages/login/index.tsx:3:40
TS2307: Cannot find module '@hooks' or its corresponding type declarations.
    1 | import React, { useState } from "react";
    2 |
> 3 | import { useLogin, useTranslate } from "@hooks";
      |                                        ^^^^^^^^
    4 | export interface ILoginForm {
    5 |     username: string;
    6 |     password: string;

ERROR in node_modules/@pankod/refine-core/src/components/pages/login/index.tsx:3:40
TS2307: Cannot find module '@hooks' or its corresponding type declarations.
    1 | import React, { useState } from "react";
    2 |
> 3 | import { useLogin, useTranslate } from "@hooks";
      |                                        ^^^^^^^^
    4 | export interface ILoginForm {
    5 |     username: string;
    6 |     password: string;

errors are triggered from node_modules/@pankod/refine-core/src/...

harsh-harlequin•2y ago

skipLibCheck it's just a checking declaration files. probably we have problem on paths. typescript path alias setup can be tricky. especially if you are dealing with node_modules. Can you make some adjustments by looking at the examples here and this note? https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Please notice that paths are resolved relative to baseUrl. When setting baseUrl to a value other than ".", i.e. the directory of tsconfig.json, the mappings must be changed accordingly. Say, you set "baseUrl": "./src" in the above example, then jquery should be mapped to "../node_modules/jquery/dist/jquery".

Please notice that paths are resolved relative to baseUrl. When setting baseUrl to a value other than ".", i.e. the directory of tsconfig.json, the mappings must be changed accordingly. Say, you set "baseUrl": "./src" in the above example, then jquery should be mapped to "../node_modules/jquery/dist/jquery".

when you downgrade, Are the problems resolved?

sensitive-blue•2y ago

Hey @kino90, sorry for the issue 🙏 Can you check the version installed before the upgrade (maybe by checking the diff of the package-lock.json). And lets check the changes between the two versions 🤔 Maybe we can try adding exclude: ["node_modules"] but it should already be excluded by default of tsc 🤔

rival-black•2y ago

Trying installing the old packages

    "@pankod/refine-core": "3.75.0",
    "@pankod/refine-mantine": "1.3.0",
    "@pankod/refine-react-router-v6": "3.36.0",
    "@pankod/refine-react-table": "4.7.6",

    "@pankod/refine-core": "3.75.0",
    "@pankod/refine-mantine": "1.3.0",
    "@pankod/refine-react-router-v6": "3.36.0",
    "@pankod/refine-react-table": "4.7.6",

sensitive-blue•2y ago

Finally been able to reproduce the issue with a faulty import 🤣 In my case, I did import the LoginPage component (can be anything) from @pankod/refine-core/src/components/pages/login which was good for the vscode setup but errored out in compiler Maybe checking your imports will help? 🤔 Still does not answer it being working on previous versions though 😅

rival-black•2y ago

🤔 I'll check my imports then! 🤞 finger crossed!

sensitive-blue•2y ago

Nice! And I'll be trying more ways to reproduce so maybe we can find the real issue here

rival-black•2y ago

It worked! 😍

rival-black•2y ago

I'll list my wrong imports here after the meeting 😉

sensitive-blue•2y ago

Great! 🚀 🚀 I'm really wondering which lines were the problem 😅

rival-black•2y ago

import { ActionButtonRenderer } from "@pankod/refine-ui-types/dist/types/crud";
[...]
const HeaderButtons: ActionButtonRenderer = ({ defaultButtons }) => { ... }

import { ActionButtonRenderer } from "@pankod/refine-ui-types/dist/types/crud";
[...]
const HeaderButtons: ActionButtonRenderer = ({ defaultButtons }) => { ... }

import { TitleProps } from "@pankod/refine-core/src/interfaces/customComponents";
[...]
const CustomTitle = ({ collapsed }: TitleProps) => ( ... )

import { TitleProps } from "@pankod/refine-core/src/interfaces/customComponents";
[...]
const CustomTitle = ({ collapsed }: TitleProps) => ( ... )

import { LogicalFilter } from "@pankod/refine-core/src/contexts/data/IDataContext";

import { LogicalFilter } from "@pankod/refine-core/src/contexts/data/IDataContext";

this are the "strange" imports that caused the issues

sensitive-blue•2y ago

Cool! TitleProps and LogicalFilter is already exported from refine-core so replacing them was not a big deal i guess. But ActionButtonRenderer is not exported, I'll try to release a quick fix for it, until then maybe something like this might work for you 🤔 (If you are not already resolved this issue 🤣 )

const ActionButtonRenderer = React.ComponentProps<typeof List>["headerButtons"];

const ActionButtonRenderer = React.ComponentProps<typeof List>["headerButtons"];

Oh, i guess it's not needed if you already have @pankod/refine-ui-types installed 😅

rival-black•2y ago

TitleProps and LogicalFilter is already exported from refine-core so replacing them was not a big deal i guess

I wonder why did WebStorm import them from that weird folder, then 😂 Thanks a lot btw @aliemirs 🙏

sensitive-blue•2y ago

Yeah, weird 😅 Let me check if we can do anything to avoid this, declaration maps might be causing this 🤔 Happy to help anytime 🙏 sbagliando si impara, am i right? 🤣 (literally the only proverb i know in italian)

rival-black•2y ago

hahaha indeed, you are right! 😂 Didn't know you could do this with Typescript 🔥 Nice!