Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define plugin is replacing code in node modules leading to failing builds #4271

Closed
6 tasks done
unzico opened this issue Jul 15, 2021 · 0 comments · Fixed by #5515
Closed
6 tasks done

Define plugin is replacing code in node modules leading to failing builds #4271

unzico opened this issue Jul 15, 2021 · 0 comments · Fixed by #5515

Comments

@unzico
Copy link

unzico commented Jul 15, 2021

Describe the bug

I'm using the define plugin to create a global __DEV__ var. A dependency of the project (see reproduction) includes the following code: var __DEV__ = process.env.NODE_ENV !== 'production';. Vite replaces the __DEV__ part with false during the build process. The resulting code is var false = process.env.NODE_ENV !== 'production';, which isn't valid js.

I would expect the define plugin not to touch any code outside the src/ directory, e.g. node_modules (yarn v1) or .yarn/cache (yarn v2).

Full explanation (see reproduction):
The define plugin allows the use of a global var called __DEV__. Take a look at the src/App.tsx file (line 11) to see it in action. The define plugin statically replaces this part of the code with a boolean during the build process, e.g. if (__DEV__) becomes if (false). However, the warning dependency is also defining a var named __DEV__. Vite replaces this part as well. The final code in warning.js looks something like this: var false = process.env.NODE_ENV !== "production". That's not valid js, the build fails.

Reproduction

Repo: https://github.com/unzico/vite-define-failing-build

  1. git clone and cd
  2. yarn
  3. yarn build -> fails
  4. uncomment line 9 in vite.config.ts
  5. yarn build -> doesn't fail

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz   
    Memory: 12.68 GB / 23.88 GB
  Binaries:
    Node: 12.22.1 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.4.2 => 2.4.2

Used Package Manager

yarn

Logs

$ yarn build --debug
yarn run v1.22.4
$ tsc && vite build --debug
  vite:config bundled config file loaded in 173ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'react-refresh',
  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: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     'asset-import-meta-url',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   define: { __DEV__: false },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [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     watch: null
  vite:config   },
  vite:config   configFile: 'D:/[...]/define-failing-build/vite.config.ts',
  vite:config   configFileDependencies: [ '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   root: 'D:/[...]/define-failing-build',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: 'D:\\[...]\\define-failing-build\\public',
  vite:config   cacheDir: 'D:\\[...]\\define-failing-build\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  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     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +12ms
vite v2.4.2 building for production...
✓ 20 modules transformed.
[commonjs] Unexpected keyword 'false' (17:4) in D:/[...]/define-failing-build/node_modules/warning/warning.js
file: D:/[...]/define-failing-build/node_modules/warning/warning.js:17:4
15:  */
16: 
17: var __DEV__ = process.env.NODE_ENV !== 'production';
        ^
18: 
19: var warning = function() {};
error during build:
SyntaxError: Unexpected keyword 'false' (17:4) in D:/[...]/define-failing-build/node_modules/warning/warning.js
    at Parser.pp$4.raise (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:16930:13)
    at Parser.pp$3.checkUnreserved (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:16830:12)
    at Parser.pp$3.parseIdent (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:16866:10)
    at Parser.pp$2.parseBindingAtom (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:15651:15)
    at Parser.pp$1.parseVarId (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14994:18)
    at Parser.pp$1.parseVar (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14977:10)
    at Parser.pp$1.parseVarStatement (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14843:8)
    at Parser.pp$1.parseStatement (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14593:17)
    at Parser.pp$1.parseTopLevel (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14495:21)
    at Parser.parse (D:\[...]\define-failing-build\node_modules\rollup\dist\shared\rollup.js:14287:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Validations

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
1 participant