skip to Main Content

I have been staring at this code too long and I cannot figure out why I am getting an error that this is not a module.

File name: page.tsx

import Link from "next/link";
import SessionList from "./sessionList";

export default function Page() {

    return (
        <article>
            <div className="flex justify-between items-center mb-3">
                <h2 className="p-0 m-0">Session List</h2>
                <Link href="/sessions/edit" className="bg-rr-green px-3 py-1 rounded-lg text-white">Add New</Link>
            </div>
            <SessionList />
        </article>
    )
}

This is a NextJS project running Tailwind, Auth0 and MongoDB. I am using Auth0 for authentication and have no issues with that on a sister site. The only difference is that I am loading Auth0 in layout.tsx as a server component. I can run npm run dev and the application works fine. But when I try to build it, I get the following:

.next/types/app/sessions/edit/page.ts:2:24
Type error: File 'C:/Users/shane/workspaces/riverrail-admin/app/sessions/edit/page.tsx' is not a module.

  1 | // File: C:Usersshaneworkspacesriverrail-adminappsessionseditpage.tsx
> 2 | import * as entry from '../../../../../app/sessions/edit/page.js'
    |                        ^
  3 | import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
  4 |
  5 | type TEntry = typeof import('../../../../../app/sessions/edit/page.js')

What am I missing?

I have tried removing .next folder, removing all node modules and reinstalling with npm install. I do not see any errors this way.

Here is my package.json file:

{
  "name": "riverrail-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth0/nextjs-auth0": "^3.5.0",
    "@ckeditor/ckeditor5-alignment": "^41.3.1",
    "@ckeditor/ckeditor5-build-classic": "^41.3.1",
    "@ckeditor/ckeditor5-react": "^6.2.0",
    "@vercel/analytics": "^1.2.2",
    "html-react-parser": "^5.1.10",
    "mongodb": "^6.5.0",
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.1.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

2

Answers


  1. Chosen as BEST ANSWER

    Well it seems I have been at the keyboard too long already this week! I was looking at the wrong file and I was able to fix my problem by looking at the correct file - which oddly was blank so of course NOT a module.

    GrandSlambert's Pro Tip: LOOK AT THE RIGHT FILE!


  2. file is not a module error comes when type in package.json file is commonJs(default value) and you try to use modules using import statement instead of require method.
    So you need to change type in the package.json file to module only.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search