linaria: Linaria doesn't generate css in Vite

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 15 (4 by maintainers)

Commits related to this issue

fix(vite): css `url()` windows-specific resolve error (#1240) — committed to hmerritt/linaria by hmerritt a year ago
fix(vite): css `url()` windows-specific path resolve error (#1240) (#1280) * fix(vite): css `url()` windows-specific resolve error (#1240) * chore: changeset * chore: linter --------- Co-... — committed to callstack/linaria by hmerritt a year ago

Most upvoted comments

same issue，any updates?

leedalei on Apr 27, 2023

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.

ktdd on Jul 13, 2023

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`;

hmerritt on Jul 2, 2023

@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"
  }
}

houlang on May 5, 2023