Cannot import "exports": { "module": ... } without type=module configured packages, instead we could get an error: Cannot use import statement outside a module

[LumaKernel]

Reproduction

Quick: Go to https://stackblitz.com/edit/remix-run-remix-cqepq2?file=app%2Froutes%2F_index.tsx
Or see #9071

1. Initialize remix plain project.
2. Install use-immer@0.9.0 (Don't worry! It's tiny library, fully zero dependency, and I confirmed this is caused by some conditions with just rewriting its package.json)
3. Add import statement for 'use-immer'

The package which causes this problem has these conditions:

• has no type: module in package.json
• has exports: { ".": { import: "something" }} in package.json

The package.json in use-immer@0.9.0, you can see like this:

{
  "name": "use-immer",
  "version": "0.9.0",
  "description": "Use immer with React hooks",
  "main": "dist/use-immer.js",
  "umd:main": "dist/use-immer.umd.js",
  "module": "dist/use-immer.module.js",
  "jsnext:main": "dist/use-immer.module.js",
  "react-native": "dist/use-immer.module.js",
  "typings": "dist/index.d.ts",
  "source": "src/index.ts",
  "exports": {
    ".": {
      "require": "./dist/use-immer.js",
      "import": "./dist/use-immer.module.js",
      "types": "./dist/index.d.ts"
    }
  },
  "sideEffects": false,
  "scripts": { omitted.. },
  "repository": { omitted.. },
  "files": [ omitted.. ],
  "keywords": [ omitted.. ],
  "author": "Michel Weststrate",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/mweststrate/use-immer/issues"
  },
  "homepage": "https://github.com/mweststrate/use-immer#readme",
  "peerDependencies": { omitted.. },
  "devDependencies": { omitted.. }
}

And we can confirm this satisfies the condition.
Actually, if I add "type=module" to this, and restart remix run, it succeeds to import.

---

Extra contexts

related:

• wired-elements-react - cannot use import statement outside a module #6168
• When I import 'antd/es/locale/zh_CN' from 'antd', "Cannot use import statement outside a module" is displayed. #9029

This could be the bug of vite. I can create issue instead on vite, but I'm not sure for now.
The most important part of this issue is I got small reproduction for these issues (currently discussions).

I'm also making PR for Option 1 after submitting this issue. Done.

By the way, you may think, such packages should have type: module in their package.json. Actually, import from these packages from esm does not work, and multi-support is actually not possible by native level. Even if type=module is added, now, it cannot be require-able.
Sadly, this is complicated situation. Node.js, TypeScript and Webpack treats exports as their own way. Webpack says as https://webpack.js.org/guides/package-exports/#support .

Thanks.

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 7.87 GB / 15.36 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.0 - /usr/bin/node
    npm: 10.2.4 - /usr/bin/npm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 114.0.5735.133
    Chromium: 122.0.6261.128
  npmPackages:
    @remix-run/dev: ^2.8.1 => 2.8.1
    @remix-run/node: ^2.8.1 => 2.8.1
    @remix-run/react: ^2.8.1 => 2.8.1
    @remix-run/serve: ^2.8.1 => 2.8.1
    vite: ^5.1.0 => 5.1.6

Used Package Manager

npm

Expected Behavior

Not get error and just can import it as ESM module as usual.

Actual Behavior

Got an error:

Cannot use import statement outside a module
    at internalCompileFunction (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:180:1005)
    at wrapSafe (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:14101)
    at Module._compile (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:14512)
    at Module._extensions..js (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:15550)
    at Module.load (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:13457)
    at Module._load (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:10535
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

We have the workaround for this, just with importing by relative path:

- import { useImmer } from 'use-immer';
+ import { useImmer } from '../../node_modules/use-immer';

[U-4-E-A]

Is there any update on this issue? I am experiencing it with v2.9.2.

@remix-run/dev: 2.9.2
@remix-run/node: 2.9.2
@remix-run/react: 2.9.2
@remix-run/serve: 2.9.2

[navdeep-soni]

I am also experiencing the same issue

[raRaRa]

I've been running into the same issue with several packages such as react-content-loader and the workaround mentioned above seems to work for my case too.

[IvanLi-CN]

I encountered the same issue when using chartjs-react.

Following the suggestions from the original poster and this comment, I tried the following two solutions, both of which resolved the issue:

1. Add { "type": "module" } to lib's package.json file
2. Move the relevant code to a .client.tsx file

[Allakazan]

I encountered the same issue when using chartjs-react.

Following the suggestions from the original poster and this comment, I tried the following two solutions, both of which resolved the issue:

1. Add { "type": "module" } to lib's package.json file
2. Move the relevant code to a .client.tsx file

Thanks ! It works for me.

But i might be concerned. How changing the file name to .client.tsx exaclty solves the problem ? And how this change impact the application as whole ?

[pedsmoreira]

This is still an issue at the time of posting this message, I'm using react-router 7.3. The solution that worked for me was adding the troublesome libraries to ssr.noExternal

[brophdawg11]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!