Linaria doesn't generate css in Vite

[houlang]

Environment

my project create by：

yarn create vite project_name --template react

package.json：

{
  "name": "ithome_test_linaria",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@linaria/babel-preset": "^4.4.3",
    "@linaria/core": "^4.2.8",
    "@linaria/react": "^4.3.6",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mobx": "^6.9.0",
    "mobx-react-lite": "^3.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@linaria/vite": "^4.2.9",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0-beta.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.1"
  }
}

vite.config.js：

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import linaria from '@linaria/vite';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [linaria(), react()],
    server: {
        open: true
    }
}) 

Test Components：

import { styled } from '@linaria/react';
const Title = styled.div`
  width: 100px;
  height: 100px;
  color: red;
`;
const Test = (props) => {
    return (
        <div>
            <Title>TitleTitle</Title>
        </div>
    )
}

export default Test; 

App.jsx：

import { useState } from 'react'

// import './App.css'
import Test from "./pages/Test/index.jsx";
function App() {
  const [count, setCount] = useState(0)

  return (
    <>
        <Test />
    </>
  )
}

export default App 

Description

run：yarn dev

In browser console show error

Failed to load resource: the server responded with a status of 404 (Not Found)

In Shell console show error info

Failed to load url /src/pages/Test/index_ursw01.css (resolved id: D:/.../src/pages/Test/index_ursw01.css) in D:/.../src/pages/Test/index.jsx. Does the file exist?

But running the build is ok

yarn build

So the css can be generated. Why?

My Question

Is it not supported for vite@^4.3.1 generation css?

I need help

[leedalei]

same issue，any updates?

[houlang]

same issue，any updates?

The version I am using now is ~4.2.0

run：

yarn remove vite

yarn add vite@~4.2.0 # not this vite@^4.2.0 

[dx314]

I'm having the same issue. File does not exist.

[houlang]

I'm having the same issue. File does not exist.

Try to run：

yarn remove vite

yarn add vite@~4.2.0 # not this vite@^4.2.0 

[nstepien]

Replacing @linaria/vite with @linaria/rollup solved issues I had with Vite 4.3, maybe you could try that.

[houlang]

Replacing @linaria/vite with @linaria/rollup solved issues I had with Vite 4.3, maybe you could try that.

I have tried and I think that is not the perfect solution I just want @linaria/vite

[nstepien]

@houlang you can use the rollup plugin in your vite config

[houlang]

@houlang you can use the rollup plugin in your vite config

I have already used @linaria/rollup

run yarn dev is ok

but yarn build failed，I am going back to vite@~4.2.0 version，continue to use @linaria/vite

error info:

vite v4.3.5 building for production...
✓ 849 modules transformed.
✓ built in 33.42s
[commonjs--resolver] D:\...test_linaria_rollup\node_modules\rc-menu\es\hooks\useAccessibility.js: Cannot read properties of null (re
ading 'body')
file: D:/.../test_linaria_rollup/node_modules/rc-menu/es/hooks/useAccessibility.js
error during build:
TypeError: D:\...\test_linaria_rollup\node_modules\rc-menu\es\hooks\useAccessibility.js: Cannot read properties of null (reading 'bod
y')

My config

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

import path from 'path' // install：npm i -D @types/node


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), linaria({
        // sourceMap: process.env.NODE_ENV !== 'production',
    })],
    resolve: {
        alias: {
            // @ => src
            '@': path.resolve(__dirname, 'src'),
            // ~@=>src
            '~@': path.resolve(__dirname, 'src')
        }
    }
})

package.json

{
  "name": "test_linaria_rollup",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@linaria/babel-preset": "^4.4.5",
    "@linaria/core": "^4.2.10",
    "@linaria/react": "^4.3.8",
    "@rollup/plugin-babel": "^6.0.3",
    "antd": "^5.4.6",
    "axios": "^1.4.0",
    "history": "^5.3.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mobx": "^6.9.0",
    "mobx-react-lite": "^3.4.3",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.1",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-visualizer": "^5.9.0"
  },
  "devDependencies": {
    "@linaria/rollup": "^4.3.8",
    "@types/node": "^20.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  }
}

[hmerritt]

I think I've solved this. I was having the same problem and was messing around with it for ages.

In linaria/packages/vite/src/index.ts change cssFilename -> cssId:

result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;

->

result.code += `\nimport ${JSON.stringify(cssId)};\n`;

[houlang]

I think I've solved this. I was having the same problem and was messing around with it for ages.

In linaria/packages/vite/src/index.ts change cssFilename -> cssId:

result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;

->

result.code += `\nimport ${JSON.stringify(cssId)};\n`;

Unfortunately, the author's updates are a bit slow.

[ktdd]

I think I've solved this. I was having the same problem and was messing around with it for ages.

In linaria/packages/vite/src/index.ts change cssFilename -> cssId:

result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;

->

result.code += `\nimport ${JSON.stringify(cssId)};\n`;

Damn, this stopped working in latest Linaria. Really need a fix for this.

e: Removing changes made by #1263 and everything works again.

[Anber]

Hi guys!
It looks like the issue appears only on Windows and is related to backslashes in paths. The problem here is that I don't have Windows, and I'm not allowed to use it by the company's security policies. It's solvable by using some cloud Windows, but it's an extremely uncomfortable and slow solution. So, if someone creates a PR, I would be extremely appreciated! :)

[nstepien]

@Anber would it help to run the Linaria CI on Windows as well?

[Anber]

@nstepien yes, it will definitely help to prevent regressions.

[ktdd]

Hi guys! It looks like the issue appears only on Windows and is related to backslashes in paths. The problem here is that I don't have Windows, and I'm not allowed to use it by the company's security policies. It's solvable by using some cloud Windows, but it's an extremely uncomfortable and slow solution. So, if someone creates a PR, I would be extremely appreciated! :)

Oh yeah, that was an easy solve now that we know it's related to backslashes.

In https://github.com/callstack/linaria/blob/master/packages/vite/src/index.ts, import path from 'node:path/posix' instead. That changes A:\Dir\Project\styles\linaria_{slug}.css to A:/Dir/Project/styles/linaria_{slug}.css and Windows finally finds the file.