fix(nextjs): styled-jsx and styled-components should have "use client directive" (#16440)

2023-04-20 12:35:25 -06:00 · 2023-04-20 12:35:25 -06:00 · 5e0893a38f
commit 5e0893a38f
parent fb54f67581
2 changed files with 4 additions and 1 deletions
--- a/packages/next/src/generators/application/application.spec.ts
+++ b/packages/next/src/generators/application/application.spec.ts
@ -401,7 +401,7 @@ describe('app', () => {
          {},
          `
          [
-            "plugin:@nx/nx/react-typescript",
+            "plugin:@nx/react-typescript",
            "next",
            "next/core-web-vitals",
          ]
--- a/packages/next/src/generators/application/files/app/page.tsxtmpl
+++ b/packages/next/src/generators/application/files/app/page.tsxtmpl
@ -1,3 +1,6 @@
+<% if (styledModule && (styledModule === 'styled-jsx' || styledModule === 'styled-components'))  {%>
+'use client';
+<% }%> 
 <% if (styledModule && styledModule !== 'styled-jsx') {
  var wrapper = 'StyledPage';
 %>import styled from '<%= styledModule %>';<% } else {