DEV Community: Shruti Kapoor

Deep Dive: React Server Components in TanStack Start

Shruti Kapoor — Mon, 25 May 2026 18:43:14 +0000

React Server Components are now the default in Next.js and they’re shipping in TanStack Start. Whether you opted in or not, you’re going to encounter them in 2026. The good news: the TanStack approach makes RSCs feel like a tool you can opt-in for instead of a paradigm shift like in Next.js.

Let’s look at RSCs in depth -

Your component runs on the server. The server sends back the already-rendered tree as data, called the RSC payload. Not HTML. Not JavaScript. The client reads the payload and renders it. A raw RSC payload looks like this:

M1:{"id":"./ClientChart.js","chunks":["chunk1"],"name":""}
J0:["$","div",null,{"children":[
  ["$","h1",null,{"children":"Revenue"}],
  ["$","@1",null,{"data":{"today":18293.44}}]
]}]

M1 says “hey, there’s a client component over here.” J0 is the rendered tree, and @1 points back to that client component. You can see your own at rsc-parser.vercel.app.

If you want a refresher on RSC fundamentals first, here’s my recap video:

Under the hood, this is two React APIs doing all the work: renderToReadableStream and createFromReadableStream.

//create RSC payload
import { renderToReadableStream } from 'react-server-dom-webpack/server'

const stream = renderToReadableStream(<Page />, clientManifest)

//Read RSC payload
import { createFromFetch } from 'react-server-dom-webpack/client'
const tree = await createFromFetch(fetch('/rsc?path=/dashboard'))
// then render {tree} inside your root

That’s the whole magic. Everything any framework does is on top of these two APIs.

How RSC differs from SSR

This part is most confusing for developers. RSC is different from Server Side Rendering(SSR) since in SSR, a fully-developed HTML is shipped to the client. So you see something fast, then server sends the JavaScript so React can hydrate it and interactivity is added. Same component runs twice, once on the server, once on the client.

RSC sends the RSC payload instead of HTML, and the component code never gets to the client. It runs once.

React Server Components in Next.js

In Next.js, RSCs are on by default. You don’t do anything to get them. You can mark the parts of your app that are interactive using use client. When a request comes in, Next.js runs your Server Components on the server, serializes the rendered tree into the RSC payload, and streams it down.

However, the framework owns how RSCs are created, where they render, how interactive components are defined. You don’t really see how and when RSCs are created.

How RSCs are different in TanStack Start

TanStack Start takes a client-first approach. The client decides how a server-rendered UI should be fetched, whether as fully rendered HTML or as streams of data. In TanStack Start, RSCs are streams of data - React Flight streams, not a special part of the framework. Which means you can declaratively incorporate RSCs where you want to instead of getting them by default and then trying to opt-out. TanStack Start.

🔥** RSCs are just streams of bytes in TanStack Start**

The way you create RSCs in TanStack Start is very similar to how React create RSC under the hood. In fact, it is extremely simple -

import {
  renderToReadableStream,
} from '@tanstack/react-start/rsc'

// First create a serverFn
const getGreeting = createServerFn().handler(async () => {
  // Create an RSC readable stream
  return renderToReadableStream(
    // Return JSX
    <h1>Hello from the server</h1>,
  )
})

You can consume this RSC stream on the client using createFromReadableStream -

import {
  createFromReadableStream,
} from '@tanstack/react-start/rsc'

