CODEWITHSUNDEEP
javascriptreactjsnext.js
Vinnie James
Vinnie James

Reputation: 6052

Compiling legacy components in Next.js (Can't resolve 'react/jsx-dev-runtime', Global CSS cannot be imported)

I've just spun up a new Next.js project (React v 17.0.1). I am attempting to compile and import components from a legacy project. Seeing a few errors getting things to work:

  1. Module not found: Can't resolve 'react/jsx-dev-runtime'. I have a hunch this may have something to do with the new JSX compiler in React 17.
    • This can be resolved by adding /** @jsxRuntime classic */ to the top of the file, but i'd prefer to just turn on the classic compiler. Is this possible?
  2. Global CSS cannot be imported from files other than your Custom <App>
    • This can be resolved by using modules, or importing in pages/_app. However, i'd like to turn this safety feature off, leaving the legacy components as is.

Questions:

  1. How can I force Next.js to use the classic JSX compiler instead of the new automatic one
  2. How do I turn off the safety "feature" forcing CSS to only be imported to _app?

Upvotes: 2

Views: 6396

Answers (1)

Vinnie James
Vinnie James

Reputation: 6052

This was solved by downgrading the React dependency to 16 in package.json

Upvotes: 1

Related Questions