Facing issue with my css

[Dodeja-Shubham]

I have some CSS written as .icon-circle-box { border-radius: 40px; width: 48px;}

but when I use the package I get an error stating [plugin:vite-require] Unexpected token (1:0) is there any work around this?

[yejimeiming]

Can you provide a minimal reproduction repo?

[Dodeja-Shubham]

this is my vite.config.js

import { defineConfig } from 'vite';
import { createVuePlugin as vue } from 'vite-plugin-vue2';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import { viteRequire } from 'vite-require';

const path = require('path');
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
    viteRequire(),
  ],
  css: {
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "vuetify/src/styles/settings/_variables"',
          '@import "./src/assets/scss/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 8080,
    hmr: {
      port: 8084,
    },
  },
});

{"dependencies": {
    "@bachdgvn/vue-otp-input": "^1.0.8",
    "@types/vuelidate": "^0.7.15",
    "@vue/composition-api": "^1.6.2",
    "@vuelidate/core": "^2.0.0",
    "@vuelidate/validators": "^2.0.0",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "crypto-js": "^4.1.1",
    "date-fns": "^2.11.1",
    "es-shim-unscopables": "^1.0.0",
    "exceljs": "^4.2.1",
    "file-saver": "^2.0.2",
    "highcharts": "^7.1.2",
    "highcharts-vue": "^1.3.5",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.15",
    "marked": "^0.7.0",
    "moment": "^2.24.0",
    "node-sass": "npm:sass@~1.32.6",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.28",
    "qrcode.vue": "^1.7.0",
    "register-service-worker": "^1.6.2",
    "tributejs": "^5.1.3",
    "v-mask": "^2.3.0",
    "vue": "^2.6.10",
    "vue-analytics": "^5.17.2",
    "vue-barcode": "^1.3.0",
    "vue-clamp": "^0.4.0",
    "vue-click-outside": "^1.1.0",
    "vue-google-oauth2": "^1.5.8",
    "vue-gtag": "^1.11.0",
    "vue-lottie": "^0.2.1",
    "vue-meta": "^2.4.0",
    "vue-qrcode": "^0.3.5",
    "vue-router": "^3.0.3",
    "vue-shortkey": "^3.1.7",
    "vue-star-rating": "^1.7.0",
    "vue-waypoint": "^3.2.2",
    "vue2-dropzone": "^3.6.0",
    "vuedraggable": "^2.24.3",
    "vuelidate": "^0.7.5",
    "vuetify": "^2.2.14",
    "vuetify-loader": "^1.2.2",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4",
    "xlsx": "^0.18.3"
  },
  "devDependencies": {
    "@mdi/font": "^3.9.97",
    "@newrelic/publish-sourcemap": "^5.1.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue": "^6.5.9",
    "@typescript-eslint/eslint-plugin": "^5.27.1",
    "@typescript-eslint/parser": "^5.27.1",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/eslint-config-airbnb": "^4.0.1",
    "@vue/runtime-dom": "^3.2.47",
    "@vueblocks/vue-use-vuex": "^0.2.11",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-json": "^3.1.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-storybook": "^0.5.13",
    "eslint-plugin-vue": "^8.7.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "netlify-cli": "^2.20.2",
    "prettier": "^2.6.2",
    "sass": "~1.17.4",
    "sass-loader": "^7.1.0",
    "typescript": "^4.7.4",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^2.5.4",
    "vite-plugin-vue2": "^1.9.0",
    "vite-require": "^0.2.3",
    "vue-eslint-parser": "^7.0.0",
    "vue-template-compiler": "^2.6.14",
    "vue2-helpers": "^1.1.7",
    "vuetify-loader": "^1.2.2",
    "webpack": "^4.39.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended",
      "@vue/airbnb",
      "@vue/typescript/recommended"
    ],
    "rules": {
      "vue/valid-v-model": "warn"
    },
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },}

And this is the package.json

Log from hmr

[plugin:vite-require] Unexpected token (1:0)
/Users/Documents/GitHub/src/components/Home/ModuleCard.vue:1:0
1  |  .icon-circle-box[data-v-e1b68a28] {
   |  ^
2  |    border-radius: 40px;
3  |    width: 48px;
    at Parser.pp$4.raise (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:33384:13)
    at Parser.pp$9.unexpected (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:30678:8)
    at Parser.pp$5.parseExprAtom (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32759:10)
    at Parser.pp$5.parseExprSubscripts (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32551:19)
    at Parser.pp$5.parseMaybeUnary (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32517:17)
    at Parser.pp$5.parseExprOps (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32444:19)
    at Parser.pp$5.parseMaybeConditional (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32427:19)
    at Parser.pp$5.parseMaybeAssign (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32394:19)
    at Parser.pp$5.parseExpression (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:32357:19)
    at Parser.pp$8.parseStatement (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:30868:45)
    at Parser.pp$8.parseTopLevel (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:30735:21)
    at Parser.parse (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:30507:15)
    at Function.parse (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:30557:35)
    at TransformContext.parse (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39015:27)
    at TransformContext.transform (/Users/Documents/node_modules/vite-require/dist/index.js:37:30)
    at Object.transform (/Users/Documents/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39317:53

I would also like to add that I am using dynamic Imports for some of my components and this particular component is being called inside that dynamic component

[yejimeiming]

You can try to use vite-plugin-commonjs instead vite-require for resolve it.

[Dodeja-Shubham]

Thank you so much it works!