remix-pwa: entry.worker.ts esbuild compilation error
Hello, I have this code running on my remix netlify instance in development (@remix-run/node server runtime and @remix-run/netlify server adapter), however running dev/build script that in turn runs this “worker” script that runs esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --minify --bundle --format=esm --define:process.env.NODE_ENV='"production"' fails my build due to node requires coming from @remix-run/node package.
$ npm-run-all -p build:*
warning ../../package.json: No license field
warning ../../package.json: No license field
$ remix build
$ esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --minify --bundle --format=esm --define:process.env.NODE_ENV='"production"'
✘ [ERROR] Could not resolve "crypto"
node_modules/@remix-run/node/upload/fileUploadHandler.js:15:21:
15 │ var crypto = require('crypto');
╵ ~~~~~~~~
The package "crypto" 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/@remix-run/node/fetch.js:15:21:
15 │ 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 "crypto"
node_modules/@remix-run/node/sessions/fileStorage.js:15:21:
15 │ var crypto = require('crypto');
╵ ~~~~~~~~
The package "crypto" 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/@remix-run/node/upload/memoryUploadHandler.js:15:21:
15 │ 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 "stream"
node_modules/@remix-run/node/parseMultipartFormData.js:15:21:
15 │ 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/@remix-run/node/upload/fileUploadHandler.js:16:17:
16 │ var 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.
6 of 21 errors shown (disable the message limit with --log-limit=0)
node:child_process:869
throw err;
^
Error: Command failed: /Users/josephmethven/Projects/rp-rdm-mobile/node_modules/esbuild-darwin-64/bin/esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --minify --bundle --format=esm --define:process.env.NODE_ENV="production"
at checkExecSyncError (node:child_process:828:11)
at Object.execFileSync (node:child_process:866:15)
at Object.<anonymous> (/Users/josephmethven/Projects/rp-rdm-mobile/node_modules/esbuild/bin/esbuild:163:26)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47 {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 82595,
stdout: null,
stderr: null
}
package.json
{
"name": "my-package",
"private": true,
"description": "Remix + Netlify + PWA",
"license": "",
"sideEffects": false,
"scripts": {
"build": "npm-run-all -p build:*",
"build:remix": "remix build",
"dev": "npm-run-all -p dev:*",
"dev:netlify": "cross-env NODE_ENV=development netlify dev",
"postinstall": "remix setup node",
"build:worker": "esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --minify --bundle --format=esm --define:process.env.NODE_ENV='\"production\"'",
"dev:worker": "esbuild ./app/entry.worker.ts --outfile=./public/entry.worker.js --bundle --format=esm --define:process.env.NODE_ENV='\"development\"' --watch"
},
"dependencies": {
"@emotion/cache": "^11.7.1",
"@emotion/css": "^11.7.1",
"@emotion/react": "^11.8.1",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.8.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.5.0",
"@netlify/functions": "^1.0.0",
"@remix-run/eslint-config": "^1.3.5",
"@remix-run/netlify": "^1.4.1",
"@remix-run/node": "^1.4.3",
"@remix-run/react": "^1.3.5",
"@remix-validated-form/with-yup": "^2.0.1",
"cross-env": "^7.0.3",
"date-fns": "^2.28.0",
"lodash": "^4.17.21",
"marked": "^4.0.12",
"node-persist": "^3.1.0",
"prettier": "^2.6.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-markdown": "^8.0.3",
"react-remark": "^2.1.0",
"react-string-replace": "^1.0.0",
"remix": "^1.4.1",
"remix-pwa": "^0.8.1",
"remix-seo": "^0.1.0",
"remix-validated-form": "^4.1.8",
"swiper": "^8.1.3",
"tiny-invariant": "^1.2.0",
"web-push": "^3.4.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@remix-run/dev": "^1.3.5",
"@types/lodash": "^4.14.179",
"@types/react": "^18.0.1",
"@types/react-dom": "^18.0.0",
"@types/swiper": "^6.0.0",
"esbuild-plugin-alias": "^0.2.1",
"eslint": "^8.11.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"npm-run-all": "^4.1.5",
"typescript": "^4.5.5"
},
"engines": {
"node": ">=14"
}
}
If I add --platform=node as suggested by CLI, the app runs up fine but then the browser console throws an error
entry.worker.js:13 Uncaught Error: Dynamic require of "path" is not supported
at entry.worker.js:13:9
at node_modules/source-map-support/source-map-support.js (entry.worker.js:1780:16)
at __require2 (entry.worker.js:16:50)
at node_modules/@remix-run/node/index.js (entry.worker.js:31541:28)
at __require2 (entry.worker.js:16:50)
at entry.worker.js:31629:27
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 18 (12 by maintainers)
Caching a set of functions and components on first load sounds nice! I would try to work on that
Seems to work with
/server-runtimeas expected, thanks!If you did have error boundaries on each route, but the route it was going to wasn’t cached, wouldn’t it always go to the app/root level error boundary as the error boundary would have to be stored in that document cache? Or would it not work that way?
Would it perhaps make sense to add in ability to “pre-cache” vital documents to avoid a global error boundary like this?
In my scenario, I need my app work offline on all documents/data as soon as it’s installed, as it could be offline for months once it’s been installed.
Is there a reason why you only handle network error responses from data requests, and not if a document cache/asset cache fails due to being offline and no cache found?
For me this results in my error boundary on the whole app as “Failed to fetch” which isn’t a great error imo, I’m going to see if putting these network error json responses on the other caches improves that a bit.
Yes on the
entry.worker.tslike below: