Vite "rollup failed to resolve" build error

Question

Trying to build a simple Vite project that has tailwindcss in it and getting the following error, any ideas?

> [email protected] build
> vite build

vite v2.3.4 building for production...
✓ 1 modules transformed.
[vite]: Rollup failed to resolve import "style.css" from "index.html".
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`
error during build:
Error: [vite]: Rollup failed to resolve import "style.css" from "index.html".
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`
    at onRollupWarning (/Users/jmansfield/Sites/vite-project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:45022:19)
    at Object.onwarn (/Users/jmansfield/Sites/vite-project/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44812:13)
    at Object.onwarn (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:20122:20)
    at ModuleLoader.handleResolveId (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19143:26)
    at /Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19097:22
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19095:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/jmansfield/Sites/vite-project/node_modules/rollup/dist/shared/rollup.js:19071:9)
    at async Promise.all (index 0)```

Kaczmarek

Answer 1

It's because build.rollupOptions.external from vite:rollup setup looks for / before external files. So when you add css files to your html just add '/' (eg. /src/foo.css instead of src/foo.css)

Jenninejennings

Answer 2

Basically vite cannot find the css file you referenced in html. Once I faced with this issue and I changed the way I referenced the css file in html. Either I added or removed ./ from the path.

Discoid

What if you dont want vite to look for the file? The assets I have listed as '/myassets/asset.css' are from the server i will be deploying to. – Fusillade

Answer 3

In my case - all the '@' paths were not getting resolved, so we added a path resolver in our vite.config.ts file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import InjectCSS from '@itsy/vite-css-inject';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    InjectCSS(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@tests": path.resolve(__dirname, "./tests")
    }
  }
})

Hope that helps!

Swansea

I use path.resolve('./src'). what's the difference? – Bucky

Answer 4

I just had this problem and it was caused by a typo in the filename.

On MacOS, filenames are not case sensitive, but on Linux, they are, so if your image asset works locally and then breaks when deploying, check the filename case.

Mine was src="/logos/Logo_horizontal.svg" instead of src="/logos/Logo_Horizontal.svg".

The Vite docs confirm to use /logos for /public/logos: https://vitejs.dev/guide/assets.html#the-public-directory

Wiseman

Answer 5

My issue was fixed by running npm i

Carcinomatosis

Indeed, this helped me – Linhliniment

Answer 6

You need to create alias object to define the import file in src "style" : "src/style" same my code below to handle this problem. (I have @crema, core, ... folders in src).

import {
    defineConfig
} from 'vite'
import react from '@vitejs/plugin-react'
import {
    resolve
} from "path";

const aliases = {
    '@crema': 'src/@crema',
    'core': 'src/core',
    'assets': 'src/assets',
    '@hook': 'src/@hook',
    'components': 'src/components',
    'features': 'src/features',
    'guards': 'src/guards',
    'pages': 'src/pages',
    'types': 'src/types',
};

const resolvedAliases = Object.fromEntries(
    Object.entries(aliases).map(([key, value]) => [key, resolve(__dirname, value)]),
);

export default defineConfig({
    plugins: [react()],
    build: {
        rollupOptions: {
            external: [
                "react", // ignore react stuff
                "react-dom",
            ],
        }
    },
    resolve: {
        alias: {
            ...resolvedAliases,
            './runtimeConfig': './runtimeConfig.browser',
            'jss-plugin-{}': 'jss-plugin-global'
        },
    },
})

Cosette

Answer 7

None of the solutions mentioned in any thread I found worked for me so I'll share what did work in my case.

I'm using Vue 3 in Laravel and I discovered that I needed to configure the Vue plugin in Vite to refrain from rewriting/parsing asset URLs. That was accomplished with the following config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
   plugins: [
       vue({
         template: {
           transformAssetUrls: {
             base: null,
             includeAbsolute: false,
           },
         },
       }),
       laravel({
           input: ['resources/css/app.css', 'resources/js/app.js'],
           refresh: true,
       }),
   ],
});

You can reference the Laravel 10 docs for Vite here which mention the following key points:

transformAssetUrls: {
  // The Vue plugin will re-write asset URLs, when referenced
  // in Single File Components, to point to the Laravel web
  // server. Setting this to `null` allows the Laravel plugin
  // to instead re-write asset URLs to point to the Vite
  // server instead.
  base: null,
 
  // The Vue plugin will parse absolute URLs and treat them
  // as absolute paths to files on disk. Setting this to
  // `false` will leave absolute URLs un-touched so they can
  // reference assets in the public directory as expected.
  includeAbsolute: false,
},

Swords

I am new to Vite but this one was the correct answer for me! – Heedless

Answer 8

I encountered similar problem: Rollup failed to resolve import "@iconify-icons/ep/Upload" ,the problem is that fileName not case sensitive,at windows platform it's ok,but in linux it throw an error.

Papilla

Answer 9

In my case a similar error came up because I was trying to make an incorrect import from a library:

import {
  ElCard, ElForm, ElFormInput, ElInput, ElDivider, ElButton
} from "element-plus";

Where ElFormInput isn't in element-plus. This resulted in this error:

#0 63.70 [vite]: Rollup failed to resolve import "element-plus/es/components/form-input/style/css" from "/app/src/components/MyView.vue?vue&type=script&setup=true&lang.ts".
#0 63.70 This is most likely unintended because it can break your application at runtime.
#0 63.70 If you do want to externalize this module explicitly add it to
#0 63.70 `build.rollupOptions.external`

The solution was to remove ElFormInput from the import.

Pharmacy

Answer 10

In my case I had the following that failed:

import '@fortawesome/fontawesome-free/js/all

The reason it failed was the definition of an alias for @ in vite.config.ts:

resolve: {
    alias: [
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
    ]
}

Changing the import to the following fixed that for me:

import '../node_modules/@fortawesome/fontawesome-free/css/all.css';

(the file was imported from a file directly inside /src)

Unheardof

Answer 11

In my case, I had the error, unable to resolve import "@inertiajs/vue3". And as crazy as it seems, I simply had to run npm install for the package for the error to be fixed. Somehow I had accidentally uninstalled it during the course of the project.

Divorcement

Answer 12

For those of you getting this error while running in Docker, I was missing a WORKDIR /app command. Adding this fixed the error.

Tramroad