vue-server-renderer occured render function or template not defined in component: anonymous

Question

I am using Vue 2.7 and webpack4 for SSR. The error render function or template not defined in component: anonymous occurs when the following conditions are met

1. using child component

<template>
  ...
</template>

<script>
import componentA from '. /componentA''

export default {
...
  component: {componentA},
}
<script>

2. import from external files (named export and default export) external.js

default export

const somethingFunc = () => {}
export default somethingFunc

named export

export const somethingFunc = () => {}

Vue Component File

<template>
  ...
</template>

<script>
import somethingFunc from '... /external.js'

export default {
...
  computed: {
  something() {
      return somethingFunc()
      }
    }
  }
}
</script>

3. mixin import using named export

export const Mixin = {
  props: {...} ,
  methods: {...}
}

this is package.json on this project

  "dependencies": {
    "axios": "^0.21.4",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.7.0",
    "deepmerge": "^4.2.2",
    "express": "^4.17.1",
    "knex": "^2.4.0",
    "lodash": "^4.17.20",
    "lozad": "^1.16.0",
    "lru-cache": "^7.14.1",
    "md5": "^2.3.0",
    "moment": "^2.29.1",
    "numeral": "^2.0.6",
    "pg": "^8.8.0",
    "serve-favicon": "^2.5.0",
    "vue": "^2.7.14",
    "vue-server-renderer": "^2.7.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.3.0",
    "bignumber.js": "^9.1.1",
    "css-loader": "^5.0.0",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.5.0",
    "nodemon": "^2.0.20",
    "sass": "^1.28.0",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "url": "^0.11.0",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.4",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^5.2.0",
    "webpack-node-externals": "^2.5.2"
  }

I have looked and found no similar errors and would like to know if anyone can tell me what they are. Also, if the previous condition is not present, it is rendering correctly.

Answer 1

You should change your import statements. The import child components should be like:

import ChildComponent from '. .../ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}

And function imports should be like:

import {myFunction} from "..../myFile"

Answer 2

I found my own solution. There were multiple causes. First, regarding the component error. It was caused by using dynamic import of a component with a variable.

<template>
  <div>
    <component :is="getComponentIs()" />
  </div>
</template>

<script>
export default {
...
computed: {
  getComponentIs() {
    return Vue.component(compName, () => import( 
           '../components/' + this.componentName + '.vue') 
         ))
  }
}
...
}
</script>

The component problem was fixed when I modified it to explicitly write all components as follows.

export default {
  components: {
    ComponentA: () => import('../components/ComponentA.vue')
   ...
  }
}

Next, the error when importing an external file was caused by importing an external library in an external file.
external.js.

import numeral from 'numeral'
export const something = [...].

Eliminating the import statement solved the problem.