Differences between code generated using create-refine-app through yarn vs through npm

Hey all, just started learning about Refine today and went to start the tutorial using the headless version. I initially generated the Refine project using yarn as package manager. The project was created successfully, but when I went to go look at the generated App.tsx I saw that it was poorly formatted with lots of whitespace and unused imports. I tried installing Refine through npm instead and the code generated looked much better. Please see the attached screenshot - the yarn version is on the left and the npm version is on the right. Is the yarn installer working with an older version of the boilerplate? What accounts for the difference?
No description
kapa.ai
kapa.ai402d ago
Hi @unwrong. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai402d ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, the tutorial you mentioned suggests using the following command to create a new project with yarn:
yarn create refine-app -- -o refine-headless tutorial
yarn create refine-app -- -o refine-headless tutorial
Please note that it only supports yarn@1 version (source (https://refine.dev/docs/tutorial/getting-started/headless/create-project)). If you still encounter issues with the generated code, I recommend checking the Refine documentation (https://refine.dev/docs) and Refine blog (https://refine.dev/blog) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Overview | refine
What is refine?
Blog | refine
A Docusaurus powered blog!
kapa.ai
kapa.ai402d ago
<@706871839145590905> kapa.ai is still learning and improving, please let us how it did by reacting below
sensitive-blue
sensitive-blue402d ago
it's not expected behavior. Thank you for the issue report. We will investigate the issue
xenial-black
xenial-black402d ago
Awesome, thanks for the speedy response. If it helps at all, I used exactly the commands suggested on the tutorial page: yarn create refine-app -- -o refine-headless tutorial and npm create refine-app@latest -- -o refine-headless tutorial with the only difference being that I called my project folders something different.
sensitive-blue
sensitive-blue402d ago
When you add latest to yarn. is it good ?
xenial-black
xenial-black402d ago
I'll try now. I tried: yarn create refine-app@latest -- -o refine-headless tutorial and got an error saying that ".yarn/bin/create-refine-app@latest" could not be found. Is there an alternate command in yarn to specify the latest version?
sensitive-blue
sensitive-blue402d ago
I don't know. We will look into it tomorrow. its getting late where i live 🥹 Meanwhile please use npm. After that you can manually migrate to yarn ofc
xenial-black
xenial-black402d ago
Haha, for sure. Thanks for the help.
sensitive-blue
sensitive-blue402d ago
Thanks for the bugreport
More Posts
Avoid resource loadinghey guys, I have that routes. when I navigate to list, my list component call a different resourceRefine to navigator resourse,Hi dev's, how are you, how can I add elements to the navigation menu but that are not from the crud,I have media attached but just getting a list of nothing filesI can not figure out what I am doing wrong and I am sure its something simple. I want to list the fiimport from React setupCould this piece of code "import React, { useState, useEffect } from 'react';" be typed into any javUpdate Edit Modal after an EventIn edit modal, I am updating few fields on an event, How to re-render the UI?How to categorize sider items and make it collapseableHi, i want to make my sider items categorized. for example: - Users - User Profiles - User photos Multiple modalsHi all, I'm using headless useModal (https://refine.dev/docs/api-reference/core/hooks/ui/useModal/The default value seems to not be valid for the Select component, mode='multiple 'The data comes back fine, but it is not displayed on the component I wrote it with reference to thiIMG uploaded correctly on strapi but file details not stored.I'm following the https://refine.dev/blog/refine-invoice-generator/ blog and got stuck in the uploadHow can I invalidate the data returned by `getIdentity`?I want to force refetch all data that comes from the `useGetIdentity` hook, how is this possible?How to use MUI Datepicker on update pageI want to use mui datepicker on my update page. i want to convert the textfield into datepicker. butuseUpdateMany with foreign KeyHow to update many with foreign keysMultiple translations filesHi It’s possible have multiple translation files (namespaces) with refine? Thankstablehow do i pass token on refine api using my custom axios?Guide on uploading this into a replit enivronment>It won't let me run the npm install command on my replit environment... can someone help me get thisReact Query context issue with custom hooksHello, I am having a very weird issue with the React Query (now TanStack) Client with Refine. I am tauthhi how I can remove the client side authentication in addition I don't want the client side to contrhow to handle 404 error in errorNotification?Hi guys! I've got kind of problem then i use hook useForm and get initial value from backend - it miCreate refine app CLI has removed some optionsI was trying to create a refine app with MUI and I never got the choice to customise theme or layoutDoes refine support lazy-loading component by default?https://react.dev/reference/react/lazy#suspense-for-code-splitting