Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with @nx/remix generator and meta tags #23037

Closed
1 of 4 tasks
rnreekez opened this issue Apr 26, 2024 · 0 comments · Fixed by #23169
Closed
1 of 4 tasks

Issue with @nx/remix generator and meta tags #23037

rnreekez opened this issue Apr 26, 2024 · 0 comments · Fixed by #23169
Assignees
@Coly010
Labels
scope: remix type: bug

Comments

@rnreekez
Copy link

Current Behavior

I ran into an odd issue this week where my remix application was working fine locally but when deployed on AWS via lambda, it began throwing a lot of (seemingly random) hydration errors. As it turns out, the base app created by the remix generator has an issue with how meta tags are defined within its root.tsx file. I can't necessarily reproduce the issue locally but I can say the base file deviates from how remix recommends them be authored: https://remix.run/docs/en/main/route/meta#global-meta

Expected Behavior

The application should render with the following metatags.

<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

GitHub Repo

No response

Steps to Reproduce

  1. Generate a base application and start the server.
  2. Open the base page and view the generated content.
  3. Notice the following, basically required, tags are missing from within the head tags of our rendered output
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.12.1
OS     : darwin-arm64
pnpm   : 8.15.6

nx (global)        : 18.1.2
nx                 : 18.3.3
@nx/js             : 18.3.3
@nx/jest           : 18.3.3
@nx/linter         : 18.3.3
@nx/eslint         : 18.3.3
@nx/workspace      : 18.3.3
@nx/eslint-plugin  : 18.3.3
@nx/nest           : 18.3.3
@nx/node           : 18.3.3
@nx/remix          : 18.3.3
@nrwl/tao          : 18.1.2
@nx/web            : 18.3.3
@nx/webpack        : 18.3.3
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/remix/plugin
@nx/eslint/plugin
---------------------------------------
Community plugins:
@nx-plus/docusaurus    : 15.0.0-rc.0
@nx-tools/nx-container : 5.3.1
@rbnx/webdriverio      : 1.6.0
---------------------------------------
The following packages should match the installed version of nx
  - @nrwl/tao@18.1.2

To fix this, run `nx migrate nx@18.3.3`

Failure Logs

No response

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

There are two options for resolving.

Option 1 (Recommended): Since these tags are expected to be on all pages we can include them within the base app component. This also avoids possible merging issues (noted here: https://remix.run/docs/en/main/route/meta#global-meta).
The content at https://github.com/nrwl/nx/blob/master/packages/remix/src/generators/application/files/common/app/root.tsx__tmpl__#L20-L23

would become

<head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>

or we can properly format the MetaFunction here: https://github.com/nrwl/nx/blob/master/packages/remix/src/generators/application/files/common/app/root.tsx__tmpl__#L11-L15

export const meta: MetaFunction = () => [
	{ charset: "utf-8" },
	{ title: "Tricentis-Identity Realm " },
	{ name: "viewport", content: "width=device-width,initial-scale=1" }
];

Personally, i would go w/ the former since that's the recommendation by remix. More than happy to open a PR, just let me know if we're in agreement on option 1.
Coly010 added a commit that referenced this issue May 3, 2024
@Coly010
fix(remix): ensure default meta tags are always present for generated…
0cbef53 
… applications #23037
@Coly010 Coly010 mentioned this issue May 3, 2024
Merged
Coly010 added a commit that referenced this issue May 3, 2024
@Coly010
fix(remix): ensure default meta tags are always present for generated…
03e0071 
… applications #23037
Coly010 added a commit that referenced this issue May 3, 2024
@Coly010
fix(remix): ensure default meta tags are always present for generated…
7bd40bc 
… applications #23037 (#23169)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
Meta tags that are required and recommended for remix apps are not being
rendered correctly when deployed to serverless locations such as AWS
Lambda
We do not attach them in the way that Remix recommends

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Attach these meta tags in the method that remix itself recommends to
ensure maximum compatibility

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #23037
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Coly010 Coly010

Labels
scope: remix type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(remix): ensure default meta tags are always present for generated applications #23037 nrwl/nx
3 participants
@rnreekez @AgentEnder @Coly010