search

callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.47k stars 414 forks source link

How to use with NextJS + typescript? #795

Open MaxmaxmaximusAWS opened 3 years ago

MaxmaxmaximusAWS commented 3 years ago

How to use with NextJS + typescript?

hyoretsu commented 3 years ago

In the meantime, install these:

yarn add @linaria/core @linaria/react
yarn add -D @linaria/babel-preset @linaria/shaker @linaria/webpack-loader next-linaria@1.0.0-beta

Note: you have to install the beta for next-linaria, otherwise you'll need to install the linaria package (kinda old version) instead of those 5 and do a slightly different setup. Then add this to your babel config: presets: ['@linaria'] and wrap your next.config.js options with the default export from next-linaria withLinaria()

A more hands-on example from a package of mine: https://github.com/hyoretsu/aufklarung-site

Gabriel-Alves-Cunha commented 2 years ago

Hey, @hyoretsu, how did you solve the issue of Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!? Or did you not get it at all?

hyoretsu commented 2 years ago

Hey, @hyoretsu, how did you solve the issue of Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!? Or did you not get it at all?

I didn't encounter that issue actually, maybe because of my previous setup. (working repo's in the comment above)

Gabriel-Alves-Cunha commented 2 years ago

Hey, @hyoretsu, how did you solve the issue of Error: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!? Or did you not get it at all?

I didn't encounter that issue actually, maybe because of my previous setup. (working repo's in the comment above)

Hmm, I see. Thanks for responding. Guess I'm gonna have to wait for them to have a nextJS example 😗

Anber commented 2 years ago

Hi @Gabriel-Alves-Cunha

I think, your problem is related to https://github.com/callstack/linaria/issues/845