linaria
linaria copied to clipboard
callstack
[Feature Request] supporting linara in vite react-ts template
I tried adding rollup plugin of linaria to vite template react-ts following https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#Rollup without success. When calling css of @linaria/core in App.tsx, an error like 'App.tsx_xxx.css is not found' occurred.
As https://github.com/vitejs/vite/issues/1967 mentioned, it seems like linaria does not support vite yet (or did I miss sth)?
Thank you in advanced!
I've had success in my personal projects using this plugin I made:
https://github.com/denn1s/vite-plugin-linaria
I'm open to collaborate and use it as a starting point for a more complete plugin down the line.
Prepeding a forward slash to the filename fixes the problem with Vite: https://github.com/callstack/linaria/blob/20e1ba5f60d06b2399bd54d723be91364b8acea3/packages/rollup/src/index.ts#L52
Namely it should be like below for the plugin to work.
const filename = `/${id.replace(/\.js$/, '')}_${slug}.css`;
Now that this PR merged, @linaria/rollup looks to works with Vite.
import pluginLinaria from '@linaria/rollup';
import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), pluginLinaria()],
});
While @linaria/rollup works for development, in my case it does break when attempting to build with:
vite v2.7.11 building for production...
✓ 0 modules transformed.
[linaria] /Users/olivier/Projects/foo/foo-webapp/index.html: Unexpected token (1:0)
> 1 | <!DOCTYPE html>
Using "^3.0.0-beta.15"
Anyone found a workaround?
@mgcrea same issue for me.
I fixed it by excluding .html files
plugins: [
linaria({
exclude: ["**/*.html"],
}),
]
@Platane can you share a working repository with Vite & Linaria? Thank yuou
@betterRunner did you fix the error? I'm trying to setup new React TS Vite project and I would like to use linaria but I can't make it working. I was following the https://github.com/callstack/linaria/tree/master/examples/vite but when I start the dev server I get this error:
yarn run v1.22.19
$ vite
failed to load config from /Users/claudiu.cojocaru/Development/thinkOnline_bellway/vite.config.ts
error when starting dev server:
TypeError: linaria is not a function
at file:///.../vite.config.ts.timestamp-1662464867437.mjs:12:10
at loadConfigFromFile (file:///.../node_modules/vite/dist/node/chunks/dep-665b0112.js:63308:15)
at async resolveConfig (file:///.../node_modules/vite/dist/node/chunks/dep-665b0112.js:62904:28)
at async createServer (file:///.../node_modules/vite/dist/node/chunks/dep-665b0112.js:61978:20)
at async CAC.<anonymous> (file:///.../node_modules/vite/dist/node/cli.js:700:24)
error Command failed with exit code 1.
@cojoclaudiu I run into this problem too. If your project is of type: module in your package.json it won't import @linaria/rollup correctly. It actually ends up importing an object like this:
{ default: <this is the actual plugin function> }
You might be able to remove type: module from your package.json or invoke linariaPlugin.default() instead.
Do you have a working sandbox? To be honest I gave up using linaria because I had to move on with the project. But I'm looking forward to use it for the future projects.
@cojoclaudiu Hi there, sorry I haven't followed up on this issue for a while so I can't provide more details. Also waiting for updates.