Next.js Discord

Discord Forum

CSS loader issue when migrating from pages to app

Answered
Pyramid ant posted this in #help-forum
Open in Discord
Pyramid antOP
I am busy trying to migrate from the pages to app directory following the guide: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app

I have followed the guide as best I could and am trying to get a simple page to load at based path '/'.

Here is what my basic app/layout.tsx file looks like:

import { Metadata } from 'next'
import 'ui/global.css'
import '@fortawesome/fontawesome-svg-core/styles.css'

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}


and the super simple /app/page.js
import React from 'react'

const Home = () => (
  <div className="flex min-h-screen flex-col items-center justify-center py-2">
    Hello
  </div>
)

export default Home


I have also update my tailwind.config.js with the appropriate path:
'./app/**/*.{js,ts,jsx,tsx,mdx}'

The starting next makes these updates:
The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

    - include was updated to add '.next/types/**/*.ts'
    - plugins was updated to add { name: 'next' }
    - strictNullChecks was set to true


Then going to localhost:3000 I get these errors:

see comments as post was too long to include

Note that this app is setup in a turbo repo
Answered by Pyramid ant
Just to close the thread, I tried joulevs idea but to no avail, still got the same issue when moving the global.ui file to my next app.
So created a issue on the next repo:
https://github.com/vercel/next.js/issues/52021
View full answer

12 Replies

Pyramid antOP
error messages:

../../packages/ui/global.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;


../../node_modules/@fortawesome/fontawesome-svg-core/styles.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> :root, :host {
|   --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
|   --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
@Pyramid ant I am busy trying to migrate from the pages to app directory following the guide: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app I have followed the guide as best I could and am trying to get a simple page to load at based path '/'. Here is what my basic `app/layout.tsx` file looks like: js import { Metadata } from 'next' import 'ui/global.css' import '@fortawesome/fontawesome-svg-core/styles.css' export const metadata: Metadata = { title: 'Home', description: 'Welcome to Next.js', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) } and the super simple `/app/page.js` js import React from 'react' const Home = () => ( <div className="flex min-h-screen flex-col items-center justify-center py-2"> Hello </div> ) export default Home I have also update my `tailwind.config.js` with the appropriate path: `'./app/**/*.{js,ts,jsx,tsx,mdx}'` The starting next makes these updates: The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs: - include was updated to add '.next/types/**/*.ts' - plugins was updated to add { name: 'next' } - strictNullChecks was set to true Then going to `localhost:3000` I get these errors: **see comments as post was too long to include** Note that this app is setup in a turbo repo
joulev
you need to also add postcss and autoprefixer as your dependencies, and add a postcss.config.js file
@joulev you need to also add `postcss` and `autoprefixer` as your dependencies, and add a `postcss.config.js` file
Pyramid antOP
Both are installed and postcss.config.js is setup. Note that this all works fine using the page directory, which seems odd.

postcss.config.js is as follows:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
joulev
then idk, sorry, looks like a nextjs appdir bug
report an issue maybe
in the meantime remove the tailwind directives in the ui/global.css file
and make a global.css file in the nextjs app, with all the tailwind directives, and import ui/global.css to that new global.css
@joulev and make a global.css file in the nextjs app, with all the tailwind directives, and import ui/global.css to that new global.css
Pyramid antOP
Thanks for the feedback!

Just curious what the purpose of doing this would be?
@Pyramid ant Thanks for the feedback! Just curious what the purpose of doing this would be?
joulev
i suspect that nextjs does configure postcss to run against css files in the same next.js project, but doesnt run postcss on css files imported from dependencies (ui in this case)
so you have to move the tailwind directives (invalid css but will be parsed by postcss) to inside the nextjs folder
Pyramid antOP
Just to close the thread, I tried joulevs idea but to no avail, still got the same issue when moving the global.ui file to my next app.
So created a issue on the next repo:
https://github.com/vercel/next.js/issues/52021
Answer