Repository navigation
@workflow/next loader breaks automatic JSX transform (React is not defined during SSR) #212
Description
Activity
Looks like your next.config.mjs isn't correct. You need to export a nextConfig and wrap that with withWorkflow().
If you're seeing an error like this...
⨯ Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error Error: Cannot find package '@workflow/next' imported from /Users/eers/nextjs/builder-workflow-error-repro/next.config.mjs Did you mean to import "@workflow/next/dist/index.js"? at ignore-listed frames { code: 'ERR_MODULE_NOT_FOUND' }update your
next.config.mjsto// @ts-check import { withWorkflow } from "workflow/next"; /** * @type {import('next').NextConfig} */ const nextConfig = { /* config options here */ }; export default withWorkflow(nextConfig);Thank you for the quick review @eersnington
I never had failed to load next.config.mjs error
The next.config.mjs I initially shared was just an example. Here is my actual next.config.mjs:import { withSentryConfig } from '@sentry/nextjs'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; import { withWorkflow } from 'workflow/next'; const isProd = process.env.NODE_ENV === 'production'; const isVercelProd = process.env.VERCEL_ENV === 'production'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); const sentryStubPath = path.join(__dirname, 'test-shims', 'sentry-nextjs-stub.ts'); function createBaseConfig() { return { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, serverExternalPackages: serverExternals, turbopack: { resolveAlias: { ...(isProd ? {} : { '@sentry/nextjs': sentryStubPath, '@sentry/node': sentryStubPath, }), }, }, }; } const baseConfig = createBaseConfig(); const nextConfig = isVercelProd ? withSentryConfig(baseConfig, { org: 'XXX', project: 'XXX', silent: !process.env.CI, widenClientFileUpload: true, tunnelRoute: '/monitoring', disableLogger: true, automaticVercelMonitors: true, }) : baseConfig; export default withWorkflow(nextConfig);Disabling the workflow here makes it stop the "ReferenceError: React is not defined" error
react-email with workflow send also has this issue.
my workaround is like adding this extra line
import * as React from "react";
react-email with workflow send also has this issue.
my workaround is like adding this extra line
import * as React from "react";
did you also face an issue like this? could you please share your next.config.ts too cause I wasn't able to repro this. it will help alot!
Working on a fix in #504
After enabling Workflow in
next.config.mjs:some
.tsxfiles without"use workflow"or"use step"fail during SSR with:The generated server bundle contains
React.createElement(...)but noimport React, meaning the automatic JSX transform isn’t applied.Findings
@workflow/next/dist/loader.js) short-circuits by returning the raw source when no directive is found.Expected
Files without Workflow directives should still use Next’s automatic JSX transform (
react/jsx-runtime) and not require aReactimport.Environment
Disclaimer: We are newcomers and this issue analysis was created using AI. Really sorry if this is not the correct way or place to open this issue.