When using with Vite 4.3.4 and newer plugin breaks #289

Kretiss · 2023-05-05T13:34:26Z

Hey, I am experiencing weird error and I really dont know from where it comes from. Everythink works fine with Vite version 3.4.3 and lower, but from version 3.4.4 it always throws error at the end of the build, right after source maps list.

Here is printscreen of that error:

Remove of plugin in vite.config.ts fixes this issue.
Does anyone know what could be the solution here? Thanks!

Here is dependencies list


 "dependencies": {
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.17",
    "@react-spring/web": "^9.7.2",
    "@sentry/react": "^7.51.0",
    "@tanstack/react-query": "^4.29.5",
    "@tanstack/react-query-devtools": "^4.29.6",
    "@types/react-tag-autocomplete": "^6.3.0",
    "clsx": "^1.2.1",
    "i18next": "^22.4.15",
    "i18next-browser-languagedetector": "^7.0.1",
    "immer": "^10.0.1",
    "js-base64": "^3.7.5",
    "jwt-decode": "^3.1.2",
    "ky": "^0.33.3",
    "lodash": "^4.17.21",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-checkbox-tree": "^1.8.0",
    "react-compound-slider": "^3.4.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-helmet-async": "^1.3.0",
    "react-i18next": "^12.2.2",
    "react-paginate": "^8.2.0",
    "react-router-dom": "^6.11.1",
    "react-table": "^7.8.0",
    "react-tag-autocomplete": "^6.3.0",
    "react-toastify": "^9.1.2",
    "react-use-measure": "^2.1.1",
    "store": "^2.0.12",
    "tslib": "^2.5.0",
    "uuid": "^9.0.0",
    "zod": "^3.21.4",
    "zustand": "^4.3.8"
  },
  "devDependencies": {
    "@headlessui/tailwindcss": "^0.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/lodash": "^4.14.194",
    "@types/react": "^18.2.5",
    "@types/react-dom": "^18.2.3",
    "@types/react-router-dom": "^5.3.3",
    "@types/store": "^2.0.2",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.39.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^8.0.3",
    "jsdom": "^22.0.0",
    "lint-staged": "^13.2.2",
    "postcss": "^8.4.23",
    "postcss-import": "^15.1.0",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "rimraf": "^5.0.0",
    "tailwind-scrollbar": "^3.0.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.4",
    "vite": "4.3.4",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-sentry": "^1.2.0",
    "vite-plugin-svgr": "^3.2.0",
    "vitest": "^0.31.0"
  },

And plugin setup:

/// <reference types="vite/client" />
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import eslintPlugin from 'vite-plugin-eslint'
import viteSentry from 'vite-plugin-sentry'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }

  return {
    plugins: [
      react(),
      svgr(),
      eslintPlugin(),
      viteSentry({
        url: 'https://....',
        authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
        org: 'inqool',
        project: 'numisdeal-frontend',
        deploy: {
          env: 'production',
        },
        setCommits: {
          auto: true,
          ignoreMissing: true,
        },
        sourceMaps: {
          include: ['./dist/assets'],
          ignore: ['node_modules'],
          ignoreFile: './.gitignore',
          urlPrefix: '~/assets',
        },
      }),
    ],
    build: {
      // required for sentry: tells vite to create source maps
      sourcemap: true,
    },
    server: {
      port: 3000,
      host: true,
    },
  }
})

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

ikenfin · 2023-05-05T16:18:55Z

Hi! I tried to reproduce but no luck here (tried on vite 4.3.4 and 4.3.5) :(

WouterSioen · 2023-05-10T07:31:10Z

I'm having the same problem here, when upgrading from 4.3.3 to 4.3.5. The problem is fixed when I disable this plugin.

This is what (the relevant part of) my vite config looks like:

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteSentry from 'vite-plugin-sentry'

import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

const path = require('path')
const url = require('url')

export default ({ mode }) => {
  process.env = Object.assign(process.env, loadEnv(mode, process.cwd(), ''))
  const plugins = [
    vue(),
  ]

  if (process.env.VITE_COMMIT_HASH && process.env.VITE_SENTRY_AUTH_TOKEN) {
    plugins.push(
      viteSentry({
        authToken: process.env.VITE_SENTRY_AUTH_TOKEN,
        org: '***',
        project: 'frontend',
        release: process.env.VITE_COMMIT_HASH,
        sourceMaps: {
          include: ['./dist/assets'],
          ignore: ['node_modules'],
          urlPrefix: '~/assets',
        },
      }),
    )
  }

  // https://vitejs.dev/config/
  return defineConfig({
    plugins,
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@core': path.resolve(__dirname, 'src/@core'),
        vue: url.fileURLToPath(new URL('./node_modules/vue', import.meta.url)),
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
      dedupe: ['vue'],
    },
    build: {
      target: 'es2015',
      sourcemap: 'hidden',
    },
  })
}

The list of my dependencies:

