Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Remix v2.0.0 #228

Closed
jgentes opened this issue Sep 16, 2023 · 42 comments
Closed

Add support for Remix v2.0.0 #228

jgentes opened this issue Sep 16, 2023 · 42 comments
Assignees

Comments

@jgentes
Copy link

jgentes commented Sep 16, 2023

Describe the bug

Remix v2 has deprecated useTransition in favor of useNavigation as documented here: https://remix.run/docs/en/2.0.0/start/v2#usetransition

After upgrading to Remix v2, the following error occurs:

X [ERROR] No matching export in "node_modules/@remix-run/react/dist/esm/index.js" for import "useTransition"

    node_modules/remix-utils/browser/react/use-global-pending-state.js:1:9:
      1 │ import { useTransition, useFetchers } from "@remix-run/react";

Your Example Website or App

https://github.com/jgentes/mixpoint

Steps to Reproduce the Bug or Issue

Go to package.json, update all remix dependencies to "2.0.0" and run "yarn", then "yarn dev"

Expected behavior

Probably ought to update remix-utils to the latest version of Remix

Screenshots or Videos

No response

Platform

Windows, edge

Additional context

No response

@zifahm
Copy link

zifahm commented Sep 16, 2023

v2 is already in the works. You can use it today by instlaling remix-utils@next

@manstfu
Copy link

manstfu commented Sep 16, 2023

v2 is already in the works. You can use it today by instlaling remix-utils@next

npm i remix-utils@next
npm ERR! Found: @remix-run/react@2.0.0
npm ERR! Could not resolve dependency:
npm ERR! peer @remix-run/react@"^1.19.1" from remix-utils@7.0.0-pre.3

sergiodxa
The peer dependency issue can be ignored

So, quick fix
npm i remix-utils@next --legacy-peer-deps

@marcello-palmitessa
Copy link

installing remix-utils@next I'm still getting this new error now:

