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

When using with Vite 4.3.4 and newer plugin breaks #289

Open
Kretiss opened this issue May 5, 2023 · 7 comments
Open

When using with Vite 4.3.4 and newer plugin breaks #289

Kretiss opened this issue May 5, 2023 · 7 comments
Labels
help wanted Extra attention is needed

Comments

@Kretiss
Copy link

Kretiss commented May 5, 2023

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:
obrazek

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,
    },
  }
})

@ikenfin
Copy link
Owner

ikenfin commented May 5, 2023

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

@WouterSioen
Copy link

WouterSioen commented May 10, 2023

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
Copy link

Eazymov commented May 12, 2023

@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
Copy link
Owner

ikenfin commented Jun 1, 2023

@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
Copy link

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
Copy link

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

@ikenfin ikenfin added the help wanted Extra attention is needed label Jun 15, 2023
@WouterSioen
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

5 participants