49

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

> vite-project@0.0.0 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)```
agm1984
  • 15,500
  • 6
  • 89
  • 113
James Mansfield
  • 591
  • 1
  • 4
  • 5

6 Answers6

57

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)

Advoot
  • 731
  • 6
  • 5
15

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.

Mostafa Ahangarha
  • 340
  • 2
  • 14
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

agm1984
  • 15,500
  • 6
  • 89
  • 113
1

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'
        },
    },
})
hoang quoc
  • 11
  • 2
0

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!

abhijat_saxena
  • 705
  • 5
  • 20
-1

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

Collin Alpert
  • 475
  • 6
  • 14