process.env.NODE_ENV !== "production" statements in output makes it incompatible in browser

[baptisteArno]

Description

When I bundle a package that imports @ark-ui/solid with the following Rollup config:

import resolve from '@rollup/plugin-node-resolve'
import terser from '@rollup/plugin-terser'
import { babel } from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
import typescript from '@rollup/plugin-typescript'
import { typescriptPaths } from 'rollup-plugin-typescript-paths'
import fs from 'fs'

const extensions = ['.ts', '.tsx']

const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))
const packageVersion = packageJson.version
const preamble = `// v${packageVersion}`

const indexConfig = {
  input: './src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'es',
  },
  onwarn,
  plugins: [
    resolve({ extensions }),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      presets: ['solid', '@babel/preset-typescript'],
      extensions,
    }),
    typescriptPaths({ preserveExtensions: true }),
    typescript(),
    postcss({
      plugins: [autoprefixer(), tailwindcss()],
      extract: false,
      modules: false,
      autoModules: false,
      minimize: true,
      inject: false,
    }),
    terser({
      format: { preamble },
    }),
  ],
}

const configs = [
  indexConfig,
  {
    ...indexConfig,
    input: './src/web.ts',
    output: {
      file: 'dist/web.js',
      format: 'es',
    },
  },
]

function onwarn(warning, warn) {
  if (
    warning.code === 'CIRCULAR_DEPENDENCY' &&
    warning.ids.some((id) => id.includes('@internationalized+date'))
  ) {
    return
  }

  warn(warning.message)
}

export default configs

The produced web.js file contains process.env.NODE_ENV !== "production" statements that come directly from the dist files from ark solid package.

When importing that file as a module in a browser, it will say "process is not defined"

Link to Reproduction (or Detailed Explanation)

https://github.com/baptisteArno/typebot.io

Steps to Reproduce

1. cd to packages/embeds/js
2. Build pnpm run build
3. Inspect web.js package

Ark UI Version

3.3.0

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[segunadebayo]

I've checked both the src and dist folders, and cannot find any reference to process.env in the code. It's only referenced in the website which is not relevant.

Not sure where that code is coming from. Perhaps it's injected by the build process on your end?

[baptisteArno]

@segunadebayo Thanks for the help, after more debugging, it looks like it comes from Zag (https://github.com/chakra-ui/zag/blob/266039c266265a3868d35f46d2564ea954cfe12c/packages/store/src/proxy.ts#L6)

Here is the full bundled file (not minified), if that can provide more context: https://gist.github.com/baptisteArno/dc45ea3aa0bdde8b405acc0cebe1eb57

Should I open an issue on zag repo then?

[baptisteArno]

chakra-ui/zag#1641