Global css

[nedkrs]

Installed this package with npm install next-tweet and got error in my project when compiling: error - ./node_modules/next-tweet/dist/theme.css Global CSS cannot be imported from within node_modules. Thought I could just use my server to get tweet data and use EmbeddedTweet to display it.

[lfades]

Can you provide more details like the Next.js version. A reproduction would be great

[lleewwiiss]

I get the same error when trying to use getTweet server side in a trpc query, and EmbeddedTweet on the client, "next-tweet": "^0.7.2" & "next": "^13.2.1" using pages.

Server Error
ModuleError: Module Error (from ./node_modules/next/dist/build/webpack/loaders/error-loader.js):
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/next-tweet/dist/tweet-container.js

[lfades]

Can you create a minimal reproduction that I can take a look at? 🙏

[nedkrs]

Project was using Next.js version 12 so I upgraded it to 13.2.3. But we are not using experimental app dir or mdx. I was just wondering if I could use EmbeddedTweet component to display tweet provided I get parsed tweet data from Syndication endpoint on my server. Maybe I need to add more things to incorporate next-tweet into existing app.

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/next-tweet/dist/tweet-container.js

Import trace for requested module:
./node_modules/next-tweet/dist/theme.css
./node_modules/next-tweet/dist/tweet-container.js
./node_modules/next-tweet/dist/embedded-tweet.js
./node_modules/next-tweet/dist/index.js
./src/components/everyfeed/UGCPost/UGCPost.tsx
./src/components/metaverses/SingleMetaverse/RenderContentType.tsx
./src/components/everyfeed/Everyfeed.tsx
wait  - compiling /_error (client and server)...
error - ./node_modules/next-tweet/dist/theme.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/next-tweet/dist/tweet-container.js

[nedkrs]

Update, I got it working by adding app experimental feature in next config and adding app directory. But I dont see a reason for this. Couldnt css imports be handled so they work without app dir ?

[lfades]

According to that error you were using NextTweet. Did you follow the docs on how to use it for the pages directory?

[lleewwiiss]

I don’t use that setup, I have a similar tweet page component but in that component I call a trpc endpoint to get the tweet rather than using static props, is this scenario not possible? I do this because my tweets are dynamic and I render a lot of them

[nedkrs]

Check this thread, last 2 comments (https://github.com/vercel/next.js/issues/19936) The problem is the way css imports are being used inside next-tweet package and next js doesnt allow that. From what I understand css imports shouldn't be published like this to npm package. This is allowed in the experimental app feature and that why it works after I added that but this should be done so that it doesnt depend on experimental app feature. Anyway this is a great package, it was really needed but this is something that should be fixed.

[lfades]

CSS Modules are allowed in the way they're currently being used. That's how they work for Next.js, Remix, CRA, Vite, and likely more. I don't think the issue is CSS Modules 🤔

I can help you figure out the issue if you provide a reproduction for me to take a look at 🙏

[nedkrs]

For reproduction: npx create-next-app@latest --typescript

Need to install the following packages:
create-next-app@13.2.4
Ok to proceed? (y) y
✔ What is your project named? … next-tweet
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
? Would you like to use experimental `app/` directory with this project? › No / ✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in ...

Using npm.

Initializing project with template: default 

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

added 270 packages, and audited 271 packages in 15s

100 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-tweet atnext-tweet-reproduction/next-tweet

npm install
npm install next-tweet

next config

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

module.exports = nextConfig

package.json

{
  "name": "next-tweet",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "next-tweet": "^0.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  }
}

go to src/pages/index.tsx of new project import EmbeddedTweet using import { EmbeddedTweet } from 'next-tweet' and use it anywhere in index file start app with npm run dev

error

error - ./node_modules/next-tweet/dist/theme.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/next-tweet/dist/tweet-container.js

Import trace for requested module:
./node_modules/next-tweet/dist/theme.css
./node_modules/next-tweet/dist/tweet-container.js
./node_modules/next-tweet/dist/embedded-tweet.js
./node_modules/next-tweet/dist/index.js
wait  - compiling /_error (client and server)...
error - ./node_modules/next-tweet/dist/theme.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/next-tweet/dist/tweet-container.js

Import trace for requested module:
./node_modules/next-tweet/dist/theme.css
./node_modules/next-tweet/dist/tweet-container.js
./node_modules/next-tweet/dist/embedded-tweet.js
./node_modules/next-tweet/dist/index.js

[tusheer]

From my perspective, utilizing css-in-js can help address these types of issues. It can also simplify theme management for library users by using props

[nedkrs]

@lfades Any luck reproducing this ?

[lfades]

Reproduced. I'll update the docs to mention the fixes for this, one of:

• Enable the app router and use have something in the app directory
• Add transpilePackages: ['react-tweet'] to next.config.js

The issue is because Next.js does not try to process CSS files from node_modules unless you're using the app directory. Otherwise transpilePackages also works.