Fail to compile Worker when using Remix

[chasoft]

I'm trying to integrate Chakra-UI to Remix (using Cloudflare pages as a deployment platform).

It is working when choosing other platforms, except Cloudflare pages!

Watching Remix app in development mode...
Compiling worker to "C:\Users\hongy\AppData\Local\Temp\functionsWorker.js"...
X [ERROR] Could not resolve "stream"

    node_modules/through/index.js:1:21:
      1 │ var Stream = require('stream')
        ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "stream"

    node_modules/multipipe/index.js:7:26:
      7 │ var PassThrough = require('stream').PassThrough;
        ╵                           ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "stream"

    node_modules/readable-stream/readable.js:1:21:
      1 │ var Stream = require('stream'); // hack to fix a circular dependency issue when used with browserify
        ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "buffer"

    node_modules/readable-stream/lib/_stream_writable.js:29:21:
      29 │ var Buffer = require('buffer').Buffer;
         ╵                      ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "buffer"

    node_modules/core-util-is/lib/util.js:103:27:
      103 │ exports.isBuffer = require('buffer').Buffer.isBuffer;
          ╵                            ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "buffer"

    node_modules/readable-stream/lib/_stream_readable.js:30:21:
      30 │ var Buffer = require('buffer').Buffer;
         ╵                      ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "stream"

    node_modules/readable-stream/lib/_stream_writable.js:40:21:
      40 │ var Stream = require('stream');
         ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "events"

    node_modules/readable-stream/lib/_stream_readable.js:35:17:
      35 │ var EE = require('events').EventEmitter;
         ╵                  ~~~~~~~~

  The package "events" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "events"

    node_modules/duplexer2/node_modules/readable-stream/lib/_stream_readable.js:42:17:
      42 │ var EE = require('events').EventEmitter;
         ╵                  ~~~~~~~~

  The package "events" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "stream"

    node_modules/readable-stream/lib/_stream_readable.js:43:21:
      43 │ var Stream = require('stream');
         ╵                      ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "events"

    node_modules/duplexer2/node_modules/readable-stream/lib/internal/streams/stream-browser.js:1:25:
      1 │ module.exports = require('events').EventEmitter;
        ╵                          ~~~~~~~~

  The package "events" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "buffer"

    node_modules/safe-buffer/index.js:2:21:
      2 │ var buffer = require('buffer')
        ╵                      ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

X [ERROR] Could not resolve "buffer"

    node_modules/string_decoder/index.js:22:21:
      22 │ var Buffer = require('buffer').Buffer;
         ╵                      ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

13 error(s) and 0 warning(s) when compiling Worker.
Build failed with 13 errors:
node_modules/core-util-is/lib/util.js:103:27: ERROR: Could not resolve "buffer"
node_modules/duplexer2/node_modules/readable-stream/lib/_stream_readable.js:42:17: ERROR: Could not resolve "events"
node_modules/duplexer2/node_modules/readable-stream/lib/internal/streams/stream-browser.js:1:25: ERROR: Could not resolve "events"
node_modules/multipipe/index.js:7:26: ERROR: Could not resolve "stream"
node_modules/readable-stream/lib/_stream_readable.js:30:21: ERROR: Could not resolve "buffer"
...

If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new.
ERROR: "dev:wrangler" exited with 1.

Expected behavior

Compiler successfully.

Do you have any suggest? Thank you!

[petebacondarwin]

Please can you provide steps to reproduce this problem, so that we can investigate?

[chasoft]

1. Create remix project

npx create-remix@latest

? Where would you like to create your app? remix-chakra-cp
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Cloudflare Pages
? TypeScript or JavaScript? TypeScript       
? Do you want me to run `npm install`? Yes

2. Install dependencies

npm i @chakra-ui/react @emotion/react @emotion/server @emotion/cache

3. Update some files... please check the repo here: https://github.com/chasoft/remix-chakra-cp-error

4. And run the following commands

npm run build
npm run dev

would produce errors mentioned above.

Thank you!

[dan-cooke]

I have also encountered this problem but with mui and @emotion

I think the common package here is @emotion/server it seems to be causing the issue.

Related issues emotion-js/emotion#2554 and emotion-js/emotion#2446

Until this is fixed in emotion, here is a temporary workaround https://github.com/aiji42/remix-emotion-on-cloudflare#conform-to-emotion

[GregBrimble]

Thanks @dan-cooke for that extra info. Looks like this is a thing emotion need to change, rather than anything we can do on our end. I'll close down this issue.