Vite 2.8+ make gradient-parser not importable #6994

hongquan · 2022-02-19T06:27:08Z

Describe the bug

I use this way to import gradient-parser:

import { parse } from 'gradient-parser'

parse('linear-gradient(blue, pink)')

In Vite 2.7, it works well, but since Vite 2.8, it doesn't work. Creating a minimal Vue app, I got this error in browser console:

Uncaught TypeError: GradientParser is undefined

Comparing code generated by Vite 2.7 and Vite 2.8, I found that with Vite 2.8, this line is lost:

var GradientParser = (GradientParser || {});

Reproduction

https://stackblitz.com/edit/vitejs-vite-ohr9np?file=main.js&terminal=dev

System Info

System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 4.49 GB / 11.59 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.1 - /usr/bin/npm
  Browsers:
    Brave Browser: 98.1.35.103
    Chrome: 98.0.4758.102
    Firefox: 97.0
  npmPackages:
    @vitejs/plugin-vue: ^2.2.0 => 2.2.2 
    vite: ^2.8.4 => 2.8.4

Used Package Manager

yarn

Logs

$ vite --debug
  vite:config bundled config file loaded in 35.00ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/home/quan/Works/Test/ViteCommonJS/trygradientparser/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     server: {}
  vite:config   },
  vite:config   root: '/home/quan/Works/Test/ViteCommonJS/trygradientparser',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/quan/Works/Test/ViteCommonJS/trygradientparser/public',
  vite:config   cacheDir: '/home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  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     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  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     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object],
  vite:config       [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +4ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.8.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 252ms.

  vite:time 2.35ms / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 17.59ms /index.html +85ms
  vite:resolve 1.96ms /@vite/client -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 0.26ms /src/main.ts -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/src/main.ts +6ms
  vite:load 4.57ms [fs] /@vite/client +0ms
  vite:resolve 0.64ms @vite/env -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/vite/dist/client/env.mjs +11ms
  vite:resolve 0.25ms /node_modules/vite/dist/client/env.mjs -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/vite/dist/client/env.mjs +0ms
  vite:import-analysis 5.87ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +0ms
  vite:transform 9.88ms /@vite/client +0ms
  vite:time 21.98ms /@vite/client +61ms
  vite:load 14.67ms [fs] /src/main.ts +14ms
  vite:load 3.32ms [fs] /node_modules/vite/dist/client/env.mjs +2ms
  vite:import-analysis 0.12ms [no imports] node_modules/vite/dist/client/env.mjs +6ms
  vite:transform 0.97ms /node_modules/vite/dist/client/env.mjs +6ms
  vite:resolve 0.13ms vue -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/vue.js?v=15df813a +15ms
  vite:resolve 0.25ms /node_modules/.vite/vue.js?v=15df813a -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/vue.js?v=15df813a +0ms
  vite:resolve 0.42ms ./App.vue -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/src/App.vue +1ms
  vite:resolve 0.18ms /src/App.vue -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/src/App.vue +1ms
  vite:import-analysis 2.72ms [2 imports rewritten] src/main.ts +9ms
  vite:transform 12.86ms /src/main.ts +9ms
  vite:time 29.80ms /src/main.ts +16ms
  vite:cache [304] /node_modules/vite/dist/client/env.mjs +0ms
  vite:time 0.66ms /node_modules/vite/dist/client/env.mjs +6ms
  vite:load 4.20ms [fs] /node_modules/.vite/vue.js?v=15df813a +20ms
  vite:resolve 0.27ms ./chunk-76J2PTFD.js -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/chunk-76J2PTFD.js +30ms
  vite:resolve 0.31ms /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +1ms
  vite:import-analysis 14.83ms [1 imports rewritten] node_modules/.vite/vue.js?v=15df813a +38ms
  vite:transform 16.32ms /node_modules/.vite/vue.js?v=15df813a +38ms
  vite:load 35.73ms [fs] /src/App.vue +31ms
  vite:cache [304] /node_modules/.vite/vue.js?v=15df813a +82ms
  vite:time 0.41ms /node_modules/.vite/vue.js?v=15df813a +82ms
  vite:load 50.73ms [fs] /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +50ms
  vite:import-analysis 1.95ms [no imports] node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +55ms
  vite:transform 2.34ms /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +55ms
  vite:resolve 0.04ms gradient-parser -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/gradient-parser.js?v=15df813a&es-interop +68ms
  vite:resolve 0.20ms /node_modules/.vite/gradient-parser.js?v=15df813a&es-interop -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/gradient-parser.js?v=15df813a&es-interop +1ms
  vite:resolve 0.10ms /src/App.vue?vue&type=style&index=0&lang.css -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/src/App.vue?vue&type=style&index=0&lang.css +5ms
  vite:resolve 0.13ms /@id/plugin-vue:export-helper -> null +3ms
  vite:hmr [self-accepts] src/App.vue +0ms
  vite:resolve 0.10ms /node_modules/.vite/gradient-parser.js?v=15df813a -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/gradient-parser.js?v=15df813a +0ms
  vite:import-analysis 10.14ms [4 imports rewritten] src/App.vue +16ms
  vite:transform 67.91ms /src/App.vue +16ms
  vite:cache [memory] /node_modules/.vite/vue.js?v=15df813a +0ms
  vite:load 0.79ms [plugin] /src/App.vue?vue&type=style&index=0&lang.css +21ms
  vite:load 1.84ms [plugin] plugin-vue:export-helper +2ms
  vite:import-analysis 0.02ms [no imports] plugin-vue:export-helper +5ms
  vite:transform 0.20ms plugin-vue:export-helper +5ms
  vite:load 4.28ms [fs] /node_modules/.vite/gradient-parser.js?v=15df813a +2ms
  vite:import-analysis 0.99ms [1 imports rewritten] node_modules/.vite/gradient-parser.js?v=15df813a +3ms
  vite:transform 1.48ms /node_modules/.vite/gradient-parser.js?v=15df813a +3ms
  vite:cache [memory] /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +7ms
  vite:time 28.22ms /src/App.vue +29ms
  vite:cache [304] /node_modules/.vite/gradient-parser.js?v=15df813a +42ms
  vite:time 0.60ms /node_modules/.vite/gradient-parser.js?v=15df813a +13ms
  vite:hmr [self-accepts] src/App.vue?vue&type=style&index=0&lang.css +34ms
  vite:import-analysis 0.32ms [0 imports rewritten] src/App.vue?vue&type=style&index=0&lang.css +25ms
  vite:transform 30.38ms /src/App.vue?vue&type=style&index=0&lang.css +25ms
  vite:cache [304] /src/App.vue?vue&type=style&index=0&lang.css +23ms
  vite:time 0.71ms /src/App.vue?vue&type=style&index=0&lang.css +23ms
  vite:cache [304] plugin-vue:export-helper +11ms
  vite:time 3.41ms /@id/plugin-vue:export-helper +11ms
  vite:cache [304] /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +9ms
  vite:time 0.81ms /node_modules/.vite/chunk-76J2PTFD.js?v=15df813a +9ms
  vite:resolve 0.21ms /node_modules/.vite/chunk-76J2PTFD.js -> /home/quan/Works/Test/ViteCommonJS/trygradientparser/node_modules/.vite/chunk-76J2PTFD.js +144ms
  vite:time 1.59ms /node_modules/.vite/chunk-76J2PTFD.js.map +79ms
  vite:time 1.22ms /node_modules/.vite/chunk-76J2PTFD.js.map +194ms

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

Niputi · 2022-02-19T11:57:44Z

issue with esbuild - https://stackblitz.com/edit/node-ngpy2a?file=package.json

tikidave · 2022-03-08T19:48:15Z

Reproduced this issue as well; vue3-colorpicker depends on gradient-parser and fails with the same error.

main.js

import Vue3ColorPicker from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';

createApp(App).use(Vue3ColorPicker).mount('#app');

console error on load:

node.js:7 Uncaught TypeError: Cannot set properties of undefined (setting 'stringify')
    at node_modules/.pnpm/gradient-parser@1.0.2/node_modules/gradient-parser/build/node.js (node.js:7:16)
    at __require2 (chunk-6DBBYCL5.js?v=25197372:19:50)
    at index.es.js:33:34

debug point:

Pinning vite to semver 2.7.13 fixed the issue for me.

sapphi-red · 2022-03-11T16:15:28Z

FYI this is the issue in esbuild repo. evanw/esbuild#2080

sapphi-red · 2022-03-15T07:24:19Z

I confirmed this was fixed with esbuild 0.14.26.

hongquan added the pending triage label Feb 19, 2022

Niputi added bug: upstream Bug in a dependency of Vite regression The issue only appears after a new release labels Feb 19, 2022

github-actions bot removed the pending triage label Feb 19, 2022

sapphi-red mentioned this issue Mar 15, 2022

fix: update to esbuild 0.14.27, fix #6994 #7320

Merged

4 tasks

patak-dev linked a pull request Mar 15, 2022 that will close this issue

fix: update to esbuild 0.14.27, fix #6994 #7320

Merged

4 tasks

patak-dev closed this as completed in #7320 Mar 15, 2022

patak-dev added a commit that referenced this issue Mar 15, 2022

fix: update to esbuild 0.14.27, fix #6994 (#7320)

65aaeee

github-actions bot locked and limited conversation to collaborators Mar 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite 2.8+ make gradient-parser not importable #6994

Vite 2.8+ make gradient-parser not importable #6994

hongquan commented Feb 19, 2022

Niputi commented Feb 19, 2022

tikidave commented Mar 8, 2022 •

edited

sapphi-red commented Mar 11, 2022

sapphi-red commented Mar 15, 2022

Vite 2.8+ make gradient-parser not importable #6994

Vite 2.8+ make gradient-parser not importable #6994

Comments

hongquan commented Feb 19, 2022

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

Niputi commented Feb 19, 2022

tikidave commented Mar 8, 2022 • edited

sapphi-red commented Mar 11, 2022

sapphi-red commented Mar 15, 2022

tikidave commented Mar 8, 2022 •

edited