Unable to build issue with Vite's Modes build

[Yanren1225]

Describe the bug
I'm using Vite's environment variables and then build -mode to build a different version, but something unexpected happens

To Reproduce
Steps to reproduce the behavior:

Use yarn build --mode xxx

Expected behavior
Normal build success

Screenshots

Hints on build errors

$ yarn build --mode prod-test    
yarn run v1.22.19
$ vite build --mode prod-test
vite v3.0.9 building for prod-test...
✓ 1386 modules transformed.
'default' is not exported by node_modules/lodash.merge/index.js, imported by node_modules/@hope-ui/solid/dist/index.mjs
file: /Users/yanren/Code/caldance-market/node_modules/@hope-ui/solid/dist/index.mjs:24:7
22: import { createStore } from "solid-js/store";
23: import { createStitches, defaultThemeMap } from "@stitches/core";
24: import merge from "lodash.merge";
           ^
25: import { Transition, TransitionGroup } from "solid-transition-group";
26: import { createFocusTrap } from "focus-trap";
error during build:
Error: 'default' is not exported by node_modules/lodash.merge/index.js, imported by node_modules/@hope-ui/solid/dist/index.mjs
    at error (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
    at Module.error (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:12412:16)
    at Module.traceVariable (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:12771:29)
    at ModuleScope.findVariable (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:11423:39)
    at FunctionScope.findVariable (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:6355:38)
    at ChildScope.findVariable (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:6355:38)
    at Identifier.bind (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:7422:40)
    at CallExpression.bind (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:5252:23)
    at CallExpression.bind (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:8918:15)
    at ConditionalExpression.bind (file:///Users/yanren/Code/caldance-market/node_modules/rollup/dist/es/shared/rollup.js:5252:23)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json

{
  "name": "",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "@rollup/plugin-inject": "^4.0.4",
    "@stitches/core": "^1.2.8",
    "@typescript-eslint/eslint-plugin": "^5.35.1",
    "@typescript-eslint/parser": "^5.35.1",
    "buffer": "^6.0.3",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "lodash.merge": "^4.6.2",
    "prettier": "^2.7.1",
    "typescript": "^4.8.2",
    "unplugin-auto-import": "^0.11.2",
    "util": "^0.12.4",
    "vite": "^3.0.9",
    "vite-plugin-commonjs": "^0.5.2",
    "vite-plugin-solid": "^2.3.0"
  },
  "dependencies": {
    "@coinbase/wallet-sdk": "^3.5.1",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
    "@ethers-ancillary/bsc": "^0.0.3",
    "@hope-ui/solid": "^0.6.7",
    "@types/node": "^18.7.13",
    "@walletconnect/web3-provider": "^1.8.0",
    "dayjs": "^1.11.5",
    "ethers": "^5.7.0",
    "evm-bn": "^1.1.2",
    "gsap": "^3.11.0",
    "mitt": "^3.0.0",
    "postcss-pxtorem": "^6.0.0",
    "rollup-plugin-polyfill-node": "^0.10.2",
    "sass": "^1.54.5",
    "solid-app-router": "^0.4.2",
    "solid-js": "^1.5.1",
    "web3modal": "^1.9.9"
  }
}

vite.config.ts

import solidPlugin from 'vite-plugin-solid'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
import inject from '@rollup/plugin-inject'
// import nodePolyfills from 'rollup-plugin-node-polyfills'
import nodePolyfills from 'rollup-plugin-polyfill-node'
import postCssPxToRem from 'postcss-pxtorem'
import commonjs from 'vite-plugin-commonjs'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'

const production = process.env.NODE_ENV === 'production'

export default defineConfig({
  plugins: [
    solidPlugin(),
    commonjs(),
    AutoImport({
      imports: ['solid-js', 'solid-app-router'],
      dts: 'src/auto-import.d.ts',
      eslintrc: {
        enabled: true,
      },
    }),
    !production &&
      nodePolyfills({
        include: [
          'node_modules/**/*.js',
          new RegExp('node_modules/.vite/.*js'),
        ],
      }),
  ],
  // base: production ? '/market' : '/',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      http: 'rollup-plugin-node-polyfills/polyfills/http',
      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
      https: 'rollup-plugin-node-polyfills/polyfills/http',
      util: 'rollup-plugin-node-polyfills/polyfills/util',
      sys: 'util',
      url: 'rollup-plugin-node-polyfills/polyfills/url',
      querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis',
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  server: {
    port: 3000,
  },
  build: {
    rollupOptions: {
      plugins: [nodePolyfills(), inject({ Buffer: ['buffer', 'Buffer'] })],
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (
              id
                .toString()
                .split('node_modules/')[1]
                .split('/')[0]
                .includes('web3modal')
            ) {
              return 'web3modal'
            } else {
              return 'index'
            }
          }
        },
      },
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 100,
          propList: ['*'],
          unitPrecision: 5,
          replace: true,
          mediaQuery: false,
          minPixelValue: 2,
          selectorBlackList: ['keep-'],
        }),
      ],
    },
  },
})

Desktop (please complete the following information):

• OS: macOS 12.4
• Browser Firefox
• Version 105.0b2

Additional context
Add any other context about the problem here.

[Yanren1225]

If I use yarn build directly, it works fine

[fabien-ml]

Hi, sorry for the late response, unfortunately i'm not skilled enough about build tool to help

[Yanren1225]

Hi, sorry for the late response, unfortunately i'm not skilled enough about build tool to help

That's fine, I've used vite's envDir function to achieve a similar effect. I'm not quite sure what the cause of the problem is at the moment though, so I'll look into it next time I come across it.

[fabien-ml]

I think its the way lodash.merge is bundled, this dependency will be removed in 1.0, maybe it will solve the issue.

[Yanren1225]

I think its the way lodash.merge is bundled, this dependency will be removed in 1.0, maybe it will solve the issue.

OK, I'll try again with the 1.0 release