Symfony / Vite：Vue 3 Uncaught ReferenceError：未定义导出

问题描述 投票：0回答：1

我目前正在使用 Vite 和 Vue3 以及 TypeScript 开发 Symfony 3 应用程序。

我在这里使用此插件将 Symfonys Webpack Encore 替换为 Vite Buildtool：

https://github.com/lhapaipai/vite-bundle

我最初遵循了迁移指南，之前它就有效。

folder

我有一个资产文件夹，其中包含我的组件。所有与 Vue 相关的内容都位于 asset/vue 下。我的 App.ts 包含我的组件和 App.vue 所需的代码。这是Vite使用的。然后，该捆绑包允许我将编译后的 js 包含到我的树枝文件中，如下所示：

{% block stylesheets %}
    {{ vite_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    {{ vite_entry_script_tags('app') }}
{% endblock %}

要启动我的应用程序，我需要运行 

npm run dev (vite dev)
和 
symfony serve (symfony server start)
。

我的问题是：我的 Vue 应用程序不再渲染，Vue Devtools 也无法识别。当我打开时，我看不到我的组件 

localhost:8000/vue.

我的控制台向我显示此错误消息：

app.js:8 Uncaught ReferenceError: exports is not defined
    at app.js:8:23
(anonymous) @ app.js:8

console

为什么会发生这种情况？我错过了什么 - 我以前没有遇到过这个问题。以下是我的设置文件。

我运行时没有遇到任何错误

vite dev / npm run dev.

我的应用程序.vue

<script setup lang="ts">
import BaseLayout from "./layout/BaseLayout.vue";
import StickyBanner from "./patterns/StickyBanner.vue";
import ImageSlider from "./components/image-slider.vue";
import BottomMenu from "./components/bottom-menu.vue";
import NavigationBar from "./components/navigation-bar.vue";
import MasonryGallery from "./components/masonry-gallery.vue";
</script>
<template>
  <BaseLayout>
    <template #header>
      <StickyBanner />
      <NavigationBar />
      <h1>Header</h1>
    </template>
    <template #main>
      <ImageSlider />
      <MasonryGallery />
    </template>
    <template #footer>
      <BottomMenu />
      <h1>Footer</h1>
    </template>
    <slot/>
  </BaseLayout>
</template>
<style lang="scss" scoped></style>

我的应用程序.ts

/*
 * Welcome to your app's main TS file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';
import 'flowbite';

import {createApp} from "vue";
import App from "./vue/App.vue";
import ModeSwitcher from "./vue/patterns/ModeSwitcher.vue";
import ImageSlider from "./vue/components/image-slider.vue";
import StickyBanner from "./vue/patterns/StickyBanner.vue";
import ServiceInfo from "./vue/components/service-info.vue";

const app = createApp({});

app.component('App', App);
app.component('ModeSwitcher', ModeSwitcher);
app.component('ImageSlider', ImageSlider);
app.component('StickyBanner', StickyBanner);
app.component('ServiceInfo', ServiceInfo);

app.mount('#app');

vite.config.ts

import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
import vue from "@vitejs/plugin-vue";
/* if you're using React */
// import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        /* react(), // if you're using React */
        symfonyPlugin(),
        vue(), // write this
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        }
    },
    base: '/build/',
    build: {
        outDir: './public/build',
        rollupOptions: {
            input: {
                app: "./assets/app.ts",
                /* you can also provide css files to prevent FOUC */
                styles: "./assets/styles/app.css"
            },
        }
    },
});

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
}

index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Hello VueController!{% endblock %}

{% block body %}
    Test
<div>
    <div id="app">
        <app></app>
    </div>
</div>
{% endblock %}

base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Welcome!{% endblock %}</title>
    <link rel="icon"
          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
    {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
    {% block stylesheets %}
        {{ vite_entry_link_tags('app') }}
    {% endblock %}

    {% block javascripts %}
        {{ vite_entry_script_tags('app') }}
    {% endblock %}
    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
            console.log('dark')
        } else {
            document.documentElement.classList.remove('dark')
            console.log('light')
        }
    </script>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

package.json

{
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "core-js": "^3.23.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.1.0",
    "regenerator-runtime": "^0.13.9",
    "tailwindcss": "^3.3.1",
    "ts-loader": "^9.4.2",
    "unplugin-vue-components": "^0.24.1",
    "vue": "^3.0",
    "vue-loader": "^17.0.1"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.12",
    "@vitejs/plugin-vue": "^4.1.0",
    "flowbite": "^1.6.5",
    "sass": "^1.62.0",
    "vite": "^4.2.1",
    "vite-plugin-symfony": "^0.7.6"
  },
  "type": "module"
}
javascript typescript vue.js symfony vite
1个回答
0
投票

我认为 at 可以来自你的 package.json。

{
  "type": "module"
}

您的 esm 环境无法识别 commonjs 特有的变量。 您将配置文件重命名为 

vite.config.cjs
后尝试过吗？或删除 
"type": "module"
（对我来说是个坏主意，因为在 vitejs 版本 5 中有一个弃用公告） 我知道 
vite-plugin-symfony
在他以前的版本中遇到了这个问题，也许尝试使用版本 6 ？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.