Module not found: Can't resolve 'child_process'

[dhythm]

After upgrading to 0.44.4 for my codebase, there is an error like the below,
./node_modules/esbuild/lib/main.js shows Module not found: Can't resolve 'child_process'.

It may come from next.js (e.g. vercel/next.js#31038), but not sure why it happens.
The app created by blitz new works well with 0.44.4, so I check configs like babel.config.js, blitz-end.d.ts, blitz.config.ts and tsconfig.json. However, I haven't resolved the issue yet.

Does anyone face the same problem and resolve it?

By the way, I added

      config.resolve.fallback = {
        ...config.resolve.fallback,
        child_process: false,
        fs: false,
      }

to webpack in blitz.config.ts, then the issue is gone but another error happens 🤦‍♂️ (and the app from blitz new doesn't have this config...)

[beerose]

The error suggests that some server code landed on the client (where there's no child_process). Do you have a repo with reproduction?

[dhythm]

blitz-env.d.ts

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

babel.config.js

module.exports = {
  presets: ["blitz/babel"],
  plugins: [["styled-components", { ssr: true }], "superjson-next"],
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    // "noUncheckedIndexedAccess": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "typeRoots": ["./@types", "node_modules/@types"],
    "tsBuildInfoFile": ".tsbuildinfo"
  },
  "exclude": ["node_modules", "test/**/*.ts", "**/__tests__/**/*.ts"],
  "include": ["blitz-env.d.ts", "**/*.ts", "**/*.tsx"]
}

[dhythm]

and error is like the below,

[dhythm]

The error suggests that some server code landed on the client
I'm checking the repo with the above advice, and the error would come from app/components/core/index.ts
(Because the error is gone when I remove stuff that import app/components/core.)

export {
  Checkbox,
  Collapse,
  createTheme,
  Divider,
  Fade,
  FormControl,
  Grid,
  Menu,
  MenuItem,
  Radio as MuiRadio,
  RadioGroup as MuiRadioGroup,
  ServerStyleSheets,
  StylesProvider,
  TableCell,
  Tooltip,
  withStyles,
} from "@material-ui/core"
export type { Shadows } from "@material-ui/core/styles/shadows"
export { ErrorComponent } from "blitz"
export type { FieldState, FormApi } from "final-form"
export { FormSpy, useField, useForm, useFormState } from "react-final-form"
export { useFieldArray } from "react-final-form-arrays"
export { OnChange } from "react-final-form-listeners"
export { useTheme } from "styled-components"
export { Badge } from "./lib/Badge"
export { Balloon } from "./lib/Balloon"
export { Batch } from "./lib/Batch"
export { Box } from "./lib/Box"
export { Breadcrumb } from "./lib/Breadcrumb"
export { Button, ClipboardCopyButton, ToggleButton } from "./lib/Button"
export { Card, CardBody, CardFooter, CardHeader } from "./lib/Card"
export { Chip } from "./lib/Chip"
export { Circle } from "./lib/Circle"
export type { CircleProps } from "./lib/Circle"
export { CircularProgress } from "./lib/CircularProgress"
export { DataGrid, DgCell, ToggleButtonCell, usePaginatedQuery } from "./lib/DataGrid"
export type { CellComponentProps, PageInfo, SearchTarget } from "./lib/DataGrid"
export { CustomTextInput, DatePicker } from "./lib/DatePicker"
export { ConfirmationDialog, Dialog, DialogHeader } from "./lib/Dialog"
export { CsvUploader, FileUploader, ImageUploader } from "./lib/DnD"
export { Field, FieldArray } from "./lib/Field"
export { Fmp } from "./lib/Fmp"
export { FormControlLabel } from "./lib/FormControlLabel"
export { GridRow } from "./lib/Grid"
export { IconButton } from "./lib/IconButton"
export { IconTooltip } from "./lib/IconTooltip"
export { IndentedLabeledItem } from "./lib/IndentedLabeledItem"
export { Link } from "./lib/Link"
export { BulletList, NumberedList } from "./lib/List"
export { Loading } from "./lib/Loading"
export { Logo } from "./lib/Logo"
export { Page, PageTitle } from "./lib/Page"
export { Paper } from "./lib/Paper"
export { Radio, RadioGroup } from "./lib/Radio"
export { Snackbar, useSnackbar } from "./lib/Snackbar"
export { Stepper } from "./lib/Stepper"
export { getTextInputHeight, TextInput } from "./lib/TextInput"
export { ThemeProvider } from "./lib/ThemeProvider"
export { ClickableTypography, Typography } from "./lib/Typography"

So, now checking which export cause the error 🙏

[dhythm]

The repo would work well when I delete export { ErrorComponent } from "blitz" from app/components/core/index.ts.
Thanks for your kind advice @beerose 🙇‍♂️

[beerose]

I'm glad you solved it @dhythm, but I'm wondering why ErrorComponent caused the issue 🤔 It's a React component: https://github.com/blitz-js/blitz/blob/canary/nextjs/packages/next/pages/_error.tsx#L29, which should behave fine on the client (and most likely it's used in _app or _document in your app). Feel free to open an issue if it causes some other problems.

[whamsicore]

I'm getting the same error. I feel the issue might be related to me using Next 13, App, Router

[naxiwaynez10]

For me, i think you may have omitted the "use server" directive in one of your server code. probably an Action. This was what caused mine