Vue Component not mounting in Laravel 5.7 [duplicate] - laravel

Question

I started getting this error once I upgraded to Webpack and related dependencies to v4: [Vue warn]: Failed to mount component: template or render function not defined.
Here's the relevant snippets of my package.json and webpack.config.js before and after:
Before upgrade:
package.json
{
"dependencies": {
"vue": "^2.5.0",
"vue-template-compiler": "^2.5.0"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-loader": "^6.2.4",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-es2015-block-scoping": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-without-strict": "^0.0.4",
"babel-preset-es2017": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.26.0",
"eslint": "^4.3.0",
"husky": "^0.14.3",
"lint-staged": "^4.0.2",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.1",
"stats-webpack-plugin": "^0.2.1",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"vue-loader": "^12.1.0",
"webpack": "3.10.0",
"webpack-dev-server": "^2.3.0",
"webpack-monitor": "^1.0.13"
}
}
webpack.config.js
{
resolve: {
modules: [
path.join(__dirname, '..', 'webpack'),
'node_modules/'
],
alias: {
vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
libs: 'libs/'
}
},
plugins: [
new StatsPlugin('manifest.json', {
chunkModules: false,
source: false,
chunks: false,
modules: false,
assets: true
})],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['es2015']
}
}
]
}, {
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'node_modules/')
],
use: [
{
loader: 'babel-loader',
options: {
plugins: ['transform-es2015-block-scoping'],
cacheDirectory: true
}
}
],
},
]
}
};
After upgrade:
package.json
{
"dependencies": {
"vue": "^2.5.13",
"vue-template-compiler": "^2.5.13"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^0.26.0",
"eslint": "^4.3.0",
"husky": "^0.14.3",
"lint-staged": "^4.0.2",
"resolve-url-loader": "^1.6.0",
"sass-loader": "^4.0.1",
"stats-webpack-plugin": "^0.2.1",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"vue-loader": "^14.1.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0",
"webpack-monitor": "^1.0.13"
}
}
webpack.config.js
{
resolve: {
modules: [
path.join(__dirname, '..', 'webpack'),
'node_modules/'
],
alias: {
vue: process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js',
libs: 'libs/'
}
},
plugins: [
new StatsPlugin('manifest.json', {
chunkModules: false,
source: false,
chunks: false,
modules: false,
assets: true
})],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
}, {
test: /\.vue$/,
exclude: /node_modules/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'node_modules/')
],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
],
},
]
}
};
What is expected?
Vue components work without errors after upgrading
What is actually happening?
Most Vue components show an error and fail to load: [Vue warn]: Failed to mount component: template or render function not defined.

Answer 1

Figured this out (h/t #skribe). Basically I was declaring components like this:
Vue.component('thing', require('libs/components/thing.vue'));
I had to change that to:
Vue.component('thing', require('libs/components/thing.vue').default);