Fix Vite Build Error: Rollup Failed To Resolve 'react'

Hey guys! Running into a frustrating Vite build error where Rollup fails to resolve imports like 'react' or 'react-dom/client'? You're not alone! This issue often pops up even when you've meticulously followed the installation instructions. Let's dive into the causes and, more importantly, how to fix it!

Understanding the Error

The error message usually looks something like this:

[vite]: Rollup failed to resolve import "react" from "/Users/nutheory/code/ex_chemists/deps/live_react/assets/js/live_react/hooks.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

And a similar error might appear for 'react-dom/client' when running the app in the browser. This basically means that Vite, using Rollup under the hood, can't find the react or react-dom/client modules during the build process. Even though they seem to be present in your node_modules and deps directories, Vite isn't picking them up correctly.

Possible Causes and Solutions

So, what's going on? Here are several potential culprits and how to address them:

1. Missing or Incorrect Dependencies

This is the most common cause. Even if you think you've installed everything, double-check your package.json file to ensure that react and react-dom are listed as dependencies. Also, make sure the versions are compatible with your project. Sometimes, an outdated or incompatible version can cause resolution issues.

Solution:

Run the following command in your project's root directory to explicitly install or update react and react-dom:

npm install react react-dom
# or
yarn add react react-dom

After running this command, completely clear your node_modules folder and reinstall everything. This forces a clean install, resolving potential conflicts or corrupted packages.

rm -rf node_modules
npm install
# or
yarn install

2. Incorrect Import Paths

Double-check the import statements in your JavaScript/JSX files. Make sure you're using the correct paths:

import React from 'react'; // Correct
// Not this: import React from './react';
import ReactDOM from 'react-dom/client'; // Correct
// Not this: import ReactDOM from 'react-dom';

Typos or incorrect relative paths can prevent Vite from finding the modules.

3. Vite Configuration Issues

Your vite.config.js (or vite.config.ts) file might be misconfigured. Specifically, the resolve and optimizeDeps sections are crucial for module resolution.

Solution:

• resolve.alias: This option allows you to create aliases for module paths. While not always necessary, it can be helpful in complex projects. Make sure you don't have any aliases that are unintentionally interfering with react or react-dom resolution.
• optimizeDeps.include: This option tells Vite which dependencies to pre-bundle for faster development. Try adding react and react-dom to this list.

Example vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react()
  ],
  optimizeDeps: {
    include: ['react', 'react-dom'],
  },
})

4. Caching Problems

Vite aggressively caches modules to speed up builds. However, sometimes this cache can become stale or corrupted, leading to resolution errors.

Solution:

• Clear Vite's Cache: You can manually clear Vite's cache by deleting the .vite directory in your project's root (if it exists) or by running npm cache clean --force or yarn cache clean. After clearing the cache, restart your development server.

• Restart Your Development Server: Simply restarting your dev server often does the trick!

5. Issues with Linked Modules (Monorepos)

If you're working in a monorepo or using linked modules (e.g., with npm link or yarn link), Vite might have trouble resolving dependencies correctly.

Solution:

• Check Symlinks: Verify that the symlinks are correctly set up and pointing to the right locations.
• Use resolve.dedupe: Add react and react-dom to the resolve.dedupe array in your vite.config.js. This tells Vite to use a single instance of these modules, preventing conflicts.

Example:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react()
  ],
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
})

6. TypeScript Configuration

If you are using TypeScript, ensure your tsconfig.json file is correctly configured. Specifically, check the compilerOptions:

• moduleResolution: This should be set to node or nodenext (if using ES modules).
• jsx: This should be set to react-jsx or react-jsxdev if you're using the new JSX transform.

Example:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "react-jsx",
    // ... other options
  }
}

7. Phoenix/LiveView Integration (Specific to the Original Post)

Since the original post mentions mix assets.build and live_react, there might be specific issues related to how Vite is integrated with Phoenix and LiveView.

Solution:

• Verify assets/package.json: Ensure your Phoenix assets/package.json file contains the necessary react and react-dom dependencies.
• Check config/dev.exs and config/prod.exs: Make sure the Vite configuration in your Phoenix configuration files is correctly pointing to the Vite manifest file.
• Review live_react Configuration: If you're using a library like live_react, double-check its configuration to ensure it's correctly set up to work with Vite.

8. Node Version

Rarely, but sometimes, using a very old or very new Node.js version can cause compatibility issues. Try using a Node.js version that's within the Active LTS or Maintenance LTS range.

Solution:

Use nvm (Node Version Manager) to install and switch between different Node.js versions.

nvm install --lts
nvm use --lts

Debugging Steps

If you've tried the above solutions and are still facing the error, here's a systematic way to debug the issue:

1. Start Simple: Create a minimal reproducible example. A small project with just react and a basic component can help isolate the problem.
2. Verbose Logging: Increase Vite's logging level to see more detailed information during the build process. You can do this by adding the --debug flag to your Vite build command.
3. Inspect node_modules: Manually check the node_modules directory to ensure that react and react-dom are actually present and that their contents seem correct.
4. Check the Dependency Tree: Use npm list or yarn list to visualize your project's dependency tree and identify any potential conflicts or version mismatches.

Conclusion

The "Rollup failed to resolve import 'react'" error in Vite can be a real head-scratcher, but by systematically checking your dependencies, configuration, and cache, you can usually track down the root cause and get your build working again. Good luck, and happy coding!