[BUG] - refine build is failing
windeko opened this issue · 13 comments
Describe the bug
Hey guys. When we're trying to build our project we're having an error.
Dependencies in our project:
"dependencies": {
"@ant-design/icons": "^5.0.1",
"@ant-design/nextjs-registry": "^1.0.0",
"@react-google-maps/api": "^2.19.3",
"@refinedev/antd": "^5.37.6",
"@refinedev/cli": "^2.16.29",
"@refinedev/core": "^4.49.0",
"@refinedev/devtools": "^1.1.37",
"@refinedev/kbar": "^1.3.8",
"@refinedev/nextjs-router": "^6.0.2",
"@refinedev/simple-rest": "^5.0.4",
"antd": "^5.0.5",
"antd-utils": "^0.1.14",
"eslint-config-prettier": "^9.1.0",
"js-cookie": "^3.0.5",
"next": "14.1.0",
"prettier": "^3.2.5",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.4.2",
"@types/js-cookie": "^3.0.6",
"@types/node": "^18.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^7.4.0",
"@typescript-eslint/parser": "^7.4.0",
"cross-env": "^7.0.3",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"typescript": "^4.7.4"
}
An error:
./node_modules/@refinedev/core/src/contexts/data/types.ts:2:30
Type error: Cannot find module 'graphql' or its corresponding type declarations.
1 | import { QueryFunctionContext, QueryKey } from "@tanstack/react-query";
> 2 | import { DocumentNode } from "graphql";
| ^
3 |
4 | import { UseListConfig } from "../../hooks/data/useList";
5 |We're tried to remove node_modules and package_lock, and re-install all the modules. Didn't helped.
Steps To Reproduce
1 - Check the dependencies (refine is updated to the last version)
2 - Try to make refine build
3 - See an error (at least we seeing it)
Expected behavior
refine build builds the project without errors
Packages
"@refinedev/antd": "^5.37.6",
"@refinedev/cli": "^2.16.29",
"@refinedev/core": "^4.49.0",
"@refinedev/devtools": "^1.1.37",
"@refinedev/kbar": "^1.3.8",
"@refinedev/nextjs-router": "^6.0.2",
"@refinedev/simple-rest": "^5.0.4",
Additional Context
No response
Hey @windeko, does your next.config.js file include anything specific to @refinedev/core or something to trigger type checking or transpiling it?
@aliemir, thanks for so fast reply.
This is all that I have in next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['@refinedev/antd'],
reactStrictMode: false,
};
export default nextConfig;
Hey @windeko, do you have skipLibCheck: false or anything to have effect on node_modules/* in your tsconfig.json? An obvious workaround might be installing the graphql package for now but I'm confident that we can find what's causing this error 😅
hey 1 more time, @aliemir!
I tried to install graphql separately, and it worked, but there are a lot of packages and some @hooks/i18n that wasn't found on npm.
This is tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
],
"paths": {
"@*": ["./src/*"]
},
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
so - skipLibCheck: true and node_modules are excluded. Hope everything's right here
Hey @windeko, so if you're having errors from @hooks/i18n and other aliases, it's most likely you have an invalid import from @refinedev/core. Can you check your code if you have any imports from /dist or somewhere other than root of @refinedev/core?
I mean I'm having issues with @hooks/i18n in the @refinedev/core files when I'm installing graphql and other stuff manually. I'm not using @hooks/i18n in my project dirrectly.
@windeko I meant the imports in your project from @refinedev/core not @hooks/i18n (it's an alias we use in core package). Check for code like import { .. } from "@refinedev/core/dist/..." etc.
@aliemir it's a good assumption, I didn't thought about. But no, with dist I have just these:
import '@refinedev/antd/dist/reset.css';
import { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies';
Also, I tried to get rid of import { RequestCookie }, but the project still didn't built correctly
@aliemir from what I'm seeing, graphql in the @refinedev/core is installed as devDependencies. Probably, there is a bunch of modules that are also should be installed as dependencies so they could be built to production right?
Or may be Refine have some key like refine build --dev so we could try to build with dev deps, at least for now?
It might not always be /dist, it can be any kind of invalid imports (including ones like ../node_modules/refinedev/core/... etc.) and those might work fine but fail on build step. Also there might be something that includes node_modules/refinedev/core to the type checking process and this fails it.
Please check again for any kind of invalid imports/requires. If the issue continues please try to provide a minimal repro and we can continue investigating.
Hey, @aliemir
Sorry for delay, tried to find an issue by myself, but no result. All seems fine, but still couldn't build the app.
Here is the repo
Thank you for your readiness to help. Really no glue what goes wrong
Found one at src/providers/data-provider/index.ts line 5 @windeko but I didn't check all the codebase
@aliemir my gosh, you're right!!
That was dumb, since in documentation about error handling HttpError is imported from @refinedev/core, but WebStorm imported it from src automatically.
Thanks for your time and sorry for disturbing, I was really lost 😅