Subscribe on changes!

[ssr] Empty result with webpack

avatar
Feb 23rd 2021

Version

3.0.5

Reproduction link

https://github.com/diwic/vue-3-ssr-webpack

Steps to reproduce

git clone https://github.com/diwic/vue-3-ssr-webpack
cd vue-3-ssr-webpack
npm install
npx webpack
node dist/bundled.js

What is expected?

Correct output (Result: <div>hello</div>)

What is actually happening?

Empy result (Result:)


Problem 1: The wrong build of 'vue' is included by default, causing vue.ssrUtils to be undefined. Note: According to the README in vue/dist, vue should be externalised, so that's what I've tried here. Although I would still like to have the option to not externalise it.

Problem 2: The webpack build outputs a warning:

WARNING in ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js 99:63-70
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Problem 3: While simply running node ssrapp2.js yields correct output, the output is empty when running the bundled version with node dist/bundled.js.

avatar
Feb 23rd 2021

You should also make @vue/server-renderer external. Finally, I recommend you to use webpack-node-externals:

const path = require('path');
const nodeExternals = require('webpack-node-externals')

module.exports = {
    entry: './ssrapp2.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'dist'),
    },
    target: 'node',
    mode: 'development',
    devtool: 'source-map',
    externals: nodeExternals({})
}