Remix deploy failing with Function too large

Support
,
1

Thank you for your reactivity!

Redeploying led me to an issue I didn’t have previously:

3:53:55 PM: The function "SERVER" is larger than the 50MB limit. Please consider reducing it.
3:53:55 PM: Failed to upload file: server

Following what I found in the doc/forum, I’ve added these lines to my netlify.toml:

[functions]
  node_bundler = "esbuild"

I then had this warning:

4:03:51 PM: ❯ The following Node.js modules use dynamic expressions to include files:
4:03:51 PM:    - @remix-run/react
4:03:51 PM:    - @sentry/remix
4:03:51 PM: ​
4:03:51 PM:   Because files included with dynamic expressions aren't bundled with your serverless functions by default,
  this may result in an error when invoking a function. To resolve this error, you can mark these Node.js
4:03:51 PM:   modules as external in the [functions] section of your `netlify.toml` configuration file:
4:03:51 PM: ​
4:03:51 PM:   [functions]
4:03:51 PM:     external_node_modules = ["@remix-run/react", "@sentry/remix"]
4:03:51 PM: ​
4:03:51 PM:   Visit https://ntl.fyi/dynamic-imports for more information.

I’ve updated the toml accordingly:

[functions]
  node_bundler = "esbuild"
  external_node_modules = ["@remix-run/react", "@sentry/remix"]

The deploy worked. But I have no clue why I have to do that, and the app is broken. This is the function log:

Mar 22, 04:08:51 PM: ec025797 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.Mar 22, 04:08:51 PM: ec025797 ERROR  TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/var/task/node_modules/react/cjs/react.development.js:1618:21)
    at useInRouterContext (/var/task/node_modules/react-router/lib/hooks.tsx:85:16)
    at Router (/var/task/node_modules/react-router/lib/components.tsx:308:6)
    at renderWithHooks (/var/task/.netlify/functions-internal/server.js:37505:25)
    at renderIndeterminateComponent (/var/task/.netlify/functions-internal/server.js:37562:23)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37718:15)
    at renderNodeDestructiveImpl (/var/task/.netlify/functions-internal/server.js:37822:17)
    at renderNodeDestructive (/var/task/.netlify/functions-internal/server.js:37802:22)
    at renderContextProvider (/var/task/.netlify/functions-internal/server.js:37695:11)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37762:17)Mar 22, 04:08:51 PM: ec025797 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.Mar 22, 04:08:51 PM: ec025797 ERROR  TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/var/task/node_modules/react/cjs/react.development.js:1618:21)
    at useInRouterContext (/var/task/node_modules/react-router/lib/hooks.tsx:85:16)
    at Router (/var/task/node_modules/react-router/lib/components.tsx:308:6)
    at renderWithHooks (/var/task/.netlify/functions-internal/server.js:37505:25)
    at renderIndeterminateComponent (/var/task/.netlify/functions-internal/server.js:37562:23)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37718:15)
    at renderNodeDestructiveImpl (/var/task/.netlify/functions-internal/server.js:37822:17)
    at renderNodeDestructive (/var/task/.netlify/functions-internal/server.js:37802:22)
    at renderContextProvider (/var/task/.netlify/functions-internal/server.js:37695:11)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37762:17)Mar 22, 04:08:51 PM: ec025797 ERROR  TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (/var/task/node_modules/react/cjs/react.development.js:1618:21)
    at useInRouterContext (/var/task/node_modules/react-router/lib/hooks.tsx:85:16)
    at Router (/var/task/node_modules/react-router/lib/components.tsx:308:6)
    at renderWithHooks (/var/task/.netlify/functions-internal/server.js:37505:25)
    at renderIndeterminateComponent (/var/task/.netlify/functions-internal/server.js:37562:23)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37718:15)
    at renderNodeDestructiveImpl (/var/task/.netlify/functions-internal/server.js:37822:17)
    at renderNodeDestructive (/var/task/.netlify/functions-internal/server.js:37802:22)
    at renderContextProvider (/var/task/.netlify/functions-internal/server.js:37695:11)
    at renderElement (/var/task/.netlify/functions-internal/server.js:37762:17)Mar 22, 04:08:51 PM: ec025797 Duration: 258.61 ms	Memory Usage: 220 MB

Is Remix supported by Netlify?

2

I tried to understand why my bundle is so big.

git:(main) ✗ du -h .netlify/functions/server.zip
 80M    .netlify/functions/server.zip

git:(main) ✗ source-map-explorer server.js server.js.map --no-border-checks
server.js
  Unable to map 48173/888002 bytes (5.42%)

I don’t see anything especially wild:

Screenshot 2023-03-23 at 07.41.15
Screenshot 2023-03-23 at 07.41.151920×1193 196 KB

FYI, I remove this part from my TOML as is was breaking the app:

[functions]
  node_bundler = "esbuild"
  external_node_modules = ["@remix-run/react", "@sentry/remix"]
3

Based on this, I can think that your server.js file is only 867.19 KiB. So the remaining ~79 MiB must be something else. Could you try to unzip your function bundle and check its contents? Maybe you’ve some media files or other stuff that’s blowing away the size.

Feel free to check this out:

4

Hi @hrishikesh,

Thank you for your reply and your suggestion.

The result is mind blowing:

1.3M	@sendgrid
1.3M	@sentry-internal
1.4M	@headlessui
1.4M	web-encoding
2.0M	@mollie
2.4M	@motionone
2.9M	framer-motion
3.0M	tldts
3.6M	@prisma
3.7M	@remix-run
4.4M	react-dom
4.9M	lodash
7.3M	web-streams-polyfill
8.1M	@zxing
 14M	@heroicons
 24M	date-fns
 54M	@sentry
 66M	typescript

