#Module parse failed : unexpected token (1:0)

3 messages · Page 1 of 1 (latest)

echo cipher
#

Hi, I have an error while following the NextJS learn on Chapter 15 : Adding Authentication.

Error on UI :

./node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html
Module parse failed: Unexpected token (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
> <!doctype html>
| <html>
| <head>

Error on console :

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./auth.ts
./action.ts
./app/ui/login-form.tsx

Is it maybe because I have no WSL Installed?

My Device :
OS : Win 11,
Memory : 16gb,
Node version : 18.17
This error appear after I have complete all guides on Chapter 15, and want to test the authentication by my self.

chilly archBOT
#

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

echo cipher
#

I found the root cause:

This is because I create a new file action.ts on my root directory.
I have missunderstanding the guides here : https://nextjs.org/learn/dashboard-app/adding-authentication#updating-the-login-form.

I thought that are a new file inside the routes cause the file name written as /action.ts not /app/lib/action.ts.

The solution :
Write the authenticate() function on /app/lib/action.ts and it will solve the error.

Add authentication to protect your dashboard routes using NextAuth.js, Server Actions, and Middleware.