Remix and Mantine (latest) failed with AWS deployment (Grunge-Stack)

JasonWeiseUnreal commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Mantine appears to work fine with Remix (Grunge-Stack) on local development environment but when deployed to AWS {"message":"Internal Server Error"} is the result when viewing the site.

I have completely removed Mantine from the project and the deployment works and the site on AWS works as expected with the default Remix "Grunge-Stack".

If I replace my entry.server.tsx with the following it works fine still when deployed (as per Matine Remix instructions) - Note without ANY Mantine components on any pages:

import { renderToString } from 'react-dom/server';
import { RemixServer } from '@remix-run/react';
import type { EntryContext } from '@remix-run/node';
import { injectStylesIntoStaticMarkup } from '@mantine/ssr';

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
  responseHeaders.set('Content-Type', 'text/html');

  return new Response(`<!DOCTYPE html>${injectStylesIntoStaticMarkup(markup)}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

... but... As soon as I even add a Mantine

rtivital commented 2 years ago

Seems like you did not install @mantine/hooks package.

JasonWeiseUnreal commented 2 years ago

Hi @rtivital

Yeah sure have (installed @mantine/hooks) , otherwise it wouldn't work locally I guess, it is only once deployed it doesn't work. package.json:

 "dependencies": {
    "@architect/architect": "^10.3.3",
    "@architect/functions": "^5.1.0",
    "@mantine/core": "^4.2.11",
    "@mantine/hooks": "^4.2.11",
    "@mantine/ssr": "^4.2.11",
    "@remix-run/architect": "^1.6.1",
    "@remix-run/node": "^1.6.1",
    "@remix-run/react": "^1.6.1",
    "@remix-run/server-runtime": "^1.6.1",
    "bcryptjs": "2.4.3",
    "cuid": "^2.1.8",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "tiny-invariant": "^1.2.0",
    "tabler-icons-react": "^1.51.0"
  },
  "devDependencies": {
    "@faker-js/faker": "^6.3.1",
    "@remix-run/dev": "^1.6.1",
    "@remix-run/eslint-config": "^1.6.1",
    "@testing-library/cypress": "^8.0.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/user-event": "^14.2.0",
    "@types/architect__functions": "^3.13.6",
    "@types/bcryptjs": "2.4.2",
    "@types/eslint": "^8.4.3",
    "@types/react": "^17.0.45",
    "@types/react-dom": "^17.0.17",
    "@vitejs/plugin-react": "^1.3.2",
    "c8": "^7.11.3",
    "cross-env": "^7.0.3",
    "cypress": "^10.0.3",
    "esbuild": "^0.14.43",
    "eslint": "^8.17.0",
    "eslint-config-prettier": "^8.5.0",
    "happy-dom": "^5.2.0",
    "mock-aws-s3": "^4.0.2",
    "msw": "^0.42.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.1.11",
    "start-server-and-test": "^1.14.0",
    "tailwindcss": "^3.1.0",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.3",
    "vite-tsconfig-paths": "^3.5.0",
    "vitest": "^0.14.1"
  },

rtivital commented 2 years ago

I do not know where the issue is – the error says that it did not install @mantine/hooks package, maybe there was an error during packages installation

cayter commented 2 years ago

The Remix grunge stack is using arc to compile and deploy your code to AWS Lambda (the generated Remix server.js) + S3 (public folder build).

arc only supports npm as it's installing and hydrating (copying) the node modules into each Lambda handler following npm's way of resolving node modules.

For your current issue, you might wanna check locally with arc deploy --dry-run to see why it doesn't correctly hydrate the node modules into your Lambda function handler folder or check if you're facing this same issue.

Aside from that, the way how arc uploads the node modules now is also not scalable. As soon as you add more dependencies to your Remix project, the Lambda function code size will grow crazily and very soon hit the 250MB Lambda code size limit. This is where you strongly feel the sarcasm of node_modules being a black hole.

As for myself, I've moved away from arc and built my own toolkit which bundles the Remix code into 1 single server.js without including node modules as part of the Lambda function and so far our website server.js is only around 700KB. Hope the above helps.

rtivital commented 2 years ago

Seems like an issue is not related to Mantine, closing it

mantinedev / mantine

Remix and Mantine (latest) failed with AWS deployment (Grunge-Stack) #1694

What package has an issue

Describe the bug

In which browser did the problem occur

If possible, please include a link to a codesandbox with the reproduced problem

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Possible fix