xenial-black
xenial-black2y 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 🫤
No description
20 Replies
xenial-black
xenial-black2y 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"]
}
passive-yellow
passive-yellow2y 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
xenial-black
xenial-black2y 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
passive-yellow
passive-yellow2y 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 🙏
xenial-black
xenial-black2y 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/...
passive-yellow
passive-yellow2y 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?
national-gold
national-gold2y 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 🤔
xenial-black
xenial-black2y 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",
national-gold
national-gold2y ago
No description
national-gold
national-gold2y 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 😅
xenial-black
xenial-black2y ago
🤔 I'll check my imports then! 🤞 finger crossed!
national-gold
national-gold2y ago
Nice! And I'll be trying more ways to reproduce so maybe we can find the real issue here
xenial-black
xenial-black2y ago
It worked! 😍
No description
xenial-black
xenial-black2y ago
I'll list my wrong imports here after the meeting 😉
national-gold
national-gold2y ago
Great! 🚀 🚀 I'm really wondering which lines were the problem 😅
xenial-black
xenial-black2y 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
national-gold
national-gold2y 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 😅
xenial-black
xenial-black2y 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 🙏
national-gold
national-gold2y 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)
xenial-black
xenial-black2y ago
hahaha indeed, you are right! 😂 Didn't know you could do this with Typescript 🔥 Nice!