dlehmhus / next-with-linaria Goto Github PK

Great module. I like the code lots better than next-linaria. I want to install Linaria 6 on Next 12 (as a stepping stone to Next 13). When I installed this, all my pages 404'ed.

Now, I know this isn't a good bug report. I just wanted to put it on your radar and ask the question: any idea why?

And, of course, this could be user error. 🙋

When I add withLinaria to my next.config.ts, all files that use tsconfig paths start spitting out errors about modules not being found.

Can you think of any reason withLinaria would break the usage of tsconfig paths?

Reproduction: https://github.com/luizeboli/next-with-linaria-bug

Node: 18.16.0
NPM: 9.5.1
MacOS: Big Sur

When running npm run build I'm receiving a lot of errors related to node apis like Error: Can't resolve 'path' in '/test-linaria/node_modules/next/dist/server' (contrived path)

Doing some investigation I realized these errors only happens when I use either styled or css function in the root layout.tsx file

Got this webpack error when building project on windows. MacOS is ok though

error - C:UsersXxxYyyZzzcomponentsmasonrymasonry.linaria.module.css Module build failed: UnhandledSchemeError: Reading from "C:UsersXxxYyyZzzcomponentsmasonrymasonry.linaria.module.css" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "c:" URIs.

Paths are messed up for some reason.
Issue can be reproduced with StackBlitz example from readme.

We are using the @quotalab/color library for sharing color tokens, and this library uses exports. Below is the package.json for this library.

When we try to use it with next-with-linaria, an error occurs and you can check the issue link below.
https://stackblitz.com/edit/next-with-linaria-bp58at?file=package.json,app%2Fpage.tsx

{
  "name": "@quotalab/color",
  "description": "쿼타랩 내부에서 사용하는 컬러팔레트",
  "sideEffects": false,
  "version": "1.13.12",
  "keywords": [
    "quotalab",
    "color"
  ],
  "source": "./src/index.ts",
  "type": "module",
  "main": "./dist/index.min.js",
  "module": "./dist/index.min.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.min.js"
    },
    "./colors.css": "./dist/colors.css",
    "./package.json": "./package.json"
  },
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "lint": "eslint  --ext .ts,.tsx",
    "clean": "rimraf dist",
    "build": "yarn clean && nanobundle build",
    "typecheck": "tsc --noEmit --project tsconfig.lib.json",
    "update-colors": "node -r tsm scripts/fetch-and-build-assets.ts",
    "create-token": "node -r tsm scripts/create-token.ts"
  },
  "nx": {
    "targets": {
      "build": {
        "outputs": [
          "packages/token/color/dist"
        ],
        "dependsOn": [
          {
            "target": "build",
            "projects": "dependencies"
          }
        ]
      }
    }
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "@types/react": "^17.0.13",
    "cross-env": "^5.2.0",
    "nanobundle": "^1.2.2",
    "node-fetch": "^3.3.0",
    "prettier": "^2.3.2",
    "rimraf": "^2.6.2",
    "tslib": "^2.3.0",
    "tsm": "^2.3.0",
    "typescript": "^4.3.5"
  }
}

Hi, great library. Is there a deployed preview/demo of the solution somewhere?

Thanks and all best 🚀

Hello!

I tried to setup contentLayer and linaria together for a project, but I can't use the plugin with contentLayer without getting this error:

I simply used the default contentLayer project : https://github.com/contentlayerdev/next-contentlayer-example, and added linaria to the config:

const {withContentlayer} = require('next-contentlayer');
const withLinaria = require('next-with-linaria');
const withPlugins = require('next-compose-plugins');

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        appDir: true,
    },
};

module.exports = withPlugins([withContentlayer, withLinaria], nextConfig);

export default withLinaria({
  cacheDirectory: "./.next/cache/linaria",

  experimental: {
    externalDir: true,
  },
})

 ⚠ Invalid next.config.js options detected:
 ⚠     Unrecognized key(s) in object: 'cacheDirectory'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config

Better is to separate the plugin-specific config from the Next.js config, like so:

export default withLinaria({ cacheDirectory: "./.next/cache/linaria" })({
  experimental: {
    externalDir: true,
  },
})

That also makes it possible to combine multiple plugins with the help of next-compose-plugins:

import withPlugins from "next-compose-plugins";

export default withPlugins([
  withLinaria({ cacheDirectory: "./.next/cache/linaria" }),
  withMdx(),
  withNx(),
], {
  experimental: {
    externalDir: true,
  },
})

I am using the next config set up in the next-with-linaria instructions for Next 13 but the css is not being loaded before the page is being rendered. This results in a flash of chaos on the page for a split second on initial load.

Is there something I can do in the config to fix this ?

Thanks for all advice.

Hi! I have problems when run npm run build

Missing class properties transform. Maybe problem fix with add options in babel config https://github.com/dlehmhus/next-with-linaria/blob/main/src/webpackConfig.ts#L105 add ['@babel/preset-react', { runtime: 'automatic' }] ?

I am using using Subj. for a few mounts now. Tailwind provides theme and utility classes while Linaria is used to define components and compose Tailwind design tokens and classes.

In nextjs next-with-linaria does a great job bringing hot reloads to Linaria components!

Recently I started looking into nextjs app directory for server-side components and discovered that my "Tailwind with Linaria" settings no longer works when changing from pages router to app.

I have setup couple of repositories to demonstrate the case:
https://github.com/ramblehead/nextjs-tw-linaria
https://github.com/ramblehead/nextjs-app-tw-linaria

When running yarn dev, nextjs-tw-linaria works as expected:

1. Remove backgroundImage from tailwind.config.ts config.
2. Change body.background in src/styles/globals.css.
3. Change background-color in src/components/view/linaria-button.ts.

All above changes are reflected via hot reload as expected.

When running yarn dev, nextjs-app-tw-linaria hot reload only works with Linaria components:

1. Change background-color in src/components/view/linaria-button.ts

Changes to globals.cssand Tailwind are no longer hot-reloaded.

Some initial investigations

I have narrowed down the cache conflict to the following line in next-with-linaria:

Commenting-out above setData() call resolves the issue with Tailwind and global.css hot reloading. However, Linaria components are no longer cached causing full reload on every change.

It looks like adding any linaria-produced css module to backendOrStorage._data prevents any further cache updates for all other css modules...

At this point I am running out of my understanding of Webpack "virtual file system" to debug it any further...

After updating Next to v13.4.9 I'm getting a "Cannot find module 'webpack'" error in dev mode

Error: Cannot find module 'webpack'
Require stack:
- <projectPath>/node_modules/next-with-linaria/lib/plugins/errorPlugin.js
- <projectPath>/node_modules/next-with-linaria/lib/webpackConfig.js
- <projectPath>/next.config.js

I tried to investigate if webpack was a peer dependency of both packages but its not, it's a dev dependency for both packages.

Next v13.4.8 works fine.

Hey, thank you for the beautiful solution and unblocking my Next13 experiments.

So far I've noticed only one "big" problem (the other one is something about linaria vs webpack cache) related to global css and the expectations for css modules - aka "pure selectors"

Long story short - you have undocumented file pattern enabling non-pure selectors and the pattern is not really "sound" - I can imagine a file named css-reset.global.ts, but not css-reset.linaria.global.ts

Wondering if pattern can be changed a little bit and the solution documented.