Directory import of buffer not supported with ES modules

[paul-kuihi]

Description

When starting up the app with npm run dev I get the follow error:

Error: Directory import 'my_project/node_modules/@remix-pwa/cache/node_modules/buffer/' is not supported resolving ES modules imported from /my_project/node_modules/@remix-pwa/cache/dist/src/cache.js

Did you mean to import buffer/index.js?

How to replicate

• Setup remix with npx create-remix@latest
• Follow the installation steps.
• Start the app with npm run dev

I have added ESLinting and formatting to the project, but none of these seem to have changed any of the node module resolution options set by remix.

Workaround

If I patch cache.js from import * as B from 'buffer/'; to import * as B from 'buffer/index.js'; then it resolves the issue, but seeing as how other people have this working (and I can't see anything like this in the playground) there must be a configuration I have wrong somewhere in my project.

For now, I'm going to patch the file and keep moving, but if anyone can replicate or advise, that would be great.

[ShafSpecs]

@paul-kuihi Patching the package is one way to go. The other way is to add the remix pwa packages to serverDependenciesToBundle field. Look at this issue: remix-pwa/monorepo#112

[paul-kuihi]

This is great, thanks @ShafSpecs ! I've moved from the patch to config and is working nicely both locally and deployed.

[Kikketer]

I guess it's not so much of a gotcha but likely part of the standard installation. I created a baseline Remix project (using https://remix.run/docs/en/main/other-api/create-remix) and only went through the installation steps and ran into this issue.

Perhaps adding to the walkthrough here: https://remix-pwa.run/docs/installation#set-up-your-remix-config and removing the "You don't need to change any other thing in your Remix config."

The repo created by following the steps in Create Remix + Remix PWA: https://github.com/Kikketer/remix-base

[ShafSpecs]

I guess it's not so much of a gotcha but likely part of the standard installation. I created a baseline Remix project (using https://remix.run/docs/en/main/other-api/create-remix) and only went through the installation steps and ran into this issue.

Perhaps adding to the walkthrough here: https://remix-pwa.run/docs/installation#set-up-your-remix-config and removing the "You don't need to change any other thing in your Remix config."

The repo created by following the steps in Create Remix + Remix PWA: https://github.com/Kikketer/remix-base

👍 Working on the new release of remix-pwa and the cache package is getting deprecated. Hopefully, that sorts out a lot

[hanhcode]

I had to go to: node_modules/@remix-pwa/cache/dist/src/cache.js and edit the first line:
import * as B from 'buffer/';
to
import * as B from 'buffer/index.js';