Недоступен import во Vue SSR

Question

Я пытаюсь разобраться во Vue SSR и вообще в node.js. У меня проблема с использованием import. В официальной документации мне не хватает подробностей.

До этого работал с vue-cli. Там вся структура строилась сама с помощью одной команды, а теперь мне приходится делать это самому, поэтому я испытываю трудности. В качестве сервера использую express

Допустим у меня есть 3 файла:

main.js - точка входа во всё приложение, запускает сервер и обслуживает запросы
app.js - содержит функцию, которая создаёт экземпляр Vue и возвращает его
App.vue - шаблон для экземпляра Vue (думаю не особо важно какой тут код будет, главное импортировать этот шаблон в app.js)

main.js:

// createApp - функция которая создаёт экземпляр Vue
const createApp = require('./app')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
    const context = { url: req.url }
    // Создать экземпляр Vue
    const app = createApp(context)

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Внутренняя ошибка сервера')
            return
        }
        res.end('\
            <!DOCTYPE html> \
            <html lang="en"> \
                <meta charset="UTF-8"> \
                <head><title>Привет</title></head> \
                <body>' + html + '</body> \
            </html> \
        ')
    })
})

server.listen(8080)

app.js:

import Vue from 'vue'
import App from './App.vue'

// функция которая создаёт экземпляр Vue
export function createApp () {
    const app = new Vue({
        render: h => h(App)
    })
    return { app }
}

При попытке запустить всё это дело я получаю: SyntaxError: Cannot use import statement outside a module. Нагуглил, что для использования import я должен указать в package.json "type": "module", но тогда перестаёт работать require.

В документации они резко перестали показывать код для express, когда появился import. Это вводит в заблуждение и становится непонятно как я теперь должен всё это организовывать. Да, я понимаю, что там говорится про webpack, но из него нигде ничего не импортируется, я пробовал его устанавливать, это не помогает.

Что я должен сделать, чтобы это работало или как я должен изменить код?

Answer 1

Это было сложно, мне помогла разобраться вот эта статья.

В документации рассказали самые элементарные основы, а как это всё собрать вместе непонятно. То что показано в документации это просто цветочки, а в реальном проекте приходится иметь дело со сложными конфигурациями webpack, кучей незнакомых модулей, которые непонятно что делают, кучей ошибок, несовместимостей и сохранением Vue приложения в формате JSON. Последнее для меня стало просто сногшибательным открытием, кто и как смог до этого додуматься? Это же просто треш =)

БЛОГ НА HUSL

Недоступен import во Vue SSR

Ответы (1 шт):