[dev-remix]   The path "." is not exported by package "remix-utils":
[dev-remix] 
[dev-remix]     node_modules/remix-utils/package.json:54:13:
[dev-remix]       54 │   "exports": {
[dev-remix]          ╵              ^

@Joseamica
Copy link

node:internal/modules/cjs/loader:557
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/amieva/Documents/Programming/Remix-TS/av/node_modules/remix-utils/package.json
    at new NodeError (node:internal/errors:399:5)
    at exportsNotFound (node:internal/modules/esm/resolve:266:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:602:9)
    at resolveExports (node:internal/modules/cjs/loader:551:36)
    at Module._findPath (node:internal/modules/cjs/loader:620:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1039:27)
    at Module._load (node:internal/modules/cjs/loader:898:27)
    at Module.require (node:internal/modules/cjs/loader:1120:19)
    at require (node:internal/modules/helpers:112:18)
    at Object.<anonymous> (/Users/amieva/Documents/Programming/Remix-TS/av/build/index.js:6279:205) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v19.4.0
ERROR: "dev:server" exited with 1.

@ananni13
Copy link
Contributor

Exports definitions are different for v2, this is the published remix-utils@next version (further modified in #224 but not yet published):

remix-utils/package.json

Lines 54 to 187 in d766238

"exports": {
"./authenticity-token": {
"types": "./build/react/authenticity-token.d.ts",
"default": "./build/react/authenticity-token.js"
},
"./cache-assets": {
"types": "./build/client/cache-assets.d.ts",
"default": "./build/client/cache-assets.js"
},
"./client-only": {
"types": "./build/react/client-only.d.ts",
"default": "./build/react/client-only.js"
},
"./cors": {
"types": "./build/server/cors.d.ts",
"default": "./build/server/cors.js"
},
"./csrf": {
"types": "./build/server/csrf.d.ts",
"default": "./build/server/csrf.js"
},
"./event-stream": {
"types": "./build/server/event-stream.d.ts",
"default": "./build/server/event-stream.js"
},
"./external-scripts": {
"types": "./build/react/external-scripts.d.ts",
"default": "./build/react/external-scripts.js"
},
"./fetcher-type": {
"types": "./build/react/fetcher-type.d.ts",
"default": "./build/react/fetcher-type.js"
},
"./get-client-ip-address": {
"types": "./build/server/get-client-ip-address.d.ts",
"default": "./build/server/get-client-ip-address.js"
},
"./get-client-locales": {
"types": "./build/server/get-client-locales.d.ts",
"default": "./build/server/get-client-locales.js"
},
"./honeypot-input": {
"types": "./build/react/honeypot-inputs.d.ts",
"default": "./build/react/honeypot-inputs.js"
},
"./honeypot": {
"types": "./build/server/honeypot.d.ts",
"default": "./build/server/honeypot.js"
},
"./is-prefetch": {
"types": "./build/server/is-prefetch.d.ts",
"default": "./build/server/is-prefetch.js"
},
"./json-hash": {
"types": "./build/server/json-hash.d.ts",
"default": "./build/server/json-hash.js"
},
"./named-action": {
"types": "./build/server/named-action.d.ts",
"default": "./build/server/named-action.js"
},
"./parse-accept-header": {
"types": "./build/server/parse-accept-header.d.ts",
"default": "./build/server/parse-accept-header.js"
},
"./preload-route-assets": {
"types": "./build/server/preload-route-assets.d.ts",
"default": "./build/server/preload-route-assets.js"
},
"./promise": {
"types": "./build/common/promise.d.ts",
"default": "./build/common/promise.js"
},
"./redirect-back": {
"types": "./build/server/redirect-back.d.ts",
"default": "./build/server/redirect-back.js"
},
"./respond-to": {
"types": "./build/server/respond-to.d.ts",
"default": "./build/server/respond-to.js"
},
"./responses": {
"types": "./build/server/responses.d.ts",
"default": "./build/server/responses.js"
},
"./rolling-cookie": {
"types": "./build/server/rolling-cookie.d.ts",
"default": "./build/server/rolling-cookie.js"
},
"./safe-redirect": {
"types": "./build/server/safe-redirect.d.ts",
"default": "./build/server/safe-redirect.js"
},
"./server-only": {
"types": "./build/react/server-only.d.ts",
"default": "./build/react/server-only.js"
},
"./typed-cookie": {
"types": "./build/server/typed-cookie.d.ts",
"default": "./build/server/typed-cookie.js"
},
"./typed-session": {
"types": "./build/server/typed-session.d.ts",
"default": "./build/server/typed-session.js"
},
"./use-debounce-fetcher": {
"types": "./build/react/use-debounce-fetcher.d.ts",
"default": "./build/react/use-debounce-fetcher.js"
},
"./use-delegated-anchors": {
"types": "./build/react/use-delegated-anchors.d.ts",
"default": "./build/react/use-delegated-anchors.js"
},
"./use-event-source": {
"types": "./build/react/use-event-source.d.ts",
"default": "./build/react/use-event-source.js"
},
"./use-global-navigation-state": {
"types": "./build/react/use-global-navigation-state.d.ts",
"default": "./build/react/use-global-navigation-state.js"
},
"./use-hydrated": {
"types": "./build/react/use-hydrated.d.ts",
"default": "./build/react/use-hydrated.js"
},
"./use-locales": {
"types": "./build/react/use-locales.d.ts",
"default": "./build/react/use-locales.js"
},
"./use-should-hydrate": {
"types": "./build/react/use-should-hydrate.d.ts",
"default": "./build/react/use-should-hydrate.js"
}
},

The examples in the v2 README are updated with the correct imports, but all IDEs should be able to suggest the correct ones to use.

@bushblade
Copy link

v2 is already in the works. You can use it today by instlaling remix-utils@next

I'm seeing:

[1] ✘ [ERROR] Could not resolve "remix-utils"
[1]
[1]     app/components/RichTextRenderer.tsx:21:27:
[1]       21 │ import { ClientOnly } from 'remix-utils';
[1]          ╵                            ~~~~~~~~~~~~~
[1]
[1]   The path "." is not exported by package "remix-utils":
[1]
[1]     node_modules/remix-utils/package.json:54:13:
[1]       54 │   "exports": {
[1]          ╵              ^
[1]
[1]   You can mark the path "remix-utils" as external to exclude it from the bundle, which will remove this error.

@ananni13
Copy link
Contributor

ananni13 commented Sep 22, 2023

Why is no one reading the v2 documentation or even just this #228 (comment), in this same issue, from yesterday? 😅

You CAN'T write this anymore:

import { ... } from "remix-utils";

You have to use the correct imports that are shown in all the new examples in the v2 README.md, e.g. for ClientOnly:

import { ClientOnly } from "remix-utils/client-only";

Your IDE should be more than capable of suggesting the correct imports, just delete the old ones that don't work anymore.

@jamestrenda
Copy link

jamestrenda commented Sep 24, 2023

Why is no one reading the v2 documentation or even just this #228 (comment), in this same issue, from yesterday? 😅

You CAN'T write this anymore:

import { ... } from "remix-utils";

You have to use the correct imports that are shown in all the new examples in the v2 README.md, e.g. for ClientOnly:

import { ClientOnly } from "remix-utils/client-only";

That doesn't work either. VS Code is not finding those subdirectories for the import statement and when running remix dev, I get the following error (I replaced my real path with PATH_TO_PROJECT for brevity, in case that wasn't clear):

Error [ERR_REQUIRE_ESM]: require() of ES Module [PATH_TO_PROJECT]/node_modules/.pnpm/remix-utils@7.0.0-pre.3_@remix-run+react@2.0.1_@remix-run+router@1.9.0_@remix-run+server-runt_yhantxcu5gjjxoe52llaxnxbj4/node_modules/remix-utils/build/react/client-only.js from [PATH_TO_PROJECT]/build/index.js not supported.

Instead change the require of client-only.js in [PATH_TO_PROJECT]/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> ([PATH_TO_PROJECT]/build/index.js:5281:26)

Any help would be greatly appreciated.

@sergiodxa
Copy link
Owner

Why is no one reading the v2 documentation or even just this #228 (comment), in this same issue, from yesterday? 😅
You CAN'T write this anymore:

import { ... } from "remix-utils";

You have to use the correct imports that are shown in all the new examples in the v2 README.md, e.g. for ClientOnly:

import { ClientOnly } from "remix-utils/client-only";

That doesn't work either. VS Code is not finding those subdirectories for the import statement and when running remix dev, I get the following error (I replaced my real path with PATH_TO_PROJECT for brevity, in case that wasn't clear):

Error [ERR_REQUIRE_ESM]: require() of ES Module [PATH_TO_PROJECT]/node_modules/.pnpm/remix-utils@7.0.0-pre.3_@remix-run+react@2.0.1_@remix-run+router@1.9.0_@remix-run+server-runt_yhantxcu5gjjxoe52llaxnxbj4/node_modules/remix-utils/build/react/client-only.js from [PATH_TO_PROJECT]/build/index.js not supported.

Instead change the require of client-only.js in [PATH_TO_PROJECT]/build/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> ([PATH_TO_PROJECT]/build/index.js:5281:26)

Any help would be greatly appreciated.

This error is because Remix Utils v7 will ship ESM-only code, and it seems you Remix app is generating CJS code as the build output for the server, so you can't require() ESM modules.

You need to add remix-utils to serverDependenciesToBundle in your remix.config file.

@mufftee
Copy link

mufftee commented Sep 24, 2023

@sergiodxa How can i use it then when i added it to serverDependenciesToBundle? do i still use import { ClientOnly } from "remix-utils/client-only"; etc?

i stuck a little bit here.

@bushblade
Copy link

bushblade commented Sep 24, 2023

Why is no one reading the v2 documentation or even just this #228 (comment), in this same issue, from yesterday? 😅

You CAN'T write this anymore:

import { ... } from "remix-utils";

You have to use the correct imports that are shown in all the new examples in the v2 README.md, e.g. for ClientOnly:

import { ClientOnly } from "remix-utils/client-only";

Your IDE should be more than capable of suggesting the correct imports, just delete the old ones that don't work anymore.

Probably because some people are just following guides from other docs or articles that have not been updated to V2 then finding an issue and coming here.

@micisse
Copy link

micisse commented Sep 24, 2023

@mufftee and other people who have the same problem. You must use regex, not string like this:

// remix.config.js
...
  serverDependenciesToBundle: [
    /remix-utils/ // not "remix-utils"
  ],
...

// in your file component
import { ClientOnly } from "remix-utils/client-only";

@mufftee
Copy link

mufftee commented Sep 24, 2023

@mufftee and other people who have the same problem. You must use regex, not string like this:

// remix.config.js
...
  serverDependenciesToBundle: [
    /remix-utils/ // not "remix-utils"
  ],
...

// in your file component
import { ClientOnly } from "remix-utils/client-only";

Works like a charm!

@KrisBraun
Copy link

In case this helps anyone else, I needed to update these settings in tsconfig.json to support the new exports:

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "Bundler",
    ...
  }
}

