fix: try to resolve styled-jsx from next context, not serverHandlerContext (#300)

* test: add yarn3 monorepo with pnpm linker smoke test

* fix: try to resolve styled-jsx from next context, not serverHandlerContext

Author: pieh

.github/actions/pnpm/action.yaml

@@ -3,17 +3,9 @@ description: Setup PNPM with Node.js and caching of the workspace
 runs:
   using: 'composite'
   steps:
-    - name: Install Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 18
-
-    - uses: pnpm/action-setup@v2
-      name: Install PNPM
-      id: pnpm-install
-      with:
-        version: 8
-        run_install: false
+    - name: setup pnpm/yarn
+      run: corepack enable
+      shell: bash
 
     - name: Get pnpm store directory
       id: pnpm-cache

src/build/content/server.ts

@@ -155,8 +155,9 @@ export const copyNextDependencies = async (ctx: PluginContext): Promise<void> =>
   // detect if it might lead to a runtime issue and throw an error upfront on build time instead of silently failing during runtime
   const require = createRequire(ctx.serverHandlerDir)
   try {
-    require.resolve('styled-jsx')
-    require.resolve('next')
+    const nextEntryAbsolutePath = require.resolve('next')
+    const nextRequire = createRequire(nextEntryAbsolutePath)
+    nextRequire.resolve('styled-jsx')
   } catch {
     throw new Error(
       'node_modules are not installed correctly, if you are using pnpm please set the public hoist pattern to: `public-hoist-pattern[]=*`.\n' +

tests/e2e/smoke.test.ts

@@ -0,0 +1,18 @@
+import { Page, expect } from '@playwright/test'
+import { test, Fixture } from '../utils/create-e2e-fixture.js'
+
+// those tests have different fixtures and can run in parallel
+test.describe.configure({ mode: 'parallel' })
+
+async function smokeTest(page: Page, fixture: Fixture) {
+  const response = await page.goto(fixture.url)
+
+  expect(response?.status()).toBe(200)
+
+  const smokeContent = await page.textContent('[data-testid="smoke"]')
+  await expect(smokeContent).toBe('SSR: yes')
+}
+
+test('yarn@3 monorepo with pnpm linker', async ({ page, yarnMonorepoWithPnpmLinker }) => {
+  await smokeTest(page, yarnMonorepoWithPnpmLinker)
+})

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+.yarn
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: pnpm

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/apps/site/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  transpilePackages: ['@repo/ui'],
+}
+
+module.exports = nextConfig

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/apps/site/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@apps/site",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build"
+  },
+  "dependencies": {
+    "@packages/ui": "*",
+    "next": "^14.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/apps/site/pages/index.js

@@ -0,0 +1,17 @@
+import { TestElement } from '@packages/ui/test.jsx'
+
+export default function Home({ ssr }) {
+  return (
+    <main>
+      <TestElement testid="smoke">SSR: {ssr ? 'yes' : 'no'}</TestElement>
+    </main>
+  )
+}
+
+export const getServerSideProps = async () => {
+  return {
+    props: {
+      ssr: true,
+    },
+  }
+}

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "yarn-monorepo-with-pnpm-linker",
+  "private": true,
+  "scripts": {
+    "build": "yarn workspace @apps/site build"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "packageManager": "[email protected]",
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ]
+}

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/packages/ui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@packages/ui",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    "./test.jsx": "./src/test.jsx"
+  },
+  "devDependencies": {
+    "react": "^18.2.0"
+  }
+}

tests/smoke-fixtures/yarn-monorepo-with-pnpm-linker/packages/ui/src/test.jsx

@@ -0,0 +1,5 @@
+'use client'
+
+export const TestElement = ({ children, testid }) => {
+  return <div data-testid={testid}>{children}</div>
+}