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 #9209

kylerRenneker · 2019-10-27T01:30:07Z

Bug report

I have been following the exact steps for starting a Next.js app here: https://nextjs.org/learn/basics/getting-started/setup

I also followed the steps for starting a next.js app on Shopify (I want to develop an app there).

I have worked heavily with react but never with next. When I go running the npm run dev command I keep getting the following error:

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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ error ] D:/webDev/shopifyApps/hello-next/pages/index.js 2:4
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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
ModuleParseError: 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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
    at handleParseError (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:461:19)
    at doBuild.err (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:495:5)
    at runLoaders (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:354:12)
    at D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at process.nextTick (D:\webDev\shopifyApps\hello-next\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15)
    at processTicksAndRejections (internal/process/next_tick.js:74:9)
[ event ] client pings, but there's no entry for page: /_error
[ event ] disposing inactive page(s): /, /next/dist/pages/_error

The text was updated successfully, but these errors were encountered:

rafaelalmeidatk · 2019-10-27T04:31:12Z

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

kylerRenneker · 2019-10-27T04:44:39Z

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 · 2019-10-27T04:46:06Z

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 · 2019-10-27T10:46:51Z

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

kylerRenneker · 2019-10-27T15:26:26Z

I just looked at the documentation and the typical Next.js project will not have a .babelrc file by default but one can be added.

Something to note is I even tried the create-next-app method as well as the manual method and I am still getting the same error when navigating to my local server.

I should mention that before I go to http://localhost:3000 in my browser the develop server appears to start fine:

[ info ]  waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000

But as soon as I navigate to the server url in the browser I am met with the same error on each attempt:

[ wait ]  compiling ...
[ error ] D:/webDev/shopifyApps/hello-next/pages/index.js 2:4
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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ error ] D:/webDev/shopifyApps/hello-next/pages/index.js 2:4
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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
ModuleParseError: 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
| const Index = () => (
>     <div>
|         <p>Hello Next.js</p>
|     </div>
    at handleParseError (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:461:19)
    at doBuild.err (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:495:5)
    at runLoaders (D:\webDev\shopifyApps\hello-next\node_modules\webpack\lib\NormalModule.js:354:12)
    at D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at D:\webDev\shopifyApps\hello-next\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at process.nextTick (D:\webDev\shopifyApps\hello-next\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15)
    at processTicksAndRejections (internal/process/next_tick.js:74:9)
[ event ] client pings, but there's no entry for page: /_error

rafaelalmeidatk · 2019-10-27T21:38:35Z

@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 · 2019-10-27T21:40:05Z

@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 · 2019-10-28T04:37:07Z

@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 · 2019-10-28T04:59:30Z

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 · 2019-12-26T11:51:35Z

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: #706 (comment)

vongomben · 2020-02-04T15:43:17Z

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 · 2020-02-18T17:06:14Z

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 · 2020-05-13T17:20:05Z

@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 · 2020-05-19T05:39:03Z

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

SpicyPete · 2020-05-19T14:23:04Z

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 · 2020-06-05T15:27:26Z

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 · 2020-10-04T04:19:45Z

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 · 2020-10-11T16:24:00Z

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

retsi101 · 2020-12-10T17:57:48Z

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.

This solves the problem for me.

Thanks @ackvf.

cliffordfajardo · 2021-04-10T23:06:16Z

NextJS introduced an experimental option to allow imports from outside the project directory. I tried it out in our mono repo and was able to get it to work

Experimental feature for allowing importing Typescript files outside of the root directory #22867

thangnm93 · 2021-05-17T03:05:27Z

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.

Yeah, it works for me, thank you so much

albcunha · 2022-01-15T00:15:38Z

I had a similar situation. The folder where the nextjs project was installed is a symlink for another drive. It wont work, but if I run npm run dev on the original folder(and drive), it works perfectly. What ackvf told worked.

balazsorban44 · 2022-02-14T12:05:19Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

kylerRenneker closed this as completed Oct 28, 2019

vercel locked as resolved and limited conversation to collaborators Feb 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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 #9209

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 #9209

kylerRenneker commented Oct 27, 2019 •

edited

Loading

rafaelalmeidatk commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019 •

edited

Loading

timneutkens commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019 •

edited

Loading

rafaelalmeidatk commented Oct 27, 2019

timneutkens commented Oct 27, 2019

kylerRenneker commented Oct 28, 2019 •

edited

Loading

kylerRenneker commented Oct 28, 2019

Lwdthe1 commented Dec 26, 2019

vongomben commented Feb 4, 2020

itsemirhanengin commented Feb 18, 2020

FBosler commented May 13, 2020 •

edited

Loading

SpicyPete commented May 19, 2020

SpicyPete commented May 19, 2020

ackvf commented Jun 5, 2020

SpicyPete commented Oct 4, 2020

ackvf commented Oct 11, 2020 •

edited

Loading

retsi101 commented Dec 10, 2020

cliffordfajardo commented Apr 10, 2021

thangnm93 commented May 17, 2021

albcunha commented Jan 15, 2022 •

edited

Loading

balazsorban44 commented Feb 14, 2022

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 #9209

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 #9209

Comments

kylerRenneker commented Oct 27, 2019 • edited Loading

Bug report

rafaelalmeidatk commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019 • edited Loading

timneutkens commented Oct 27, 2019

kylerRenneker commented Oct 27, 2019 • edited Loading

rafaelalmeidatk commented Oct 27, 2019

timneutkens commented Oct 27, 2019

kylerRenneker commented Oct 28, 2019 • edited Loading

kylerRenneker commented Oct 28, 2019

Lwdthe1 commented Dec 26, 2019

vongomben commented Feb 4, 2020

itsemirhanengin commented Feb 18, 2020

FBosler commented May 13, 2020 • edited Loading

SpicyPete commented May 19, 2020

SpicyPete commented May 19, 2020

ackvf commented Jun 5, 2020

SpicyPete commented Oct 4, 2020

ackvf commented Oct 11, 2020 • edited Loading

retsi101 commented Dec 10, 2020

cliffordfajardo commented Apr 10, 2021

thangnm93 commented May 17, 2021

albcunha commented Jan 15, 2022 • edited Loading

balazsorban44 commented Feb 14, 2022

kylerRenneker commented Oct 27, 2019 •

edited

Loading

kylerRenneker commented Oct 27, 2019 •

edited

Loading

kylerRenneker commented Oct 27, 2019 •

edited

Loading

kylerRenneker commented Oct 28, 2019 •

edited

Loading

FBosler commented May 13, 2020 •

edited

Loading

ackvf commented Oct 11, 2020 •

edited

Loading

albcunha commented Jan 15, 2022 •

edited

Loading