@Fireclunge
Copy link

When I try to install remix-utils@next, it fails:

npm i -S remix-utils@next
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-v2@0.0.1
npm ERR! Found: @remix-run/react@2.0.1
npm ERR! node_modules/@remix-run/react
npm ERR!   @remix-run/react@"2.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @remix-run/react@"^1.19.1" from remix-utils@7.0.0-pre.3
npm ERR! node_modules/remix-utils
npm ERR!   remix-utils@"7.0.0-pre.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

I think for now you need to npm install with --legacy-peer-deps

@setvik
Copy link

setvik commented Sep 28, 2023

Would be great if the peer dependencies could be updated so that we didn't need the --legacy-peer-deps flag.

@cliffordfajardo
Copy link
Contributor

cliffordfajardo commented Oct 1, 2023

In case this helps anyone else, I needed to update these settings in tsconfig.json to support the new exports:

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "Bundler",
    ...
  }
}

✅ I updated my tsconfig.json's moduleResolution: "node" to `moduleResolution: "Bundler" & then the error that @jamestrenda mentioned went away

Apparently remix templates have been using moduleResolition: "Bundler" for a while inside of tsconfig.json
https://github.com/search?q=repo%3Aremix-run%2Fremix%20"moduleResolution"%3A%20"Bundler"&type=code

