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•2w ago

Can you send your app/page.tsx file

dD0KOP•2w 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•2w ago

Can you sure the newbutton file too

dD0KOP•2w 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•2w ago

i assume you're using nextjs?

dD0KOP•2w ago

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

tperm•2w 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•2w ago

my friend I couldn't tell you what webpack is

tperm•2w ago

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

dD0KOP•2w ago

how can I check the config

tperm•2w 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•2w ago

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

tperm•2w ago

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

Solution

tperm•2w ago

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

dD0KOP•2w ago

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

tperm•2w ago

classic

Gaming

Programming

Help with webpack error

Did you find this page helpful?