function Greeting() {
  const query = useQuery({
    queryKey: ['greeting'],
    queryFn: async () =>
      // Create a renderable element from the stream
      createFromReadableStream(
        // Call our server function to get the stream
        await getGreeting(),
      ),
  })

    return <>{query.data}</>

(This example is taken directly from the TanStack Start docs.)

🔥 What I love about this is that it is extremely simple, declarative and transparent. I know exactly which streams are RSCs, so I can sprinkle in RSC in my app when I need to, instead of making the entire app an RSC by default.

Read the full TanStack RSC writeup here.

Deep Dive: TanStack npm supply-chain compromise

Shruti Kapoor — Fri, 15 May 2026 19:44:02 +0000

This post is part of my weekly newsletter - Top 5 in Frontend and AI. Subscribe so you can deep dives like this in your inbox

If you have pull_request_target anywhere in your workflows, the TanStack compromise could happen to you. Here's exactly how it happened.

On May 11, a new strain of Shai-Hulud worm published 84 malicious versions across 42 @tanstack/* packages by chaining three GitHub Actions vulnerabilities - pull_request_target Pwn (Own) Request, cache poisoning across the fork ↔ base trust boundary, and OIDC token extraction from runner memory. Thankfully, no maintainer was phished and no token was stolen off a laptop.

What happened

An attacker opened a PR from a throwaway fork of TanStack/router . Although the maintainers never got a chance to review the PR since it was immediately closed, the CI workflow was triggered. The damage was already done because the bundle-size.yml workflow ran on pull_request_target, which runs in the base repo's privileged context with no first-time-contributor approval gate in the TanStack repo.

That workflow checked out the fork's PR-merge ref and ran pnpm nx run @benchmarks/bundle-size:build, which executed attacker-controlled code.

The attacker's code poisoned the pnpm cache and later, when an entirely legitimate merge to main, from a different PR, ran the release workflow, it restored that poisoned cache, extracted the short-lived publish token out of the runner's memory, and used it to push malicious versions across router-family packages.

The attacker managed to engineer a path where their own CI pipeline stole its own publish token for them, at the exact moment it was created, by way of a cache that everyone in the chain implicitly trusted.

What the malware does

When anyone runs npm install , pnpm install or yarn install against any affected version, npm resolves the optionalDepedencies array where the attacker added a pointer to a specific commit in a GitHub fork which contains the malicious package entry and executes a router_init.js . The script does the following things -

Steals every credential it can find: It walks through all the usual places developer machines and CI runners keep secrets. Your ~/.npmrc, your GitHub tokens (env vars, gh CLI config, .git-credentials), your SSH private keys, your cloud runners.
Smuggles the stolen secrets out using Session messenger: Session is an encrypted messaging app, and the malware uses its file-upload servers as a dead drop. The traffic looks like normal Session traffic, and the contents are end-to-end encrypted so even your network monitoring can't see what's being exfiltrated. The only way to stop it at the network level is to block the Session domains outright.
Tries to spread: That's the worm part of the attack. One compromised maintainer becomes the next set of compromised packages, which compromises the next set of maintainers, and so on.

Who was affected

42 packages, 84 versions, published in two waves roughly 6 minutes apart between 19:20 and 19:26 UTC on 2026-05-11. Confirmed clean families include @tanstack/query*, @tanstack/table*, @tanstack/form*, @tanstack/virtual*, @tanstack/store, and the @tanstack/start meta-package (but not @tanstack/start-*). Anyone who installed an affected version on 2026-05-11 must treat the install host as potentially compromised.

What should you do

Check your lockfiles for @tanstack/* resolutions dated 2026-05-11. The IOC fingerprint is an optionalDependencies entry pointing to "@tanstack/setup": "github:tanstack/router#79ac49eedf774dd4b0cfa308722bc463cfe5885c" and a router_init.js file at the package root.
If you find a hit, rotate everything reachable from that install host. AWS, GCP, Kubernetes, Vault, GitHub, npm, and SSH credentials.
Pin to known-good versions. TanStack has deprecated all 84 affected versions and npm security pulled the tarballs.
Audit your own pull_request_target workflows. If any of them checks out a fork's code and runs it, you have the same primitive sitting in your CI.

Lessons learnt

pull_request_target is a bad security practice and has been documented for over three years. TanStack had it in production, and so does a meaningful fraction of every popular OSS repo on GitHub right now. Worth running zizmor against your workflows this week.

Read the full postmortem here

Top 5 in Frontend and AI this week - AI Is Making Us Dumber + useEffect gets banned

Shruti Kapoor — Fri, 20 Mar 2026 22:28:37 +0000

This week's top 5 posts in Frontend and AI that you need to know -

1️⃣ What's happening in Modern CSS? by Daniel Schwarz. CSS now has randomness, anchor positioning, and clip-path tricks that replace entire JavaScript libraries.

2️⃣ NEW TanStack Hotkeys Library by Web Dev Simplified - Add keyboard shortcuts with zero boilerplate, cross-platform modifier keys, and smart scoping built in.

3️⃣ The Hidden Cost of AI Code We Are All Dealing With by Addy Osmani - AI writes code faster than we can review it, and your team's understanding of the codebase quietly shrinks with every merge.

4️⃣ Why we rolled our own React Server Components framework by Josh Wilson - The Aha! team built their own RSC framework in under 1,000 lines and cut time-to-interactive by over 80%.

5️⃣ Why we banned React's useEffect by Alvin Sng - Most useEffect usage compensates for things React already handles better, and AI agents are making it worse by adding it "just in case."

Read the full post here - https://shrutikapoor.substack.com/p/top-5-in-frontend-and-ai-this-week

React 2025 Full Course – Build a Netflix Clone with Tailwind, TanStack Router, TanStack Query & Zustand

Shruti Kapoor — Fri, 03 Oct 2025 04:22:36 +0000

GPT-5 - Hype or Legit Amazing? Front End Developer's honest review

Shruti Kapoor — Tue, 12 Aug 2025 07:27:33 +0000

New day, New model. GPT-5 is announced, but here's the real question - Does GPT‑5 feel like a genuine leap forward for developers, or is the excitement overblown?

In this video, I evaluate GPT‑5 specifically within React and JavaScript development workflows, testing how it performs on real-world coding tasks rather than theoretical benchmarks.

What is covered in this video -

Real coding scenarios with React and JS, showing whether GPT-5 generates clean, maintainable code.
Comparisons against previous models (e.g., GPT-4o or other GPT versions), especially in frontend tasks.
Observations on accuracy, style, and developer usability—does GPT-5 just “work,” or is it still messy or off-target?
A verdict on whether GPT-5 is a practical upgrade for frontend developers, or if the excitement is mostly hype.

AI 101 for Frontend Devs: LLMs, Transformers, RAG Explained Simply

Shruti Kapoor — Mon, 21 Jul 2025 08:41:00 +0000

Lately, AI has become a huge HYPE. But most of the terms floating around feel confusing or too technical.

LLMs.
Foundation models.
RAG.
Transformers.
MCP
RLHF

I kept seeing these everywhere and felt like I should understand them, but didn’t. So I took time to actually learn how it all works, and then made a short video explaining everything in plain English with clear visuals, hoping it helps both a tech person and a non-tech person

Watch this video to see these explanations in detail

Here's a quick summary -

1. The Layers of the AI Ecosystem

1.1 Hardware:

At the foundation, companies like Nvidia, AMD, Intel, and Huawei manufacture the physical processors that power AI computation. These chips are the "brain cells" of AI, enabling models to run, train, and perform tasks.

1.2 Cloud Providers:

Since hardware is expensive, cloud providers such as AWS, Google Cloud, Alibaba, and Microsoft Azure rent out these chips, offering computational resources to others. Think of them as factories providing the necessary tools for building products.

1.3 Model Builders:

On top of cloud providers, companies like OpenAI, Anthropic, Hugging Face, Meta, and Google use this computational power to create models—the "brains" of AI systems.

1.4 Applications:

These models power applications like ChatGPT, Claude, Midjourney, Canva AI, and more, which are the tools users interact with directly.

Developers work on foundational models.
Users interact with applications.

Here's the terms in short -

2.1 AI

Artificial Intelligence (AI) is a field of computer science focused on making systems that can perform as well as human intelligence. The goal is to create systems that can think, recognize patterns, make predictions, and understand language like humans.

The term "artificial intelligence" was coined in 1956.
Alan Turing's 1950 paper introduced the "imitation game", now called the Turing test, to see if machines can match human intelligence.

2.2 Machine Learning

Machine learning (ML) is a type of AI where machines learn from data.

Instead of explicit instructions, machines find patterns and make predictions.

Example:

If you provide the sequence 2, 4, 6, 8, 10, the model learns the pattern and predicts 12 as the next number.

Real-world ML examples:

Netflix recommending movies
Email clients learning to filter spam

2.3 Neural Networks

Neural networks are popular ML approaches that mimic brain cells.

They consist of layers of "neurons" making yes/no decisions together.

Example:

For image recognition (cat vs dog):

Input layer: receives the image data
Hidden layers: process features like fur, legs, facial features, whiskers
Output layer: predicts, e.g., 85% cat, 15% dog

2.4 Deep Learning:

Deep Learning is a kind of machine learning that uses many layers of neural networks.

The more hidden layers there are, the “deeper” the network.
Deep learning is behind modern speech recognition, image recognition, and natural language processing systems.

3. AI Terms Simplified

3.1 Model

A model is the “brain” of an AI system. It’s a core unit trained on data to make predictions, generate content, or solve specific tasks. For example, GPT-4 is a model trained on massive amounts of text, capable of understanding and generating human language.

Models are built by companies like OpenAI, Anthropic, Hugging Face, Meta, and Google.
Think of a model as a trained dog that performs certain tasks.

3.2 Foundational Models

Foundational models are powerful models trained on enormous datasets—trillions of words, books, and texts. Their strength lies in adaptability: many applications can be built on top of them, either by using them as they are or by fine-tuning for specialized tasks (like medical or customer service applications).

Examples: GPT-4 (OpenAI), Claude (Anthropic)
Analogy: A foundational model is like a guide dog trained with numerous tricks, ready for many situations.

3.3 Large Language Models (LLM)

An LLM is a type of model trained specifically on vast text data, excelling at understanding and generating human language.

Capabilities: predicting the next word, generating scripts, summarizing text, answering questions.
Analogy: An LLM is like a dog that understands and responds to commands in multiple human languages.
Example: ChatGPT is a popular LLM.

3.4 Generative AI

Generative AI refers to models that can create entirely new content—text, images, music—based on input prompts.

Example: Given a prompt like “a woman eating cake while riding a camel on a mountaintop,” generative AI can produce a unique image that never existed before.
Generative models are not limited to analyzing data; they create new ideas, code, text, and media.

3.5 Transformer

A transformer is the architecture that powers modern language models.

It enables models to understand not just individual words, but the context of entire sentences using “attention.”
Example: In the sentence “The trophy didn’t fit in the suitcase because it was too big,” a transformer helps the AI know “it” refers to the trophy.
First introduced in the paper “Attention Is All You Need” (2017).

3.6 GPT (Generative Pre-trained Transformer)

GPT stands for Generative Pre-trained Transformer, the technology behind models like ChatGPT.

Generative: Can create new content from input.
Pre-trained: Trained on large datasets beforehand.
Transformer: Uses the transformer architecture for context and understanding.

3.7 Prompts

A prompt is the input or question you give to an AI model (especially an LLM).

The quality of the prompt determines the quality of the output.
Prompt engineering is the craft of writing clear, informative prompts to get the best results.

Prompt Types:

Zero-shot: No examples, just the question.
Few-shot: Some examples given to help the model understand context.
Chain of thought: Encourages the model to reason step by step.

CRISPR Method for Prompts:

Context, Role, Intent, Specificity, Parameters, Refinement

3.8 Token

A token is a chunk of text (word or part of a word) that the AI processes.

More tokens in your prompt = higher computational cost.
Example: “A cat and a dog” may be four tokens.

3.9 Hallucinations

Hallucinations happen when an AI model confidently produces incorrect or made-up answers.

Always verify AI-generated information.
Example: Asking an AI for the definition of MCP may yield a wrong answer.

4. Training Approaches

4.1 Supervised Learning

What it is: The AI learns from examples that already have the right answers (labels).
How it works: You show the model lots of data with correct answers, like pictures labeled “cat” or “dog.”
Result: Next time the AI sees a new picture, it can guess if it’s a cat or a dog because it learned from the labeled examples.

4.2 Unsupervised Learning

What it is: The AI is given data without any answers or labels.
How it works: The model looks for patterns and groups in the data all by itself, without anyone telling it what’s right or wrong.
Result: It can find clusters, trends, or common features in the data (like grouping customers by shopping habits).

4.3 Reinforcement Learning from Human Feedback (RLHF)

What it is: The AI learns by getting feedback from humans.
How it works: The model makes a prediction or does a task, and you give it a thumbs up or thumbs down. This feedback helps it improve over time.
Result: The AI gets better at giving useful or correct answers because it learns from the feedback.

4.4 Fine-Tuning

What it is: Making an already trained model smarter for a specific job.
How it works: You take a big, general model (like GPT-4) and train it further on special data, like medical texts or legal documents.
Result: The AI becomes an expert in a particular area without having to start learning from scratch.

5. AI Tools

5.1 RAG (Retrieval Augmented Generation)

What it is: A method to help AI models answer questions more accurately by giving them access to extra information.
How it works: Instead of only relying on what the model was trained on, you let the AI “retrieve” specific data (like from a database or document) when you ask a question.
Result: The AI can use up-to-date or company-specific info to give better, more relevant answers.
Difference from Fine-Tuning: RAG doesn’t train the model on new data—it just gives extra info to look up when responding.

5.2 AI Agents

What they are: Software systems that can act autonomously or semi-autonomously to perform tasks using multiple tools or sources.
Examples:
- A code editor agent that reviews your work and suggests improvements.
- A travel booking agent that creates an itinerary and recommends hotels.
How autonomous? Most agents today help you by gathering information or making recommendations, but don’t fully automate everything. Their independence is expected to grow in the future.

5.3 MCP (Model Context Protocol)

What it is: A standardized way for AI systems and smart devices to communicate with each other.
How it works: Instead of building a custom link for each device or tool, MCP lets different systems talk using agreed-upon rules—making integration easier.
Why it matters: MCP helps developers connect their tools to many AI systems without extra work, speeding up innovation and compatibility.

In the video I also explain:

Machine learning vs deep learning
Neural networks
Prompt engineering
Tokens and how they affect cost
Hallucinations
RLHF (Reinforcement Learning from Human Feedback)
Agents, MCP, and more

You can watch it here:

Connect with Me:
YouTube: https://www.youtube.com/@shrutikapoor08
Keep up in tech with bi-weekly newsletter: https://substack.com/@shrutikapoor
Discord: bit.ly/shruti-discord

What tip would you give to someone who wants to get promoted?

Shruti Kapoor — Thu, 19 Jun 2025 08:02:08 +0000

React Best Practices: State Management

Shruti Kapoor — Fri, 30 May 2025 19:09:45 +0000

We are almost about to hit our goal!

Shruti Kapoor — Tue, 25 Feb 2025 23:08:27 +0000

I CAN'T KEEP CALM BECAUSE WE ABOUT TO REACH OUR GOAL OF 3000 PEOPLE IN THE TRIBE!
WOHOOOOOO 🎉

Join the tribe now - https://youtube.com/shrutikapoor08

I migrated from Create React App to Vite. Here's what I learnt -

Shruti Kapoor — Fri, 21 Feb 2025 22:49:41 +0000

This week, I migrated an old React 15 Create React App (CRA) project from 2017 to Vite. Here’s what I learned along the way.

1. Outdated React Version (React 15)

Vite auto-installs React 19, but my app was still on React 15. I was concerned that I’d need to incrementally upgrade to React 17+ before migrating.

Solution:

Downgrading Vite’s React version to 15 before migration was straightforward. I simply removed node_modules and replaced createRoot with the older ReactDOM.render.

2. Removing Create React App

The first step was to remove CRA. Since my project was using CRA’s built-in Webpack and Babel settings, I ejected the configuration:

npx react-scripts eject

This exposed Webpack and Babel configs, making it easier to transition to Vite.

3. Module Import Errors (`Cannot use import statement outside a module`)

Vite uses ES Modules (ESM), while CRA relied on CommonJS, causing import issues.

Solution:

Added "type": "module" to package.json.
Updated <script src> tags in index.html to include type="module".

4. Dependency Vulnerabilities and Security Issues

Running npm audit revealed 100s of vulnerabilities in dependencies such as postcss and node-fetch.

Solution:

Removed outdated packages.
Ran:

  npm audit fix --force

5. Handling Ejected Configuration Files

Ejecting CRA exposed Webpack and Babel configurations that Vite didn’t need.

Solution:

Deleted those files to prevent conflicts with Vite.

Watch the livestream to see this migration LIVE - https://www.youtube.com/live/fcXwlXEXuwA

I migrated from Create React App to Vite and took these steps

Shruti Kapoor — Fri, 21 Feb 2025 06:53:41 +0000

This week, I migrated an old React 15 Create React App (CRA) project from 2017 to Vite. Here’s what I learned along the way.

1. Outdated React Version (React 15)

Vite auto-installs React 19, but my app was still on React 15. I was concerned that I’d need to incrementally upgrade to React 17+ before migrating.

Solution:

Downgrading Vite’s React version to 15 before migration was straightforward. I simply removed node_modules and replaced createRoot with the older ReactDOM.render.

2. Removing Create React App

The first step was to remove CRA. Since my project was using CRA’s built-in Webpack and Babel settings, I ejected the configuration:

npx react-scripts eject

This exposed Webpack and Babel configs, making it easier to transition to Vite.

3. Module Import Errors (`Cannot use import statement outside a module`)

Vite uses ES Modules (ESM), while CRA relied on CommonJS, causing import issues.

Solution:

Added "type": "module" to package.json.
Updated <script src> tags in index.html to include type="module".

4. Dependency Vulnerabilities and Security Issues

Running npm audit revealed vulnerabilities in dependencies like postcss and node-fetch.

Solution:

Removed outdated packages.
Ran:

  npm audit fix --force

5. Handling Ejected Configuration Files

Ejecting CRA exposed Webpack and Babel configurations that Vite didn’t need.

Solution:

Deleted those files to prevent conflicts with Vite.

Watch the livestream to see this migration LIVE - https://www.youtube.com/live/fcXwlXEXuwA

Create React App is Dead. What does it mean for you?

Shruti Kapoor — Tue, 18 Feb 2025 22:48:34 +0000

This is the end of an era: Create React App is officially deprecated.

It’s been a long time coming. I have preferred Vite for a long time, so much so that I even recorded my React O'Reilly course with Vite instead of CRA.

Why is CRA deprecated?

It hasn’t been actively maintained.
With React 19, it broke things.
No built-in routing, and the default setup lacks key features. It’s slow.
Ejecting has always been a nightmare.

What should you do now?

If you have an app in CRA, migrate it to Vite. Seriously. It's fast, free, and simple. Check out my guide on setting up React with Vite

Alternatives to CRA

If you're looking for options, here are my top picks:
1️⃣ Vite – My go-to for almost everything + with TanStack Router and TanStack Query, it solves most of the problems of vanilla React.
2️⃣ Nx – If you need a monorepo setup.
3️⃣ Next.js, Remix – If you need full-stack capabilities.
4️⃣ Astro – Perfect for marketing/blog sites.

What I’m doing:

✅ I’m sticking with Vite for most of my apps.
✅ For routing, TanStack Router is my pick.
✅ For data fetching, TanStack Query all the way.
✅ When I need SSR or Server Components, I’ll reach for Next.js.

The CRA era is over. What are you switching to? Let me know in the comments.

Shruti’s Substack | Shruti Kapoor | Substack

I share Front End development knowledge through this newsletter, and a picture from my life. Click to read Shruti’s Substack, by Shruti Kapoor, a Substack publication with thousands of subscribers.

shrutikapoor.substack.com

DEV Community: Shruti Kapoor

Deep Dive: React Server Components in TanStack Start

How RSC differs from SSR

React Server Components in Next.js

How RSCs are different in TanStack Start

Deep Dive: TanStack npm supply-chain compromise

Top 5 in Frontend and AI this week - AI Is Making Us Dumber + useEffect gets banned

React 2025 Full Course – Build a Netflix Clone with Tailwind, TanStack Router, TanStack Query & Zustand

GPT-5 - Hype or Legit Amazing? Front End Developer's honest review

What is covered in this video -

AI 101 for Frontend Devs: LLMs, Transformers, RAG Explained Simply

1. The Layers of the AI Ecosystem

2.1 AI

2.2 Machine Learning

2.3 Neural Networks

2.4 Deep Learning:

3. AI Terms Simplified

3.1 Model

3.2 Foundational Models

3.3 Large Language Models (LLM)

3.4 Generative AI

3.5 Transformer

3.6 GPT (Generative Pre-trained Transformer)

3.7 Prompts

3.8 Token

3.9 Hallucinations

4. Training Approaches

4.1 Supervised Learning

4.2 Unsupervised Learning

4.3 Reinforcement Learning from Human Feedback (RLHF)

4.4 Fine-Tuning

5. AI Tools

5.1 RAG (Retrieval Augmented Generation)

5.2 AI Agents

5.3 MCP (Model Context Protocol)

What tip would you give to someone who wants to get promoted?

React Best Practices: State Management

We are almost about to hit our goal!

I migrated from Create React App to Vite. Here's what I learnt -

1. Outdated React Version (React 15)

2. Removing Create React App

3. Module Import Errors (Cannot use import statement outside a module)

4. Dependency Vulnerabilities and Security Issues

5. Handling Ejected Configuration Files

I migrated from Create React App to Vite and took these steps

1. Outdated React Version (React 15)

2. Removing Create React App

3. Module Import Errors (Cannot use import statement outside a module)

4. Dependency Vulnerabilities and Security Issues

5. Handling Ejected Configuration Files

Create React App is Dead. What does it mean for you?

Why is CRA deprecated?

What should you do now?

Alternatives to CRA

What I’m doing:

Shruti’s Substack | Shruti Kapoor | Substack

3. Module Import Errors (`Cannot use import statement outside a module`)

3. Module Import Errors (`Cannot use import statement outside a module`)