: Summary cannot resolve import '/src/main.tsx'

Question

I have a legacy typescriptReact application and now I want to migrate it from webpack to vite, when I build the application using this command it shows an error like this: >tsc&&vitebuildvitev4.3.5buildingforproduction...✓2modulestransformed.✓builtin32ms[vite] :Rollupfailedtoresolveimport&q

P粉080643975 · Answer

For me it was a package I installed but got an error. The problem is that I forgot that I removed the package from the dependencies in package.json. I solved the problem by adding it. You can also do this

npm uninstall package

npm install package

P粉042455250 · Answer

Similar to this question, the default vite.config.ts file is as follows:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

If you run the build script using npm run build it will work because the index.html file is in the root level of the project. p>

rootDir/
  |- src/
      |- 
  |- index.html
  |- vite.config.ts

By passing a root attribute like root: path.join(__dirname, 'src') you need an index.html > placed in src Files inside of directory .

Now, since you are migrating from webpack, you may have index.html file inside the src directory and you try to modify vite.config.ts root in to find the correct entry point. However, the vite index.html file is linked to the main.tsx file as shown below

All you need to do is change the file structure to be the same as what vite gives you by default:

Change your vite.config.ts file to:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build:{
    outDir: "build"
  }
})

Then move the index.html file to the root directory.