vite build behaves different than vite for local development and throws an unexpected token error on a seemingly benign node_module dependency

Describe the bug

Expectation is that running vite for local development will behave the same, or throw the same errors as when performing vite build. This is not the case. Running vite for local development works great, with no issues. However, running vite build throws an obtuse error on some seemingly benign transitive node_modules dependency.

Upon further inspection of the node_module dependency that seems to be causing the error (according to the logs), the code looks relatively normal (see below):

// File
// node_modules/@hawkins/react-primitives/node_modules/react-use/esm/useDrop.js

import { __spreadArrays } from "tslib";
import { useState, useMemo, useCallback, useEffect } from 'react';
var noop = function () { };
var createProcess = function (options) { return function (dataTransfer, event) {
    var uri = dataTransfer.getData('text/uri-list');
    if (uri) {
        (options.onUri || noop)(uri, event);
        return;
    }
    if (dataTransfer.files && dataTransfer.files.length) {
        (options.onFiles || noop)(Array.from(dataTransfer.files), event);
        return;
    }
    if (event.clipboardData) {
        var text = event.clipboardData.getData('text');
        (options.onText || noop)(text, event);
        return;
    }
}; };
var useDrop = function (options, args) {
    if (options === void 0) { options = {}; }
    if (args === void 0) { args = []; }
    var onFiles = options.onFiles, onText = options.onText, onUri = options.onUri;
    var _a = useState(false), over = _a[0], setOverRaw = _a[1];
    var setOver = useCallback(setOverRaw, []);
    var process = useMemo(function () { return createProcess(options); }, [onFiles, onText, onUri]);
    useEffect(function () {
        var onDragOver = function (event) {
            event.preventDefault();
            setOver(true);
        };
        var onDragEnter = function (event) {
            event.preventDefault();
            setOver(true);
        };
        var onDragLeave = function () {
            setOver(false);
        };
        var onDragExit = function () {
            setOver(false);
        };
        var onDrop = function (event) {
            event.preventDefault();
            setOver(false);
            process(event.dataTransfer, event);
        };
        var onPaste = function (event) {
            process(event.clipboardData, event);
        };
        document.addEventListener('dragover', onDragOver);
        document.addEventListener('dragenter', onDragEnter);
        document.addEventListener('dragleave', onDragLeave);
        document.addEventListener('dragexit', onDragExit);
        document.addEventListener('drop', onDrop);
        if (onText) {
            document.addEventListener('paste', onPaste);
        }
        return function () {
            document.removeEventListener('dragover', onDragOver);
            document.removeEventListener('dragenter', onDragEnter);
            document.removeEventListener('dragleave', onDragLeave);
            document.removeEventListener('dragexit', onDragExit);
            document.removeEventListener('drop', onDrop);
            document.removeEventListener('paste', onPaste);
        };
    }, __spreadArrays([process], args));
    return { over: over };
};
export default useDrop;

I’ve attempted to exclude the listed dependencies via the build.commonjsOptions.exclude field, with no success.

Reproduction

Clone this repo and follow the steps for the Failure Case in the Readme https://github.com/benduran/vite-bug-2817-repro

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 AMD Ryzen 9 3950X 16-Core Processor
    Memory: 127.48 MB / 32 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  npmPackages:
    vite: 2.1.5 => 2.1.5

Used package manager: yarn@1.22.10

Logs

  vite:config bundled config file loaded in 50ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge18', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: '/home/bduran/Documents/dev/project/packages/iris/client/build',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: true,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   define: { process: { env: [Object] } },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'react-refresh',
  vite:config     'vite:tsconfig-paths',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:svgr',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   resolve: {
  vite:config     dedupe: undefined,
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext', 'main' ],
  vite:config     alias: [ [Object] ]
  vite:config   },
  vite:config   root: '/home/bduran/Documents/dev/project/packages/iris/client',
  vite:config   configFile: '/home/bduran/Documents/dev/project/packages/iris/client/vite.config.ts',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   base: '/',
  vite:config   publicDir: '/home/bduran/Documents/dev/project/packages/iris/client/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/home/bduran/Documents/dev/project/packages/iris/client/node_modules/.vite',
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +6ms
vite v2.1.5 building for production...
✓ 887 modules transformed.
[commonjs] Unexpected token (26:27) in /home/bduran/Documents/dev/project/node_modules/@hawkins/react-primitives/node_modules/react-use/esm/useDrop.js
file: /home/bduran/Documents/dev/project/node_modules/@hawkins/react-primitives/node_modules/react-use/esm/useDrop.js:26:27
24:     var _a = useState(false), over = _a[0], setOverRaw = _a[1];
25:     var setOver = useCallback(setOverRaw, []);
26:     var process = useMemo(function () { return createProcess(options); }, [onFiles, onText, onUri]);
                               ^
27:     useEffect(function () {
28:         var onDragOver = function (event) {
error during build:
SyntaxError: Unexpected token (26:27) in /home/bduran/Documents/dev/project/node_modules/@hawkins/react-primitives/node_modules/react-use/esm/useDrop.js
    at Object.pp$4.raise (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15630:13)
    at Object.pp.unexpected (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:13322:8)
    at Object.pp$3.parseIdent (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15581:10)
    at Object.parseIdent (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19648:27)
    at Object.parseIdent (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19730:27)
    at Object.pp$2.parseBindingAtom (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14396:15)
    at Object.pp$2.parseMaybeDefault (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14431:23)
    at Object.pp$3.parsePropertyValue (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15333:35)
    at Object.pp$3.parseProperty (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15324:8)
    at Object.pp$3.parseObj (/home/bduran/Documents/dev/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15270:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /home/bduran/.newt-cache/node-versions/n/versions/node/14.16.0/bin/node
Arguments: /home/bduran/.newt-cache/yarn-versions/1.22.10/lib/cli.js build
Directory: /home/bduran/Documents/dev/project/packages/iris/client
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[benduran]

hi @Shinigami92 👋 That’s correct, this is using the react-ts template. I’ll work on trying to get a sample repo where the failure occurs. Happy to issue a PR if I can find the root, as well. This “feels” like an issue not necessarily with Vite, but perhaps with the Rollup config being used, as this occurs during the transformation process, hence why the error doesn’t manifest during local development (my educated guess)

[benduran]

Fixed on our end. Ended up changing the usage of the define() function to render out the string representing process.env.SOMETHING versus { process: { env: { SOMETHING: 'some-val' } } }