Why these packages are included in the output? I’m currently using the default node bundler because when I use “esbuild”, things are broken (as stated in my previous message).

Full output:

➜  server git:(main) ✗ du -hs * | sort -h
4.0K	server.js
244M	node_modules
➜  server git:(main) ✗ cd node_modules
➜  node_modules git:(main) ✗ du -hs * | sort -h
8.0K	client-only
 16K	ansi-regex
 16K	buffer-from
 16K	camelcase
 16K	decamelize
 16K	encode-utf8
 16K	get-caller-file
 16K	has-unicode
 16K	ip-regex
 16K	is-fullwidth-code-point
 16K	is-ip
 16K	ms
 16K	object-assign
 16K	p-try
 16K	path-exists
 16K	strip-ansi
 16K	void-elements
 16K	wide-align
 20K	aproba
 20K	color-name
 20K	console-control-strings
 20K	cookie-signature
 20K	data-uri-to-buffer
 20K	delayed-stream
 20K	has
 20K	inherits
 20K	is-promise
 20K	remix-auth-form
 20K	remix-auth-google
 20K	require-main-filename
 20K	set-blocking
 20K	stream-slice
 20K	which-module
 20K	wrap-ansi
 24K	ansi-styles
 24K	clsx
 24K	combined-stream
 24K	lodash.debounce
 24K	lodash.startswith
 24K	set-cookie-parser
 24K	signal-exit
 24K	util-deprecate
 24K	webidl-conversions
 24K	which
 28K	color-support
 28K	delegates
 28K	immediate
 28K	js-tokens
 28K	mime-types
 28K	npmlog
 28K	require-directory
 32K	accept-language-parser
 32K	classnames
 32K	dijkstrajs
 32K	gopd
 32K	isexe
 32K	lodash.memoize
 32K	loose-envify
 32K	progress
 36K	are-we-there-yet
 36K	escalade
 36K	fast-deep-equal
 40K	for-each
 44K	available-typed-arrays
 44K	color-convert
 44K	flat
 44K	is-typed-array
 44K	mrmime
 44K	regenerator-runtime
 44K	y18n
 48K	call-bind
 48K	follow-redirects
 48K	has-tostringtag
 48K	proxy-from-env
 48K	use-consistent-value
 52K	hey-listen
 52K	intl-parse-accept-language
 52K	is-callable
 52K	isbot
 52K	util
 56K	cliui
 56K	deepmerge
 56K	form-data
 56K	has-symbols
 56K	https-proxy-agent
 56K	lru_map
 56K	string_decoder
 56K	tiny-invariant
 56K	which-typed-array
 60K	agent-base
 60K	debug
 60K	function-bind
 60K	is-arguments
 64K	get-intrinsic
 68K	cuid
 68K	is-generator-function
 72K	lie
 72K	tslib
 72K	whatwg-url
 76K	html-parse-stringify
 76K	lodash.reduce
 76K	string-width
 84K	asynckit
 92K	gauge
 92K	use-sync-external-store
 96K	hoist-non-react-statics
108K	abort-controller
112K	@web3-storage
116K	lru-cache
120K	minimist
128K	@netlify
128K	remix-i18next
144K	scheduler
156K	@emotion
164K	prop-types
180K	node-fetch
180K	readable-stream
196K	event-target-shim
196K	redux
216K	mime-db
224K	react-hot-toast
244K	source-map
268K	tr46
276K	goober
284K	bcryptjs
300K	zodix
328K	csstype
348K	remix-auth-oauth2
368K	react
384K	remix-auth
392K	tldts-core
464K	react-i18next
476K	react-phone-input-2
560K	localforage
576K	i18next-fs-backend
588K	yargs
612K	react-router-dom
672K	i18next
716K	zod
728K	react-router
872K	schema-dts
880K	qrcode
924K	source-map-support
964K	@babel
1.0M	immer
1.1M	pngjs
1.2M	remix-utils
1.3M	@sendgrid
1.3M	@sentry-internal
1.4M	@headlessui
1.4M	web-encoding
2.0M	@mollie
2.4M	@motionone
2.9M	framer-motion
3.0M	tldts
3.6M	@prisma
3.7M	@remix-run
4.4M	react-dom
4.9M	lodash
7.3M	web-streams-polyfill
8.1M	@zxing
 14M	@heroicons
 24M	date-fns
 54M	@sentry
 66M	typescript
➜  node_modules git:(main) ✗
5

From your link, I understand I could exclude some packages (Troubleshooting Next.js on Netlify | Netlify Docs). Although, I don’t get why I need to do that and mostly what will be the impact? Am I going to break part of my app without knowing it until I hit the weak spot?

Excluding typescript would make sense (it’s in my devDependencies so I’m already wondering why it’s there).

But I rely on >>> parts <<< of @sentry and date-fns (to only name the biggest libraries listed above): I don’t feel confident “excluding” them…

6

That’s strange. All your bundle has is some Node Modules? And that’s going over 80 MB?! Well, you might have to take a look at your dependencies then. Maybe you’re using too many of those and might need to consider reducing the number? Of maybe one of your dependencies has some binaries with them?

It would be worth trying to figure out the largest folder/file from this zip. If it’s all just simple text files (code), then it would be nearly impossible to make this work on Netlify without refactoring your codebase to drop some dependencies. If it’s some other large files that are being included, depending on what the files are, we might be able to guide further.

7

Hey @benjamin Were you able to solve this problem with remix? I am having the same problem and looking for some solution. I am also on windows.