Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request] supporting linara in vite react-ts template #735

Closed
betterRunner opened this issue Feb 11, 2021 · 13 comments
Closed

[Feature Request] supporting linara in vite react-ts template #735

betterRunner opened this issue Feb 11, 2021 · 13 comments
Labels
bundler: rollup 🗞️ Issue is related to rollup bundler feature: proposal 💬 New feature proposal that needs to be discussed

Comments

@betterRunner
Copy link

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.

image

As vitejs/vite#1967 mentioned, it seems like linaria does not support vite yet (or did I miss sth)?

Thank you in advanced!
@betterRunner betterRunner added the feature: proposal 💬 New feature proposal that needs to be discussed label Feb 11, 2021
@github-actions github-actions bot added bundler: rollup 🗞️ Issue is related to rollup bundler needs: triage 🏷 Issue needs to be checked and prioritized labels Feb 11, 2021
@betterRunner betterRunner mentioned this issue Feb 11, 2021
Closed
@denn1s
Copy link

denn1s commented Mar 25, 2021

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.

@mfpopa
Copy link

mfpopa commented May 23, 2021 •
edited
Loading

Prepeding a forward slash to the filename fixes the problem with Vite:

linaria/packages/rollup/src/index.ts

Line 52 in 20e1ba5

const filename = `${id.replace(/\.js$/, '')}_${slug}.css`;

Namely it should be like below for the plugin to work.

const filename = `/${id.replace(/\.js$/, '')}_${slug}.css`;

@tyankatsu0105
Copy link

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()],
});

@tyankatsu0105
Copy link

Sorry. Not release yet.

@mgcrea
Copy link

mgcrea commented Jan 13, 2022 •
edited
Loading

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?

@Platane
Copy link
Contributor

Platane commented Apr 21, 2022

@mgcrea same issue for me.

I fixed it by excluding .html files

plugins: [
    linaria({
        exclude: ["**/*.html"],
    }),
]

@glekner
Copy link

glekner commented Jul 29, 2022

@Platane can you share a working repository with Vite & Linaria? Thank yuou

@Anber
Copy link
Collaborator

Anber commented Jul 29, 2022 •
edited
Loading

@glekner you can find an example in examples/vite

@cojoclaudiu
Copy link

cojoclaudiu commented Sep 6, 2022 •
edited
Loading

@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.

@blazzy
Copy link

blazzy commented Oct 9, 2022

@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.

@cojoclaudiu
Copy link

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.

@betterRunner
Copy link
Author

betterRunner commented Oct 21, 2022 •
edited
Loading

@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.

@betterRunner betterRunner reopened this Oct 21, 2022
@github-actions github-actions bot removed the needs: triage 🏷 Issue needs to be checked and prioritized label Oct 21, 2022
@Anber
Copy link
Collaborator

Anber commented Oct 21, 2022

@betterRunner it should work now. Could you please check?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bundler: rollup 🗞️ Issue is related to rollup bundler feature: proposal 💬 New feature proposal that needs to be discussed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@mgcrea @Anber @blazzy @denn1s @mfpopa @Platane @betterRunner @glekner @tyankatsu0105 @cojoclaudiu