How to setup with create-react-app

[redeemefy]

Using npx create-react-app my-app --template typescript I'm having problems to fully make it work. The font seem to not load properly but loading the browser default. Any link with this steps that is not Next but just react?

[ahmad1702]

Hello,

I saw your issue and thought it would be useful to have a create-react-app repo template that others can use. I made a shadcn-ui-cra template repo that you can fork to get a cra app using typescript, tailwind and shadcn-ui.

If you don't want to use a repo and to follow a step by step instruction, I have included it in the README of the same repo.

If an example project section gets added to shadcn/ui I think it this would be a good addition for other peoples reference. I've also created a react vite example and am working on a remix example.

[redeemefy]

So another issue I have with the create-react-app, seems like, is that webpack can't compile the "paths" property.

// tsconfig.json

  "compilerOptions": {
    "baseUrl": "src",
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "paths": {
      "@components/*": ["components/*"]
    }
  },
...

// App.tsx
import React from 'react';
import './App.css';
// import Navbar from './components/elements/Navbar' // this path works
import Navbar from '@components/elements/Navbar'

function App() {
  return (
    <main className="App">
        <Navbar />
      <h1 className="text-4xl">GitHub Finder</h1>
    </main>
  );
}

export default App;

Module not found: Error: Can't resolve '@components/elements/Navbar' in '/Users/<username>/path/to/project/src'

My guess is that its just a setup in the webpack for create-react-app and nothing can't be done?

[ashot]

+1

[ahmad1702]

The problem you are finding is with absolute paths in cra. create-react-app third release gives support for absolute paths but only if it's the same as the folder name. So usually you can do src/lib/utils out of the box with cra and webpack. But path alias's like '@' or '~' like how next.js does it requires some work. Here's how to do it in CRA using a package called craco:

1. Install the craco dependency:

   npm i -D @craco/craco

2. create 'craco.config.js' and paste the following:

   /* craco.config.js */
   const path = require(`path`);
   
   module.exports = {
    webpack: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
   };

3. Use craco in package.json:

   "scripts": {
   - "start": "npm start",
   - "build": "npm build",
   + "start": "craco start",
   + "build": "craco build",
    "eject": "react-scripts eject"
   },

4. You can now use the @ path alias the same way it's used in shadcn/ui:

   import { cn } from "@/lib/utils"

   ---

   I got it working in the shadcn-ui-cra starter example I mentioned in my previous comment. Heres is the commit that made it happen.

[iaingymware]

I know this is an old issue but thanks for producing this starter. It's helped me get my CRA setup and working.

Do you happen to know how to get theming working? I.e light/dark modes? Nextjs has built in handlers for this unfortunately.

[ahmad1702]

I have updated the shadcn-ui-cra repo with a dark mode implementation. It would be worth taking a look at the theme provider implementation that I got from the vite dark mode guide

[hdadr]

I have updated the shadcn-ui-cra repo with a dark mode implementation. It would be worth taking a look at the theme provider implementation that I got from the vite dark mode guide

Does it work for you properly? I have just set up a new project, added shadcnui which works fine. Extended with the dark mode following the website, but it doesn't work properly. I see that the html tag receives the class=light property, but it doesn't change when I give a dark as an initial value to to the theme provider. And if I change it to dark in the browser console it change the button element but not the background.

Setup: basically a vite react typescript fresh install.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.