Vue 2 Vite app: Failed to parse source for import analysis

Question

I'm currently setting up a vue 2 application with vite.

I'm getting this error. I would like to set the project up in vue 2. I understand it's built for vue 3, but is there something I'm missing?

vite config

  import { minifyHtml, injectHtml } from 'vite-plugin-html'
  import legacy from '@vitejs/plugin-legacy'
  const path = require('path')
  const { createVuePlugin } = require('vite-plugin-vue2')

  module.exports = {
    plugins: [
      createVuePlugin(),
      minifyHtml(),
      injectHtml({
        injectData: {
          title: 'ProjectName',
          description: 'A single page application created using Vue.js'
        }
      }),
      legacy({
        targets: ['ie >= 11'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime']
      })
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '/src'),
        '~bootstrap': 'bootstrap'
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/scss/variables";`
        }
      }
    }
  }

My folder structure:

my package.json

     {
      "name": "co",
      "private": true,
      "version": "0.0.0",
      "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
      },
      "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.1.3",
        "@vitejs/plugin-legacy": "^1.8.1",
        "@vitejs/plugin-vue": "^1.6.1",
        "autoprefixer": "^10.4.5",
        "postcss": "^8.4.12",
        "sass": "~1.32.13",
        "vite": "^2.9.6",
        "vite-plugin-vue2": "^1.9.0",
        "vue-template-compiler": "^2.6.11"
      },
      "dependencies": {
        "bootstrap": "^4.6.0",
        "eslint": "^8.14.0",
        "eslint-plugin-vue": "^8.7.1",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0"
      }
    }

This can have several causes. One being you have a syntax error somewhere (missing curly braces for example). There's a issue on github about this: github.com/nuxt/vite/issues/115 — Kapcash
– Kapcash, Commented Apr 28, 2022 at 12:27

ronoc4 · Accepted Answer · 2022-04-28 12:55:48Z

4

updated my config with the following. Seems to have gotten it to work!

          import { defineConfig } from "vite";
          import { createVuePlugin as vue } from "vite-plugin-vue2";

          // https://vitejs.dev/config/const 
          const path = require("path");
          export default defineConfig({
            plugins: [vue()],
            resolve: {
              extensions: [
                ".mjs",
                ".js",
                ".ts",
                ".jsx",
                ".tsx",
                ".json",
                ".vue",
                ".scss",
              ],
              alias: {
                "@": path.resolve(__dirname, "./src"),
                json2csv: "json2csv/dist/json2csv.umd.js",
                '~bootstrap': 'bootstrap'
              },
            },
            css: {
              preprocessorOptions: {
                scss: {
                  //  additionalData: `@import "@/scss/app.scss";`,
                  additionalData: `@import "src/scss/_variables.scss";`,
                },
              },
            },
            server: {
              port: 8090,
            },
          });

answered Apr 28, 2022 at 12:55

ronoc4

6372 gold badges6 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

minisaurus Over a year ago

Thanks for this; adding extensions: etc to my vite config meant the compiler flagged up the real error :)

Muhammad Shahzad · Accepted Answer · 2022-12-16 08:32:38Z

After installing a fresh copy of Laravel 9 I face the same issue. So here is solution.

Make sure you added these two packages in package.json

"@vitejs/plugin-vue": "^3.2.0",
"vite": "^3.0.0",

Change vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Finally run: npm install and then npm run dev

Open a new terminal and run php artisan serve

It should work now: http://127.0.0.1:8000/

Amir Pasha Bagheri · Accepted Answer · 2022-11-14 06:10:24Z

0

This one also worked for me

i created a file named vite.config.js next to my package.json file.

and added following code inside it :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Hope this works for you.

answered Nov 14, 2022 at 6:10

Amir Pasha Bagheri

815 bronze badges

Collectives™ on Stack Overflow

Vue 2 Vite app: Failed to parse source for import analysis

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related