search

refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
28.04k stars 2.18k forks source link

[BUG] [refine-remix is not a valid preset] pnpm create refine-app@latest won't create Refine + Remixjs + Ant Design starter template #6410

Closed jackytank closed 3 days ago

jackytank commented 5 days ago

Describe the bug

I follow this Refine guide to initiate my Refine + Remix Router + Ant Design starter project (https://refine.dev/docs/routing/integrations/remix/#usage)

When using this command

pnpm create refine-app@latest -- -o refine-remix my-refine-remix-app

I receive this output which say refine-remix is not a valid preset

 __________________________________________
/ They asked for a robust B2B solution. We \
\ heard 'time to shine with Refine'!       /
 ------------------------------------------
        \   ^__^
            ■-■¬\_______
            (__)\       )\/\
                ||----w |
                ||     ||
✔ Downloaded remote source successfully.
refine-remix is not a valid preset.
? Choose a project template ...
> Vite Creates a refine React Vite project.
  Next.js Creates a refine Next.js project with SSR support.

I'm desperate for a Refine + Remix + Ant Design + Vite combo as of Nextjs 14+ App Router and Turpopack was too painfully slow even with turbo turned on

npm run dev --turbo

Steps To Reproduce

  1. Type this to initiate project pnpm create refine-app@latest -- -o refine-remix my-refine-remix-app
  2. Observe the terminal output that say 
    __________________________________________
/ They asked for a robust B2B solution. We \
\ heard 'time to shine with Refine'!       /
------------------------------------------
    \   ^__^
        ■-■¬\_______
        (__)\       )\/\
            ||----w |
            ||     ||
✔ Downloaded remote source successfully.
refine-remix is not a valid preset.
? Choose a project template ...
> Vite Creates a refine React Vite project.
Next.js Creates a refine Next.js project with SSR support.

Expected behavior

a starter project Refine + Vite + Remix + Ant Design will be created successfully with various option for auth/no-auth, with sample pages/no-pages, data provider options

Packages

refine-app@latest

Additional Context

Love your great work with Refine.dev, I'm now introduce refine framework to everyone at my company for internal tools needs

BatuhanW commented 4 days ago

Hello @jackytank, we've removed remix from the CLI but it seems we didn't update the documentation.

You can use the following command to create your remix antd application, we'll update the docs soon.

npm create refine-app@latest -- --example with-remix-antd

jackytank commented 4 days ago

Noooo.... don't remove Remix please, Nextjs 14+ App Router Turbo compile so horrendously slow compare to Vite, but normal Vite React is not enough for my company project

jackytank commented 4 days ago

after run this command to create remix + antd project

npm create refine-app@latest -- --example with-remix-antd

It is having some bugs and errors

image

alicanerdurmaz commented 4 days ago

Hi @jackytank, I couldn't reproduce the issue. What command did you use to start the project?

BatuhanW commented 4 days ago

Noooo.... don't remove Remix please, Nextjs 14+ App Router Turbo compile so horrendously slow compare to Vite, but normal Vite React is not enough for my company project

We didn't remove Remix support, but we only removed it from the CLI boilerplate generate, because it adds a lot of maintenance overhead and not so different from our examples already.

jackytank commented 4 days ago

Hi @jackytank, I couldn't reproduce the issue. What command did you use to start the project?

Oh you mean running the project from this command? npm create refine-app@latest -- --example with-remix-antd

My PC environment: npm 10.9.0 node v21.1.0

Steps:

  1. Using the template generated from npm create refine-app@latest -- --example with-remix-antd,
  2. Run it up using npm run dev
  3. Click the posts page in the left sidebar image
  4. Error will be shown image

Relevant/helpful screenshots:

  1. Terminal image
  2. Its package.json image
jackytank commented 4 days ago

Oh man I can't stand NextJS npm run dev --turbo, it killing me with it slow compile time, 10s to 30s for a "use client" page.tsx, it reload the whole page and not hot reload like Vite when detect lot of code changes

alicanerdurmaz commented 4 days ago

Sorry @jackytank I couldn't reproduce the problem. Everything works as expected on my PC.

Maybe something is wrong with your node setup but I don't know what it is. My setup is like this:

## System:
 - OS: macOS 14.5
 - CPU: (10) arm64 Apple M2 Pro
## Binaries:
 - Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
 - Yarn: 1.22.17 - /opt/homebrew/bin/yarn
 - npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
## Browsers:
 - Chrome: 129.0.6668.101
 - Safari: 17.5

Can you change your package.json's dev script to this and try again? I will disable Refine CLI and it will use remix directly.

 "dev": "remix dev"
BatuhanW commented 4 days ago

Hello @jackytank, in order to run NextJS app with turbo, you need to add additional -- before --turbo.

npm run dev -- --turbo, if you don't add --, additional parameters won't be passed. Not %100 sure if that's the case for windows as well.

On Remix, can you try with Node 20 stable version? We didn't test with Node 21 and it failed to install on my mac.

Update: I installed Node 21 and couldn't reproduce the issue.

~Finally, it seems you have random ports for your application, is it expected? Normally port would be 3000 for remix apps. Wanted to check if anything is off with that.~ Nvm. Just realized it allocates a random port if 3000 isn't available.

jackytank commented 4 days ago

Sorry @jackytank I couldn't reproduce the problem. Everything works as expected on my PC.

Maybe something is wrong with your node setup but I don't know what it is. My setup is like this:

## System:
 - OS: macOS 14.5
 - CPU: (10) arm64 Apple M2 Pro
## Binaries:
 - Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
 - Yarn: 1.22.17 - /opt/homebrew/bin/yarn
 - npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
## Browsers:
 - Chrome: 129.0.6668.101
 - Safari: 17.5

Can you change your package.json's dev script to this and try again? I will disable Refine CLI and it will use remix directly.

"dev": "remix dev"

Hi the issue I said earlier when trying this template

npm create refine-app@latest -- --example with-remix-antd

My company PC have node v21.1.0 installed and also we have firewall in company Ethernet so maybe some nodejs packages were being blocked traffic by our firewall rules when npm i

After trying running again npm create refine-app@latest -- --example with-remix-antd on my personal Laptop with below environment and with both "refine dev" and "remix dev"

npm 10.9.0 node v20.16.0

The template work perfectly without earlier error I said

jackytank commented 4 days ago

Hello @jackytank, in order to run NextJS app with turbo, you need to add additional -- before --turbo.

npm run dev -- --turbo, if you don't add --, additional parameters won't be passed. Not %100 sure if that's the case for windows as well.

On Remix, can you try with Node 20 stable version? We didn't test with Node 21 and it failed to install on my mac.

Update: I installed Node 21 and couldn't reproduce the issue.

~Finally, it seems you have random ports for your application, is it expected? Normally port would be 3000 for remix apps. Wanted to check if anything is off with that.~ Nvm. Just realized it allocates a random port if 3000 isn't available.

Hi I had try again with npm run dev -- --turbo and with node v20.16.0 on my personal Laptop the slow NextJS compile time still there, and after done some research before this issue maybe due to NextJS poor compiling performance (not Refine)

BatuhanW commented 3 days ago

Hey @jackytank closing the issue then.