appleple / appleple/smartblock

Smartblocks is not compatible with Next.js

Open
#11 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
318
Forks
26
Avg merge
3m
Merged PRs (30d)
11

Description

Smartblocks i great, unfotunately I can't use it with Next,js, due to to css imports.

When it's included Nestjs gives the following error

./node_modules/prosemirror-tables/style/tables.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/smartblock/lib/extensions/default-plugins.js

The explanation under https://err.sh/next.js/css-npm is

Why This Error Occurred
One of your dependencies (node_modules) imports a CSS file.

This normally happens when a package's source files are accidentally consumed, instead of the built package.

Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

Importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

Should the file be consumed as Global CSS or CSS Modules?
If Global, in what order does the file need to be injected?
If Modules, what are the emitted class names? As-is, camel-case, snake case?
Etc...

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with node_modules/smartblock/lib/extensions/default-plugins.js and the referenced prosemirror-tables/style/tables.css import, then review the linked Next.js CSS error explanation. Reproduce the package in a Next.js application and trace how the published package is consumed. Done means Smartblocks can be included without Next.js rejecting a CSS import from node_modules.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.