{
  "dependencies": {
    "@lyracom/embedded-form-glue": "^1.3.6",
    "@paypal/paypal-js": "^5.1.6",
    "@sentry/tracing": "^7.39.0",
    "@sentry/vue": "^7.45.0",
    "@stripe/stripe-js": "^1.52.1",
    "@tanstack/vue-query": "^4.29.5",
    "@tiptap/core": "^2.0.0-beta.218",
    "@tiptap/extension-link": "^2.0.0-beta.218",
    "@tiptap/extension-mention": "^2.0.0-beta.218",
    "@tiptap/starter-kit": "^2.0.0-beta.218",
    "@tiptap/vue-3": "^2.0.0-beta.218",
    "@vee-validate/rules": "^4.7.4",
    "@vueuse/core": "^10.1.0",
    "apexcharts": "^3.39.0",
    "axios": "^1.4.0",
    "bootstrap": "4.6.2",
    "core-js": "^3.30.1",
    "date-fns": "^2.30.0",
    "date-fns-tz": "^2.0.0",
    "element-plus": "^2.3.3",
    "emoji-mart-vue-fast": "^12.0.3",
    "flag-icons": "^6.6.6",
    "leaflet": "^1.9.3",
    "lodash": "^4.17.21",
    "papaparse": "^5.4.1",
    "prosemirror-state": "^1.4.2",
    "simple-web-worker": "^1.2.0",
    "tippy.js": "^6.3.7",
    "validator": "^13.9.0",
    "vee-validate": "^4.7.2",
    "vue": "3.2.47",
    "vue-feather": "^2.0.0",
    "vue-i18n": "^9.3.0-beta.11",
    "vue-plugin-load-script": "^2.1.1",
    "vue-router": "^4.1.6",
    "vue3-apexcharts": "^1.4.1",
    "vue3-form-wizard": "^0.2.1",
    "vuex": "^4.1.0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.21.5",
    "@babel/preset-typescript": "^7.21.4",
    "@cypress/webpack-preprocessor": "^5.17.1",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/user-event": "^14.4.3",
    "@testing-library/vue": "^7.0.0",
    "@vitejs/plugin-vue": "^4.2.1",
    "@vue/eslint-config-airbnb": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.3.2",
    "@vue/vue3-jest": "^29.2.3",
    "babel-jest": "^29.5.0",
    "babel-plugin-transform-import-meta": "^2.2.0",
    "babel-preset-vite": "^1.1.0",
    "cypress": "^12.11.0",
    "cypress-file-upload": "^5.0.8",
    "dotenv": "^16.0.3",
    "eslint": "^8.39.0",
    "eslint-plugin-cypress": "^2.13.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "9.9.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "rimraf": "^5.0.0",
    "sass": "^1.59.3",
    "typescript": "^5.0.3",
    "vite": "^4.3.5",
    "vite-plugin-checker": "^0.5.6",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-sentry": "^1.1.7",
    "vue-eslint-parser": "^9.1.1",
    "vue-tsc": "^1.6.4"
  }
}

Eazymov · 2023-05-12T10:13:26Z

@ikenfin Hi!
Reproduction: https://stackblitz.com/edit/vitejs-vite-tfdhac?file=src%2Fmain.jsx,vite.config.js&terminal=build

Log:

$ vite build
vite v4.3.5 building for production...
transforming (1) index.html
{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"VITE_PLUGIN_SENTRY_CONFIG":{\"release\":\"123\}"};

VITE_PLUGIN_SENTRY_CONFIG value leads to a parse error.
Probably related to vitejs/vite#13003

Temporary fix:

const { config, ...vps } = vitePluginSentry({ ... })

export default defineConfig({
  plugins: [
    vps,
  ],
});

ikenfin · 2023-06-01T10:44:53Z

@WouterSioen @Kretiss @Eazymov Hi! It seems that this encoding appears only when you use import.meta.env, while using import.meta.env.VITE_PLUGIN_SENTRY_CONFIG is fine.

I've done some experiments and it seems that import.meta.env always fails if you trying to use it without direct property usage:

// main.tsx
// fails
const {
  VITE_PLUGIN_SENTRY_CONFIG
} = import.meta.env

console.log(VITE_PLUGIN_SENTRY_CONFIG.dist)

// works
console.log(import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.dist)

Can you plz check how you are using import.meta.env in your code and replace it with full property path to check is that works?

WouterSioen · 2023-06-12T07:01:32Z

In my main.ts file, I init Sentry this way:

import * as Sentry from '@sentry/vue'
import { BrowserTracing } from '@sentry/tracing'

if (import.meta.env.VITE_SENTRY_DSN && import.meta.env.VITE_SENTRY_ENVIRONMENT) {
  Sentry.init({
    app,
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.VITE_SENTRY_ENVIRONMENT,
    release: import.meta.env.VITE_COMMIT_HASH,
    integrations: [new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    })],
  })
}

This thus does use the full property path

AnotherHermit · 2023-06-12T16:35:54Z

I think this is an issue in vite and how it handles import.meta.env. I have submitted a ticket there to see where the issue should be resolved. vitejs/vite#13496

WouterSioen · 2023-08-02T05:38:07Z

Looks like this is fixed with the release of vite 4.4.8, I cannot reproduce the problem anymore after updating 🙌

ikenfin added the help wanted Extra attention is needed label Jun 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When using with Vite 4.3.4 and newer plugin breaks #289

When using with Vite 4.3.4 and newer plugin breaks #289

Kretiss commented May 5, 2023 •

edited

ikenfin commented May 5, 2023

WouterSioen commented May 10, 2023 •

edited

Eazymov commented May 12, 2023 •

edited

ikenfin commented Jun 1, 2023 •

edited

WouterSioen commented Jun 12, 2023

AnotherHermit commented Jun 12, 2023

WouterSioen commented Aug 2, 2023

When using with Vite 4.3.4 and newer plugin breaks #289

When using with Vite 4.3.4 and newer plugin breaks #289

Comments

Kretiss commented May 5, 2023 • edited

ikenfin commented May 5, 2023

WouterSioen commented May 10, 2023 • edited

Eazymov commented May 12, 2023 • edited

ikenfin commented Jun 1, 2023 • edited

WouterSioen commented Jun 12, 2023

AnotherHermit commented Jun 12, 2023

WouterSioen commented Aug 2, 2023

Kretiss commented May 5, 2023 •

edited

WouterSioen commented May 10, 2023 •

edited

Eazymov commented May 12, 2023 •

edited

ikenfin commented Jun 1, 2023 •

edited