Next.js: Module parse failed: Unexpected token (2:4) 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

[rafaelalmeidatk]

Please follow the issue template, and if possible provide a repo that reproduces the problem. This speeds up things a lot 🙏

[kylerRenneker]

I guess one of the things I forgot to mention in the "issue template" was that you should follow the same exact instructions I followed on the Next.js steps for getting started.

I will attach a link to a repo.

https://github.com/kylerRenneker/hello-next

[kylerRenneker]

The above repo is the exact code that is resulting in the mentioned error.

I do not have any problem running any other (non-nextjs) node apps locally.

[timneutkens]

I'm assuming you have a .babelrc somewhere up the directory tree that causes the code to be compiled incorrectly.

[rafaelalmeidatk]

@kylerRenneker you don't need a .babelrc in your project, right. But he means that perhaps you have a .babelrc file up in your directory tree, maybe at D:\webDev\shopifyApps or D:\webDev\ and so on, that is being utilized and is compiling the project incorrectly.
I am running your example and it is working fine.

[timneutkens]

@kylerRenneker can you provide the full output from booting up Next.js to the error? I'm quite certain you have a .babelrc up the directory tree this means it's not in the directory that you're booting up Next.js in but actually in one of the directories above that. The cli output will show you something along the lines of "Using custom .babelrc <location>" 👍

[kylerRenneker]

@rafaelalmeidatk @timneutkens
You all must be right...I ran create-next-app just directly on my desktop, cd into the folder, and ran npm run dev and it worked.

I guess Ill will have to dig around for that .bablrc file unless yall know of another solution??

Is there a way to prevent next.js app from looking for that file?

[kylerRenneker]

Well, I wish I had more to add than this...but it spontaneously started working.

I deleted the old project folder and started from scratch following the same steps as before and now the project is running.

[Lwdthe1]

This happened to me because I was importing shared JSX code from outside of my nextjs app's directory from elsewhere in my mono repo. This was my solution: https://github.com/zeit/next.js/issues/706#issuecomment-569041997

[vongomben]

Excuse me.
I'm following the same guide, and came into the same problem.
I don't understand how I can overcame this problem, what is the answer to this problem?
I repeated everything but the problem repeated.

[itsemirhanengin]

I'm getting this error, too. I'm trying to set up npx create-next-app but i always see this error. How can i fix this?

[FBosler]

@kylerRenneker can you provide the full output from booting up Next.js to the error? I'm quite certain you have a .babelrc up the directory tree this means it's not in the directory that you're booting up Next.js in but actually in one of the directories above that. The cli output will show you something along the lines of "Using custom .babelrc <location>" 👍

@timneutkens I came across the same error just recently. I am in the process of migrating the creat-react-app part of my current cra/express.js setup. How do I solve this?

[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ error ] ./data/icons/amazon.png 1:0
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
(Source code omitted for this binary file)
Error: Cannot find module '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/.next/server/static/development/pages/_document'
Require stack:
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/load-components.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/api-utils.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/server/next.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/server/lib/start-server.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/cli/next-dev.js
- /Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:952:15)
    at Function.Module._load (internal/modules/cjs/loader.js:835:27)
    at Module.require (internal/modules/cjs/loader.js:1012:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.loadComponents (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/load-components.js:24:25)
    at DevServer.findPageComponents (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:555:60)
    at DevServer.renderErrorToHTML (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:852:33)
    at DevServer.renderErrorToHTML (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/server/next-dev-server.js:19:915)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async DevServer.render (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:540:22)
    at async Object.fn (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:390:17)
    at async Router.execute (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/router.js:134:32)
    at async DevServer.run (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:505:29)
    at async DevServer.handleRequest (/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js:149:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/server/next.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/server/lib/start-server.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/cli/next-dev.js',
    '/Users/<NAME>/Projects/<PROJECTNAME>/next-ssg/node_modules/next/dist/bin/next'
  ]
}

Doesn't say anything about a babel.rc file though. Just for completeness sake, I actually do have a _document.js file

[SpicyPete]

Also seeing this issue on my windows computer, but not on any of my Mac's 🤔

[SpicyPete]

Am able to get around this by creating the next app directly on my desktop. But no idea why it doesn't work in the standard My Documents/Github/[project] location.
I have looked everywhere and didn't find a random .babelrc file anywhere. Very odd, but for now, can continue working, with my NextJS projects located in a different place than all my other projects, tad annoying.

[ackvf]

In my case it is failing with the same error because I run the project from C:\repos\projectname, but C:\repos is a directory junction to C:\Users\Qwerty\repos. When I run npm run dev from the original directory, it worked.

This is rather a pain, but at least it works.

[SpicyPete]

Related to the above comment.
By default Windows put my Github projects in
/My Documents/Github/project-name

To get around this error, I needed to instead navigate to
/documents/github/project-name
and everything worked.

[ackvf]

Oh my god 🤦‍♂️ Thanks past myself. You helped me again!