Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Import broken for version 0.7.3-alpha.1 for NextJs app using tsx

See original GitHub issue

Getting the following error when importing recoil with the latest version. Works fine with version 0.7.2.

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: '/'
}

Here is my 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"]
}

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

danlupascucommented, May 9, 2022

@mondaychen yes, it fixes the issue

0reactions

mondaychencommented, May 9, 2022

Thanks you all very much for reporting! And thanks @danlupascu for the quick feedback! And sorry for any inconvenience this might have caused 🥺

Top Results From Across the Web

Cannot import Recoil to nextjs app using tsx - reactjs

My nextjs app is using tsx. I have no idea on how to resolve this issue and all suggestions/help will be greatly appreciated....

module-not-found - Next.js

A module not found error can occur for many different reasons: The module you're trying to import is not installed in your dependencies;...

Upgrade Guide - Next.js

Upgrade Guide. Upgrading from 12 to 13. To update to Next.js version 13, run the following command using your preferred package manager:

Basic Features: TypeScript - Next.js

Next.js provides an integrated TypeScript experience, including zero-configuration set up and built-in types for Pages, APIs, and more.

no-document-import-in-page - Next.js

next/document was imported in a page outside of pages/_document.js (or pages/_document.tsx if you are using TypeScript). This can cause unexpected issues in ......