Build error when importing CSS file

[jchimes5308]

Reproduction

This is so basic, it must have been seen before. I just really need a workaround. I used npx to create a new project on Windows 10, Remix version 2.3.1. In the app/root.tsx file I replaced the links function with the following: import mainCss from '~/pagestyles/shared.css'; export const links: LinksFunction = () => [{ rel: "stylesheet", href: mainCss }]; The file /app/jpagestyles/shared.css contains one line of css. When I execute npm run dev I get the following error: The following error is a bug in Remix; please open an issue! https://github.com/remix-run/remix/issues/new X [ERROR] entry file not found [plugin css-file]

app/root.tsx:12:20:
  12 │ import mainCss from '~/pagestyles/shared.css';
     ╵                     ~~~~~~~~~~~~~~~~~~~~~~~~~

Am I missing something? This is too basic of a task. Is there another way to do this?

System Info

Windows 10, Remix 2.3.1, plain, unedited project created by npx create-remix@latest

Used Package Manager

npm

Expected Behavior

Inject my css file into the HTML header without a compler error.

Actual Behavior

Compiler error as described.

[brophdawg11]

This seems to be working ok in stackblitz: https://stackblitz.com/edit/remix-run-remix-eoyucp?file=app%2Froot.tsx

Can you download that repo, run npm ci and run it locally and see if it works for you there? It seems like something local to your machine, or potentially Windows specific (I don't have a Windows machine to test on)

[jchimes5308]

Thanks brophdawg for having a look at this! I downloaded and ran on my box, and sure enough got the same error. Note that I am able to compile and run multi page apps using Remix. This only happens when I attempt to import a .css file for use in the links function. So a Windows file system issue? Are there any Windows experts out there who have seen something like this?

[jchimes5308]

I found this github link regarding Remix 1 that appears to be my exact issue. The developers seem to think the issue was fixed and closed, but at the end is a mysterious comment that it turned up in v2 also. Perhaps someone out there worked on this issue and can help me with a workaround or fix? Thanks! https://github.com/remix-run/remix/issues/4726

[jchimes5308]

I found a solution (or more accurately, a workaround): Install WSL and run it from there. Works perfectly! Clearly a Windows issue.

[nathanqueija]

For people also getting this error: make sure you don't have any errors in your tailwind config file. I was missing a comma somewhere and this was the reason.

[Youssef535]

For people also getting this error: make sure you don't have any errors in your tailwind config file. I was missing a comma somewhere and this was the reason.

Yes always happen to me that is you need to install prettier and it's plugin if you use tailwindcss ==> npm install -D prettier prettier-plugin-tailwindcss and don't forgot to use the right config and eslint of course will help a lot

[foresterre]

I have the same issue after installing tailwind following the instructions in the docs (I'm currently on a Windows machine):

X [ERROR] entry file not found [plugin css-file]

    node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:174:30:
      174 │           invariant["default"](entryFile, "entry file not found");
          ╵                               ^

    at Object.invariant [as default] (D:\try\remix-trial\node_modules\@remix-run\dev\dist\invariant.js:18:11)
    at D:\try\remix-trial\node_modules\@remix-run\dev\dist\compiler\plugins\cssImports.js:174:31
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:12:
      77 │       build.onLoad({
         ╵             ~~~~~~

    at setup (D:\try\remix-trial\node_modules\@remix-run\dev\dist\compiler\plugins\cssImports.js:77:13)
    at handlePlugins (D:\try\remix-trial\node_modules\esbuild\lib\main.js:1279:21)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

  The plugin "css-file" was triggered by this import

    app/root.tsx:15:23:
      15 │ import stylesheet from "~/tailwind.css";
         ╵                        ~~~~~~~~~~~~~~~~

[jchimes5308]

foresterre: I was unable to solve this issue using Windows. I installed WSL on my Windows 10 machine and it's been smooth sailing ever since. Also, developing on WSL is a faster and superior experience in general.

[foresterre]

foresterre: I was unable to solve this issue using Windows. I installed WSL on my Windows 10 machine and it's been smooth sailing ever since. Also, developing on WSL is a faster and superior experience in general.

That's unfortunate 😔: I rather not use WSL on my Windows machine; in the meantime I've tried getting it to work on my Linux machine, and indeed there it does seem to work out of the box.

Perhaps the most frustrating part was that, as someone unfamiliar with these libraries, it's not easy to find a solution or workaround based on this error message.