Error: Final loader didn't return a buffer or string

Answered

Collared Plover posted this in #help-forum

Collared PloverOP

2023-10-21T02:22:06.000Z

NOT SOLVED | HELP

Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String
    at processResult (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:398900)
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:400370
    at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8727
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5565)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5650)
    at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5879
    at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4185)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
    at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5426
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:399845
Import trace for requested module:
./styles/globals.css
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

Answered by riský

ahh this: https://canary.discord.com/channels/752553802359505017/1165124342347210832/1165125320828010536

View full answer

44 Replies

Collared PloverOP

2023-10-21T02:22:32.000Z

globals.css:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

* {
  box-sizing: border-box;
}

main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-family: Menlo, Monaco, Lucida Console, Courier New, monospace;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

i followed the nextuidocs what's wrong is it?
if i remove importing globals.css it won't return this error but every pages don't have styles as shown in image below

tailwind.config.js:

const { nextui } = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./pages/*.{html,js,ts,jsx,tsx}",
    "./pages/**/*.{html,js,ts,jsx,tsx}",
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

_app.js:

import "../styles/globals.css"
import {NextUIProvider} from '@nextui-org/react'

function Application({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default Application;

index.js:

import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Next.js Starter!</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Header title="Welcome to my app!" />
        <p className="description">
          Get started by editing <code>pages/index.js</code>
        </p>
      </main>

      <Footer />
    </div>
  )
}

Header:

import React from "react";

import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";

 import {logo} from "../public/icon.jsx";
export default function App() {

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

const menuItems = [

"Profile",

"Dashboard",

"Activity",

"Analytics",

"System",

"Deployments",

"My Settings",

"Team Settings",

"Help & Feedback",

"Log Out",

];

return (

<Navbar

isBordered

isMenuOpen={isMenuOpen}

onMenuOpenChange={setIsMenuOpen}

>

<NavbarContent className="sm:hidden" justify="start">

<NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />

</NavbarContent>

<NavbarContent className="sm:hidden pr-3" justify="center">

<NavbarBrand>

<logo />

<p className="font-bold text-inherit">ACME</p>

</NavbarBrand>

</NavbarContent>

<NavbarContent className="hidden sm:flex gap-4" justify="center">

<NavbarBrand>

<logo />

<p className="font-bold text-inherit">ACME</p>

</NavbarBrand>

<NavbarItem>

<Link color="foreground" href="#">

Features

</Link>

</NavbarItem>

<NavbarItem isActive>

<Link href="#" aria-current="page">

Customers

</Link>

</NavbarItem>

<NavbarItem>

<Link color="foreground" href="#">

Integrations

</Link>

</NavbarItem>

</NavbarContent>

<NavbarContent justify="end">

<NavbarItem className="hidden lg:flex">

<Link href="#">Login</Link>

</NavbarItem>

<NavbarItem>

<Button as={Link} color="warning" href="#" variant="flat">

Sign Up

</Button>

</NavbarItem>

</NavbarContent>

<NavbarMenu>

{menuItems.map((item, index) => (

<NavbarMenuItem key={`${item}-${index}`}>

<Link

className="w-full"

color={

index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"

}

href="#"

size="lg"

>

{item}

</Link>

</NavbarMenuItem>

))}

</NavbarMenu>

</Navbar>

);

}

packages:

  "dependencies": {
    "cypress": "^13.3.1",
    "next": "^13.5.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.3.3",
    "@nextui-org/react": "^2.1.13",
    "@heroicons/react/": "2.0.18",
    "framer-motion": "10.16.4",
    "react-use": "17.4.0"
  }