Importing a custom plugin using Tailwind in a NextJS app prevents me from loading the plugin

[grumpyoldman-io]

Current Behavior

I've created a basic repo using nextjs preset. I've added Tailwind according to the recipe and now I want to add a custom Tailwind plugin. When I add said plugin (which I created using a js lib generator) Im confronted with the following error:

error - ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./pages/styles.css
Error: Cannot find module '@web/ui'
Require stack:
- /[REDACTED]/web/apps/main/tailwind.config.js
- /[REDACTED]/web/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
- /[REDACTED]/web/node_modules/tailwindcss/lib/index.js
- /[REDACTED]/web/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- /[REDACTED]/web/node_modules/next/dist/build/webpack/config/blocks/css/index.js
- /[REDACTED]/web/node_modules/next/dist/build/webpack/config/index.js
- /[REDACTED]/web/node_modules/next/dist/build/webpack-config.js
- /[REDACTED]/web/node_modules/next/dist/server/dev/hot-reloader.js
- /[REDACTED]/web/node_modules/next/dist/server/dev/next-dev-server.js
- /[REDACTED]/web/node_modules/next/dist/server/next.js
- /[REDACTED]/web/node_modules/@nrwl/next/src/executors/server/lib/custom-server.js
- /[REDACTED]/web/node_modules/@nrwl/next/src/executors/server/server.impl.js
- /[REDACTED]/web/node_modules/nx/src/config/workspaces.js
- /[REDACTED]/web/node_modules/nx/src/command-line/run.js
- /[REDACTED]/web/node_modules/nx/bin/run-executor.js

Expected Behavior

Im able to import my module without errors

Steps to Reproduce

1. npx create-nx-workspace@latest web based on next
2. add tailwind following the recipe here: https://nx.dev/recipes/other/using-tailwind-css-in-react
3. nx g lib ui --buildable=true --tags=ui,design-system,tailwind,plugin --appProject=main --component=false --publishable=true --importPath=@web/ui
4. add a custom plugin
5. connect the dots

A clean repo: https://github.com/grumpyoldman-io/web

Environment

Node : 18.12.0
   OS   : darwin arm64
   yarn : 1.22.19

   nx : 15.0.13
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.13
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.0.13
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.13
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.13
   @nrwl/js : 15.0.13
   @nrwl/linter : 15.0.13
   @nrwl/nest : Not Found
   @nrwl/next : 15.0.13
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.13
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.0.13
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.13
   @nrwl/web : 15.0.13
   @nrwl/webpack : 15.0.13
   @nrwl/workspace : 15.0.13
   typescript : 4.8.2
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

[grumpyoldman-io]

Update:

I've managed to fix this. Well, it wasn't really a bug in the first place. More of a weird expectation from my end coming from Lerna.

I made the following assumptions:

1. NX will automatically link the lib (create a @web/ui symlink in node_modules)
2. NX will automatically link the compiled assets over the source assets

Both were incorrect and this is how I dealt with them:

1. First I made the app dependOn a build
2. I made sure the compiled plugin generated cjs files
3. Used a relative path to import the plugin from the dist folder

This got me to a stage where the plugin was correctly feeding information to my app, but this did not give me a nice developer experience as I now need to build the plugin and reload the app on each change. I worked around this with the following steps:

1. add a "serve" step to the project.json in the plugin that includes a watcher
2. replaced the default behaviour of start with a dev command that start both serve processes. (yarn dev)
3. in the serve step of the plugin I made sure as little files as possible are changed when changes happen

The result is a fully working dev environment (incl HMR) with NextJS + Tailwind + custom tailwind plugin.

I've updated the repo accordingly and you can see the state here: https://github.com/grumpyoldman-io/web/tree/70135a9a66af2d345710ddd8ff20aa733c98eaec

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.