Help with webpack error

Hello! Could anyone that gets nextjs help me understand this error I get when running npm run build:

Failed to compile.

./app/page.tsx + 1 modules
Unexpected end of JSON input


> Build failed because of webpack errors
error: script "build" exited with code 1

Failed to compile.

./app/page.tsx + 1 modules
Unexpected end of JSON input


> Build failed because of webpack errors
error: script "build" exited with code 1

It only happens when I try to link a component from my /app/components directory into my page.tsx. npm run dev works fine with no errors, and deploying on vercel also works fine, it's just building locally that's the issue.

Solution:

i'd try creating a new app and seeing if the issue persists

Jump to solution

16 Replies

tperm•2mo ago

Can you send your app/page.tsx file

dD0KOP•2mo ago

here you are!

import About from "./components/NewButton";

export default function Home() {
  return (
    <div className="test-container">
          <About />
    </div>
  );
}

import About from "./components/NewButton";

export default function Home() {
  return (
    <div className="test-container">
          <About />
    </div>
  );
}

tperm•2mo ago

Can you sure the newbutton file too

dD0KOP•2mo ago

const About = function() {
  return (
    <div>
      <h1 className="container-headers">Some title</h1>
      <p>
        Some text
      </p>
    </div>
  )
}

export default About;

const About = function() {
  return (
    <div>
      <h1 className="container-headers">Some title</h1>
      <p>
        Some text
      </p>
    </div>
  )
}

export default About;

tperm•2mo ago

i assume you're using nextjs?

dD0KOP•2mo ago

uh yeah I've used react on a work system before and didn't have this problem

tperm•2mo ago

i built a new next app with your code and it seems to build fine for me did you define your own webpack config or something

dD0KOP•2mo ago

my friend I couldn't tell you what webpack is

tperm•2mo ago

nextjs uses turbopack to build for dev and webpack for prod so might be that

dD0KOP•2mo ago

how can I check the config

tperm•2mo ago

if this is all your code can you try making a new next app with npx create-next-app and see if that builds there's usually a webpack.config.js

dD0KOP•2mo ago

huh I can't find it in my project's directory

tperm•2mo ago

yeah leave it then, something's wrong with your dependencies most probably

Solution

tperm•2mo ago

i'd try creating a new app and seeing if the issue persists

dD0KOP•2mo ago

ok sounds good yeah nuking the project and doing it again fixed it thank you

tperm•2mo ago

classic

Gaming

Programming

Help with webpack error

Did you find this page helpful?