Is there an example known to be properly working in a pnpm monorepo?

The bootstrapped examples I tried either from refine.new or create refine-app always end up with some kind of errors. (Mostly related to imports)
12 Replies
kapa.ai
kapa.ai2y ago
Hi @aerocosmic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble with bootstrapping a refine application. The errors you're encountering might be due to a variety of factors. However, based on the information provided in the extracts, here are a few suggestions: 1. Check your environment: Refine works on any environment that can run React, including Vite, Next.js, Remix, and CRA(Legacy) etc. Make sure your environment is set up correctly to run React applications. source (https://refine.dev/docs/getting-started/quickstart) 2. Ensure correct installation: After bootstrapping your application, you should navigate to the project folder, install the dependencies, and then start your project. Here are the commands for that:
npm install
npm run dev
npm install
npm run dev
source (https://refine.dev/docs/getting-started/quickstart) 3. Check your import statements: Make sure you're importing the correct modules from the correct packages. For example, in a typical Refine application, you might see imports like these:
import { GitHubBanner, Refine, WelcomePage } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import { notificationProvider } from "@refinedev/antd";
import "@refinedev/antd/dist/reset.css";
import routerBindings, {
UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ColorModeContextProvider } from "./contexts/color-mode";
import { GitHubBanner, Refine, WelcomePage } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import { notificationProvider } from "@refinedev/antd";
import "@refinedev/antd/dist/reset.css";
import routerBindings, {
UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ColorModeContextProvider } from "./contexts/color-mode";
source (https://refine.dev/blog/building-react-admin-dashboard) If you're still encountering issues, it might be helpful to look at the specific error messages you're getting and try to troubleshoot from there. If the errors are related to specific packages or modules, you might find it helpful to look at the documentation for those packages or modules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai2y ago
<@668817956217815043> kapa.ai is still learning and improving, please let us how it did by reacting below
absent-sapphire
absent-sapphireOP2y ago
Suggested steps in 2. aren't for a pnpm install @kapa.ai
Omer
Omer2y ago
Hey @aerocosmic , We are experiencing some difficulties with pnpm. Could you please review this GitHub issue? https://github.com/refinedev/refine/issues/4439
GitHub
[BUG] Clean install doesn't compile: export 'TranslationContext' (i...
Describe the bug I just set up a refine project and tried to run it without changing anything but it does not compile. It rather shows this error: ERROR in ./node_modules/.pnpm/@refinedev+inference...
absent-sapphire
absent-sapphireOP2y ago
https://refine.new/preview/65b3b4e9-7f64-4630-89df-a5fb6fad6a79 pnpm install pnp run dev ==> Not working pnpm install @refinedev/core@latest pnpm run dev ==> Not working pnpm store prune Removed all cached metadata files Removed 17939 files Removed 80 packages
Preview - refine.new - Open-source enterprise application platform ...
Enterprise-grade, production-ready, and highly scalable web apps in minutes.
absent-sapphire
absent-sapphireOP2y ago
C:\PROG\lionelhorn-tests\automation-console-new-pnpm>pnpm install @refinedev/core@latest
 WARN  deprecated i18next-xhr-backend@3.2.2: replaced by i18next-http-backend
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Already up to date
Progress: resolved 882, reused 856, downloaded 4, added 0, done
 WARN  Issues with peer dependencies found
.
├─┬ @refinedev/chakra-ui 2.5.4
└─┬ @tabler/icons 1.35.0
├── ✕ unmet peer react@^16.13.1: found 18.0.0
└── ✕ unmet peer react-dom@^16.13.1: found 18.0.0
├─┬ @refinedev/cli 2.5.1
├─┬ ink 3.2.0
│ └─┬ react-reconciler 0.26.2
│ └── ✕ unmet peer react@^17.0.2: found 18.0.0
└─┬ ink-markdown 1.0.1
└─┬ marked-terminal 4.2.0
└── ✕ unmet peer marked@"^1.0.0 || ^2.0.0": found 0.8.2
└─┬ @refinedev/kbar 1.1.0
└─┬ kbar 0.1.0-beta.41
└─┬ react-virtual 2.10.4
└── ✕ unmet peer react@"^16.6.3 || ^17.0.0": found 18.0.0

Done in 12.6s
C:\PROG\lionelhorn-tests\automation-console-new-pnpm>pnpm install @refinedev/core@latest
 WARN  deprecated i18next-xhr-backend@3.2.2: replaced by i18next-http-backend
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
Already up to date
Progress: resolved 882, reused 856, downloaded 4, added 0, done
 WARN  Issues with peer dependencies found
.
├─┬ @refinedev/chakra-ui 2.5.4
└─┬ @tabler/icons 1.35.0
├── ✕ unmet peer react@^16.13.1: found 18.0.0
└── ✕ unmet peer react-dom@^16.13.1: found 18.0.0
├─┬ @refinedev/cli 2.5.1
├─┬ ink 3.2.0
│ └─┬ react-reconciler 0.26.2
│ └── ✕ unmet peer react@^17.0.2: found 18.0.0
└─┬ ink-markdown 1.0.1
└─┬ marked-terminal 4.2.0
└── ✕ unmet peer marked@"^1.0.0 || ^2.0.0": found 0.8.2
└─┬ @refinedev/kbar 1.1.0
└─┬ kbar 0.1.0-beta.41
└─┬ react-virtual 2.10.4
└── ✕ unmet peer react@"^16.6.3 || ^17.0.0": found 18.0.0

Done in 12.6s
pnpm run dev
X [ERROR] No matching export in "node_modules/.pnpm/@tabler+icons@1.35.0_react-dom@18.0.0_react@18.0.0/node_modules/@tabler/icons/icons-react/dist/index.esm.js" for import "IconLayoutSidebarLeftCollapse"

node_modules/.pnpm/@refinedev+chakra-ui@2.5.4_@chakra-ui+react@2.5.1_@refinedev+cli@2.5.1_@refinedev+core@4.28.0_asykzuzoivi2lozrtvgzbjtlby/node_modules/@refinedev/chakra-ui/dist/esm/index.js:1:11437:
1 │ ...-ui/react";import{IconLayoutSidebarLeftCollapse as qn,IconLayout...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[...]
pnpm run dev
X [ERROR] No matching export in "node_modules/.pnpm/@tabler+icons@1.35.0_react-dom@18.0.0_react@18.0.0/node_modules/@tabler/icons/icons-react/dist/index.esm.js" for import "IconLayoutSidebarLeftCollapse"

node_modules/.pnpm/@refinedev+chakra-ui@2.5.4_@chakra-ui+react@2.5.1_@refinedev+cli@2.5.1_@refinedev+core@4.28.0_asykzuzoivi2lozrtvgzbjtlby/node_modules/@refinedev/chakra-ui/dist/esm/index.js:1:11437:
1 │ ...-ui/react";import{IconLayoutSidebarLeftCollapse as qn,IconLayout...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[...]
@Omer Still not working
Omer
Omer2y ago
You can try with npm and yarn.
absent-sapphire
absent-sapphireOP2y ago
Same exact code works with npm. (already tried) But I can't use npm as all my work is in a pnpm monorepo. Would pnpm run refine update help in any way?
Omer
Omer2y ago
Got it. You can wait for the GitHub issue to be fixed
absent-sapphire
absent-sapphireOP2y ago
I had code based on an example working with pnpm in a monorepo at some point. I had to tweak the .npmrc to accomodate another package. Doesn't work anymore. Now even the example unmodified doesn't work anymore. Any idea of the priority of the said issue on github in your pipeline?
Omer
Omer2y ago
Unfortunately, I can't provide a specific date. However, I believe we can resolve it within 3-4 weeks. If that doesn't work for you, you can apply to refine's Priority Support Program. You can find more information at https://refine.dev/pricing
absent-sapphire
absent-sapphireOP2y ago
Thanks for the info.

Did you find this page helpful?