Getting Global CSS cannot be imported from within node_modules error

[april-ctrlspire]

Hi. I'm using a fresh NextJS 13.2.1 with Tailwind and integrated the Sanity Studio V3 in /pages directory. They're working fine. I installed this plugin but it's getting Global CSS cannot be imported from within node_modules error.

sanity.config.ts:

import { deskTool } from 'sanity/desk';
import { visionTool } from '@sanity/vision';
import { codeInput } from '@sanity/code-input';
import { latexInput } from 'sanity-plugin-latex-input';

import { schemaTypes } from '@/schemas/index';

export const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!;
export const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!;

export default defineConfig({
  basePath: '/studio',
  projectId,
  dataset,

  plugins: [deskTool(), visionTool(), codeInput(), latexInput()],

  schema: {
    types: schemaTypes,
  },
});

[april-ctrlspire]

Hello, any updates?

[MohanadOO]

I'm using NextJS as well and I'm facing the same issue here.

is there any workaround to make it work?

This is the suggested solution provided by NextJS:

[filipesmedeiros]

Hey! You can use my fork: https://github.com/filipesmedeiros/latex-input

The only thing it does is fix this issue. It removes the CSS import from the component itself. Then you have to import it yourself at the app level (e.g. _app.tsx or layout.tsx)

EDIT: I accidentally deleted it lol sorry for the broken link

[himetsai]

Hey @filipesmedeiros, could you elaborate on how you removed the CSS import from the component itself? In particular, what do you mean by component?