NOTE: Bundler is only available for typescript version 5.0+

I was initially curious about how Bundler compares to the node value and others & found this comparison table from the typescript team:
image

References

@DonKoko
Copy link

DonKoko commented Oct 3, 2023

@cliffordfajardo indeed thats the correct tsconfig and it also worked for me, but the dependencies are still not updated and its still required to run npm i --legacy-peer-deps which doesn't work for us in production. Have you found a solution for that?

@zifahm
Copy link

zifahm commented Oct 4, 2023

@DonKoko this was one of the suggested workarounds, have'nt tried it yet

@DonKoko
Copy link

DonKoko commented Oct 4, 2023

thanks @zifahm . I was even the one who created the discussion in discord. Idk how i missed that comment.
Solution is to add overrides to package.json

  "overrides": {
    "remix-utils": {
      "@remix-run/react": "^2.0.1",
      "@remix-run/server-runtime": "^2.0.1"
    }
  },

@p-christ
Copy link

p-christ commented Oct 4, 2023

How can i do this with the new version?

import * as RemixUtils from 'remix-utils';

RemixUtils.eventStream(...) 

am getting
Cannot find module 'remix-utils' or its corresponding type declarations.ts(2307)

@sergiodxa
Copy link
Owner

You can't anymore, and you should have never done this because it would cause all utils to be bundled.

@p-christ
Copy link

p-christ commented Oct 4, 2023

oh so in the old code, this:

import { eventStream } from 'remix-utils'

leads to less being bundled than this:

import * as RemixUtils from 'remix-utils'

? I would have thought they lead to the same amount being bundled, is this a remix specific difference?

@sergiodxa
Copy link
Owner

That's how bundlers work, by doing * as RemixUtils you're bringing all that the package comes with as a single object, instead of importing exactly what you need.

In the next version of Remix Utils (a new pre-release has been published btw which uses Remix v2 as dependency) each util will have a unique import path like remix-utils/sse/server for eventStream or remix-utils/sse/react for useEventSource.

@jozefmery
Copy link

jozefmery commented Oct 6, 2023

Why were some of the utilities removed in the latest version ? Namely badRequest is something that appears to be missing, maybe others too. Has it perhaps been replaced with something from Remix V2 itself ?

@sergiodxa
Copy link
Owner

Why were some of the utilities removed in the latest version ? Namely badRequest is something that appears to be missing, maybe others too. Has it perhaps been replaced with something from Remix V2 itself ?

Most of those response utils where just wrappers of json, it's simpler to just use json instead of maintaining a wrapper.

Response helpers that add extra features or don't wrap json were left in the package. Examples include redirectBack, jsonHash, namedAction, notModified (because it has the limit of not receiving body or headers) and any non JSON response helper so you don't need to care about the specific content-type of the response.

