RollupError: Could not resolve

[zfreiter]

I'm getting the above error that says it can not resolve my CSS files in my react Typecript file. The project works fine local, but breaks when I try build and deploy through Github. I would appreciate any help on this. Below is the error I am experiencing.

[samhirtarif]

Does the command npm run build work on your local machine?

[zfreiter]

Yes. No errors when I run the build local.

[samhirtarif]

Would it be possible to share the github action? With important bits and pieces obfuscated of course

[zfreiter]

Do you mean the deploy.yml file? When I commit out the imports for the css files, everything works but there is no styling.

[samhirtarif]

Yes, that and your vite config file

[zfreiter]

I created another Vite project and copied everything over to the new project and followed a different deployment example and everything works fine now. For some reason it just didn't want to add the css files in the original project and the previous deployment example worked in the past for me. I think my lack of experience working with config and deployment files hindered me in finding a solution.

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

// https://vitejs.dev/config/
export default defineConfig({
base: '/profile/',
plugins: [react()],
});`

deploy.yml
`# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:

Runs on pushes targeting the default branch

push:
branches: ['main']

Allows you to run this workflow manually from the Actions tab

workflow_dispatch:

Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages

permissions:
contents: read
pages: write
id-token: write

Allow one concurrent deployment

concurrency:
group: 'pages'
cancel-in-progress: true

jobs:

Single deploy job since we're just deploying

deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1`

[amalmohann-dgnl]

any updates on this?

[DeadZeta]

I encountered a similar problem, only instead of a css file I have a problem with a tsx file.

In this case, the local assembly without the participation of Docker works successfully. But when I try to use docker I always get errors

[NkITaa]

Push, have the same problem

[mdfarhanVSM]

sorry so what should we do ???

[faridguzman91]

i got a similar problem, any updates?

[Errorname]

I had the same issue but, after 3 hours, found out that the casing between my import and my file name was not the same:

import "./Button.css" vs file named button.css

Locally, on my macbook, there was no issue because on Mac OS, the file system is case insensitive. But on linux (used by Github Actions or Docker), the file system is case sensitive.

The solution:

• Either fix the import casing;
• Or rename your file (git mv path/to/button.css path/to/Button.css if you're using git)

I hope this helps someone to not lose 3 hours for this, just like I did 🙃

[Realify2005]

@hangrybear666 TYSM

[eanaellea]

Lmaoo thanks so much, had this exact issue and went looking way too far before checking this x)

[Ankit-Tanwar03]

Worked for me too. thanks for sharing!

[bryanansong]

This fixed my issue! Thank you

[Yusang-park]

Ah, thanks... I found github's is lowercase...

[flaviovich]

@flaviovich what's your issue ?

a folder in the import path was in lower case, for example:
import { Component } from './components/Bar'
should be:
import { Component } from './Components/Bar'
just as simple as that.

[Chady00]

Yes, we all fixed it and thanked Errorname for noticing that.
You can fix it simply by :
a folder in the import path was in lower case, for example:
import { Component } from './components/Bar'
should be:
import { Component } from './Components/Bar'
just as simple as that.

[romhenri]

I m with the same problem, but nothing is working.

I m using Vercel to deploy and the logs show that the import failed even though i delete the import.

[hangrybear666]

In my situation the casing of files in the github repo got desynced with my IDE, so my imports did not resolve.
The file was named test_File.jsx in my IDE but test_FILE.jsx in github.
Github on default ignores casing.

git config core.ignorecase false
git add .
git commit -m "Message here"
git push

See:
https://stackoverflow.com/questions/6899582/i-change-the-capitalization-of-a-directory-and-git-doesnt-seem-to-pick-up-on-it

[filhodanuvem]

Same thing here, thank you.
Vscode was showing me the file name "Comment.jsx" but when I went to check on github, the file was named "comment.jsx" 🤦🏾‍♂️ .

[romhenri]

Yes, this happen when git do not recognize the Case change, but happened.

[kjavedan]

This worked for me, thank you for sharing @hangrybear666.

[asish-tailwind]

This worked for me, Thank You @hangrybear666

[Akshh2i3]

Similar kind of issue but in my case the css file is imported correctly and no error is shown but when i open the project form vercel the css only works for the main component (app.js) and not for the inner components which i exported from another folder. Same thing works fine on my local system. I would appreciate any help on this. Below is the error I am experiencing.