@workflow/next loader breaks automatic JSX transform (React is not defined during SSR)

[realestate-v2]

After enabling Workflow in next.config.mjs:

import { withWorkflow } from '@workflow/next';
export default withWorkflow({ reactStrictMode: true });

some .tsx files without "use workflow" or "use step" fail during SSR with:

ReferenceError: React is not defined

The generated server bundle contains React.createElement(...) but no import React, meaning the automatic JSX transform isn’t applied.

Findings

• The loader (@workflow/next/dist/loader.js) short-circuits by returning the raw source when no directive is found.
• Because it runs before Next’s SWC, those files skip the automatic JSX transform and fall back to the classic runtime.
• On branches without the Workflow wrapper, everything renders normally.

Expected
Files without Workflow directives should still use Next’s automatic JSX transform (react/jsx-runtime) and not require a React import.

Environment

• Next.js 16.0.1
• React 19
• @workflow/next 4.0.1-beta.6
• Node 22

---

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.

[eersnington]

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.mjs to

// @ts-check
import { withWorkflow } from "workflow/next";

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
};

export default withWorkflow(nextConfig);

[realestate-v2]

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

[imWildCat]

react-email with workflow send also has this issue.

my workaround is like adding this extra line

import * as React from "react";

[eersnington]

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!