Vite «Следующие зависимости импортированы, но не могут быть разрешены»
Я пытаюсь перейти с Symfony encore (который использует веб-пакет под капотом) на Vite и застрял с этой проблемой.
Ошибка: Следующие зависимости импортированы, но не могут быть разрешены:
vue (импортировано из /root/Gyant/vocwebmanager/web/vwm/js/app.js)
Вот мой vite.config.js
import {defineConfig} from 'vite';
import path from 'path';
import symfonyPlugin from 'vite-plugin-symfony';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
transformAssetUrls: {
includeAbsolute: false,
base: null,
},
},
}),
symfonyPlugin({
viteDevServerHostname: 'localhost'
}),
],
optimizeDeps: {
force: true,
},
preview: {
port: 8080,
strictPort: true,
},
server: {
port: 8080,
strictPort: true,
host: '0.0.0.0',
origin: '',
hmr: {
host: 'localhost'
}
},
root: '/assets',
base: '/assets',
publicDir: false,
resolve: {
extensions: ['.js', '.json', '.vue', '.ts'],
alias: {
root: path.resolve(__dirname, './'),
},
},
build: {
emptyOutDir: false,
sourcemap: process.env.MODE !== 'production',
manifest: true,
cssCodeSplit: true,
outDir: './web/assets/',
rollupOptions: {
input: {
app: path.resolve(__dirname, './web/vwm/js/app.js'),
},
},
}
});
app.js
import {createApp} from 'vue';
const vm = createApp();
Я пытался найти ответ в Интернете, но безуспешно
@EstusFlask Я пытался отключить его. Никакого эффекта, к сожалению. Файл app.js не находится в корневом каталоге и его там быть не должно. Vite распознает файл app.js, но по какой-то причине не может запустить сервер разработки в строке с оператором импорта. import {createApp} from 'vue';
Обычно это src/ в корне проекта. Я имею в виду, что app.js находится за пределами иерархии корневого каталога. Это может повлиять на то, как разрешаются модули узлов, что и есть «vue». Я не пробовал, как vite будет работать в таких условиях, но не удивлюсь, если из-за этого он потерпит неудачу. Я бы предложил начать с общей конфигурации vite (в плагинах нет ничего, кроме vue()), а затем итеративно настраивать ее.
Да, но разве src/ не находится вне иерархии корневого каталога?
Корневой каталог Vite — это место, где находятся package.json и node_modules. Ожидается, что модули узла будут разрешаться относительно него. Вот как выглядит работоспособная структура каталогов codeandbox.io/p/devbox/vue-3-vite-template-zunoq
Путь @EstusFlask к файлу app.js — web/vwm/js/app.js. Я не совсем понимаю, почему vite не может правильно разрешить vue. По мне так вроде все так и должно быть
И какой путь к конфигурации vite и package.json? Как уже отмечалось, неясно, как выглядит структура проекта, хотя она может быть основной причиной проблемы.
@EstusFlask Они оба находятся в корневом каталоге.
Каковы их абсолютные пути? Корневой каталог — неоднозначный термин. Пожалуйста, проверьте stackoverflow.com/help/how-to-ask. Вопрос должен содержать всю необходимую информацию для воспроизведения проблемы. В настоящее время это не так, и для понимания вашей проблемы требуются дополнительные вопросы.
Ответы 1
Проблема решена путем замены root: '/assets в vite.config.js на root: ./.
Неясно, как выглядит структура проекта, поскольку vwm/js/app.js не содержится в корневом каталоге. Это может быть проблемой. Отключите плагин Symfony, чтобы изолировать его эффект.