Не удается импортировать Recoil в приложение nextjs с помощью tsx — получение ReferenceError

Я изучаю nextjs и пытаюсь добавить Recoil для управления состоянием. Мое приложение nextjs использует tsx. Я понятия не имею, как решить эту проблему, и все предложения/помощь будут очень признательны.

Пожалуйста, дайте мне знать, если мне нужно предоставить какие-либо дополнительные сведения.

Я приложил ошибку, файл tsconfig, а также файл package.json моего приложения.

Я получаю следующую ошибку при импорте отдачи:

ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///R:/Learnings/nextjs/insta2/node_modules/recoil/cjs/recoil.js:3:23
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
error - ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: exports is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'R:\Learnings\nextjs\insta2\node_modules\recoil\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///R:/Learnings/nextjs/insta2/node_modules/recoil/cjs/recoil.js:3:23
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  page: '/'
}

Вот мой файл tsconfig.json:

{
"compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Вот мой package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@faker-js/faker": "^6.3.1",
    "@heroicons/react": "^1.0.6",
    "@tailwindcss/forms": "^0.5.1",
    "firebase": "^9.8.0",
    "next": "latest",
    "next-auth": "^4.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "recoil": "^0.7.3-alpha.1",
    "tailwind-scrollbar-hide": "^1.1.7"
  },
  "devDependencies": {
    "@types/node": "17.0.4",
    "@types/react": "17.0.38",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.1",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.7",
    "typescript": "4.5.4"
  }
}

Заранее спасибо за помощь.