@sergiodxa
Copy link
Owner

Also v7.0.1 with Remix v2 support is out as stable release https://github.com/sergiodxa/remix-utils/releases/tag/v7.0.1.

Closing this since it's released now, for any specific problem please open a new issue to treat them individually.

@sergiodxa sergiodxa self-assigned this Oct 6, 2023
@saashqdev
Copy link

So, what do we do with badRequest and forbidden from V6?

@sergiodxa
Copy link
Owner

@saashqdev You can always copy them to your own codebase (they are here and here), or do json(data, 400) and json(data, 403), they didn't do more than that

@saashqdev
Copy link

Ah, cool. Thanks a lot.

@justinmetros
Copy link

Response helpers that add extra features or don't wrap json were left in the package. Examples include redirectBack, jsonHash, namedAction, notModified (because it has the limit of not receiving body or headers) and any non JSON response helper so you don't need to care about the specific content-type of the response.

Love this new version, thanks for everything with this 🙏

May I recommend adding the dropped response utils to changelog or the Upgrade notes? Used those all over an app and thought I was taking crazy pills until I dug down into the packages.

Simple enough to replace but may make upgrade easier for some.

@benjamindulau
Copy link

Installed v7.3.0 today and IntelliJ is complaining.
v2.3.0 of Remix.
ESM only project.

Switching to moduleResolution: "Bundler" makes things worse for a lot of other imports.

Capture d’écran 2023-11-29 à 18 18 42

@cjoecker
Copy link
Contributor

@benjamindulau did you restart your Typescript server after the installation? In the bottom right corner, you can see it
CleanShot 2023-11-30 at 08 36 26@2x

@benjamindulau
Copy link

@cjoecker Yep! I restarted the entire IDE, cleared cache, restarted Typescript, everything (well I hope not everything since I didn't do what works :p)

@benjamindulau
Copy link

Nevermind, didn't notice but IntelliJ was using the wrong Typescript version (4.x). Fixing this and setting moduleResolution: "bundler" does the job. Thanks

@nicolasrenon
Copy link

nicolasrenon commented Dec 4, 2023

Using VS Code, remix 2.3.1 and remix-utils 7.3.0 with Indie Stack, and I'm getting Cannot find module [...] or its corresponding type declarations on all remix-utils imports. Restarting VS Code did not solve the problem.
Any idea?

@sergiodxa
Copy link
Owner

@nicolasrenon Ensure you have TS v5, that your tsconfig.json has moduleResolution set to bundler, and if you're using CJS add remix-utils packages to serverDependenciesToBundle.

@nicolasrenon
Copy link

nicolasrenon commented Dec 4, 2023

@sergiodxa Yes, currently running TS v5.2.2. moduleResolution cannot be changed from node to bundler because Indie Stack's config for module is set to CommonJS otherwise getting Option 'bundler' can only be used when 'module' is set to 'es2015' or later. I added remix-utils to serverDependenciesToBundle. Code is running fine but the TS error is not going away.

Update: it seems fine after switching from CommonJS to ES2020.

@sergiodxa
Copy link
Owner

sergiodxa commented Dec 4, 2023

If you can't switch moduleResolution to bundler then you can't upgrade to Remix Utils v7 and get TS to recognize the imports

@manzaloros
Copy link

I'm also having this issue. Switching module resolution to "Bundler" will solve it, but that causes problems in other places..

@cliffordfajardo
Copy link
Contributor

cliffordfajardo commented Dec 6, 2023

I'm also having this issue. Switching module resolution to "Bundler" will solve it, but that causes problems in other places..

I ran into the same issue that @manzaloros mentioned above when upgrading to Remix v2 + vite;
One of our packages grpc-node doesnt like "moduleResolution": "Bundler", (thread) so we had to revert back to "moduleResolution": "node",

However, "moduleResolution": "node", doesnt work with latest versions of remix-utils;
We were primarily using remix-utils for its ClientOnly component, so what we did to unblock us is copy the implementation of client-only.tsx in our app & remove remix-utils for now =/

@sergiodxa
Copy link
Owner

sergiodxa commented Dec 6, 2023

Note that "moduleResolution": "Bundler" is the default in new Remix apps, and it's recommended by TS when working with a bundler.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests