Chakra UI integration

[sinitsa]

And then, i start thinking, that all problems goes from chakra-ui integration…
I tried to do it, perfect guide here https://chakra-ui.com/guides/getting-started/remix-guide
(i found some other examples with chakra, but only for vercel... all my current stack is on cf, very want to make it work on workers....
but i encounter another problems, when i did everything in thus guide…
Because of some packages dependencies (dotenv and some other packages) when i trying to npm run start i got next errors…
Do you have any ideas how can it be fixed?
In old workers version in webpack conf i can simply resolve all modules like fs, stream etc to null … but what I can do in this situation, i tried some options but i didn’t find no real cure… Thanks in advance if you have any thoughts …

✘ [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.

✘ [ERROR] Could not resolve "fs"

node_modules/dotenv/lib/main.js:24:19:
  24 │ const fs = require('fs')
     ╵                    ~~~~

The package "fs" 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.

✘ [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.

✘ [ERROR] Could not resolve "path"

node_modules/dotenv/lib/main.js:25:21:
  25 │ const path = require('path')
     ╵                      ~~~~~~

The package "path" 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.

✘ [ERROR] Could not resolve "stream"

node_modules/readable-stream/readable.js:1:21:
  1 │ var Stream = require('stream'); // hack to fix a circular dependenc...
    ╵                      ~~~~~~~~

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.

✘ [ERROR] Could not resolve "os"

node_modules/dotenv/lib/main.js:26:19:
  26 │ const os = require('os')
     ╵                    ~~~~

The package "os" 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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

✘ [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.

Unknown error caught during build: Error: Build failed with 16 errors:
node_modules/core-util-is/lib/util.js:103:27: ERROR: Could not resolve "buffer"
node_modules/dotenv/lib/main.js:24:19: ERROR: Could not resolve "fs"
node_modules/dotenv/lib/main.js:25:21: ERROR: Could not resolve "path"
node_modules/dotenv/lib/main.js:26:19: ERROR: Could not resolve "os"
node_modules/duplexer2/node_modules/readable-stream/lib/_stream_readable.js:42:17: ERROR: Could not resolve "events"
...
at failureErrorWithLog (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1601:15)
at /Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1247:28
at runOnEndCallbacks (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1160:65)
at buildResponseToResult (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1245:7)
at /Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1354:14

[sinitsa]

Sorry, after a quick search i found it cloudflare/workers-sdk#421
And finally - https://github.com/aiji42/remix-emotion-on-cloudflare#conform-to-emotion ...
Will try to do it... still looking for a working example.....

[sinitsa]

I have patched as described....
then, i fixed build

import alias from 'esbuild-plugin-alias'

.....

plugins: [
alias({
'through': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'fs': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'path': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'os': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'html-tokenize': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'multipipe': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/no-op/index.js',
'@emotion/react': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/@emotion/react/dist/emotion-react.esm.js',
'@emotion/cache': '/Users/havok/Work/lawsvc/packages/ccremix/node_modules/@emotion/cache/dist/emotion-cache.esm.js',
})
]
.......
finally, it's build successfully - wohhoouu... but....

✨ Build completed successfully!
🌀 Using namespace for Workers Site "__ccremix-workers_sites_assets"
✨ Success
🌀 Uploading site files
Error: Something went wrong with the request to Cloudflare...
Uncaught ReferenceError: process is not defined
at line 0
[API code: 10021]

dunno what is this and in which file :/

[sinitsa]

it's ridiculous now ....
i found these lines...
first - process.env.DOTENV_CONFIG_ENCODING , process.env.DOTENV_CONFIG_PATH
i fixed it

define: {
  'process.env.NODE_ENV': `"${mode}"`,
  'process.env.VERSION': `"${version}"`,
  'process.env.DOTENV_CONFIG_ENCODING': `"${dotenv_encoding}"`,
  'process.env.DOTENV_CONFIG_PATH': `"${dotenv_path}"`,
  'process.env.DOTENV_CONFIG_DEBUG': `"${dotenv_debug}"`,
},

but then - wrong reference in worker is to "process.argv" ... but! 1) i cannot redefine it 2) i cannot define it any other way 3) i cannot find this string - actually any process.env not in node_modules nor in another project files .... but here last one error line from worker.mjs - (take a look at last line, process.argv - what library put this line and how, if i cannot find any process.argv or just argv in any emotion files (seems like its emotioin...)

ert("",a,i,!1)},[e,a.name]),null});function qK(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return M6(e)}var en=function(){var e=qK.apply(void 0,arguments),r="animation-"+e.name;return{name:r,styles:"@Keyframes "+r+"{"+e.styles+"}",anim:1,toString:function(){return"EMO"+this.name+"_"+this.styles+"EMO"}}};var g6=P(N()),kw=P(VC());var jW=P(kC());D2();var he=P(x0());(function(){fS().config(Object.assign({},pS(),mS()(process.argv)))})();var Ew=P(N());var gS=P(N()),LQ=function(){return gS.createElement(tn,{styles:`

[edmundhung]

Closing this for now as the template would stick with tailwindcss. If anyone managed to integrate with Chakra UI, feel free to share here. I can add a link on the readme.