Vue added and all is working just fine.
It’s a bummer that the run-of-the-mill vue-cli setup (it’s like a create react app) with BJS added was having an issue.
For the posterity - if someone would have problems with Vue, some hard to track build issues and just need a working circa 2021 setup, I’ll paste my deps, webpack config and tsconfig.
If you’re not using Vue you’ll want to removue vue-loader and compilation options related to single file components.
#deps
"dependencies": {
"@babylonjs/core": "^5.0.0-alpha.31",
"@babylonjs/loaders": "^5.0.0-alpha.31",
"@babylonjs/materials": "^5.0.0-alpha.31",
"@babylonjs/serializers": "^5.0.0-alpha.31",
"vue": "^3.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/compiler-sfc": "^3.1.5",
"@vue/eslint-config-typescript": "^7.0.0",
"css-loader": "^6.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"html-webpack-plugin": "^5.3.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"source-map-loader": "^3.0.0",
"style-loader": "^3.2.1",
"ts-loader": "^9.2.4",
"typescript": "~4.1.5",
"vue-loader": "^16.4.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.47.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
#webpack.config.js
const path = require("path")
const fs = require("fs")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader')
const appDirectory = fs.realpathSync(process.cwd())
const webAppEntryPoint = 'public/index.html'
const moduleResolutionEntryPoint = 'src/app.ts'
const contentDirectory = 'public'
const contentBase = path.resolve(appDirectory, contentDirectory)
const jsBundlePath = 'js/app.js'
const port = 9001
const https = false
const host = '0.0.0.0'
const publicPath = '/'
const srcAlias = '@'
module.exports = {
entry: path.resolve(appDirectory, moduleResolutionEntryPoint), //path to the main .ts file
output: {
/* Name of emitted/held-in-memory js file */
filename: jsBundlePath,
/* Clean output dir before emit. Affects only production builds. */
clean: true
},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".js"],
alias: {
[srcAlias]: path.resolve(__dirname, 'src/')
},
},
devServer: {
host,
port,
disableHostCheck: false,
/* Path to expose bundle from to the browser. (e.g. '/' -> http://localhost:8080/myBundle.js) */
publicPath,
/*
Directory to serve static content from (bundle is in memory).
It 'physical' path corresponding to actual directory where you hold your assets.
*/
contentBase,
hot: true,
https
},
module: {
rules: [
{
/* Only for Vue.js users */
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
/* Allows loading TS from SFCs */
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/,
},
{
test: /\.s?css$/,
use: [
// Creates `style` nodes from JS strings
// "style-loader",
/* Allows loading styles from SFCs */
'vue-style-loader',
/* Translates CSS into CommonJS */
"css-loader",
/* Compiles Sass to CSS */
"sass-loader"
],
exclude: /node_modules/,
},
/* Source maps */
{
test: /\.tsx?$/,
enforce: 'pre',
loader: 'source-map-loader',
},
{
test: /\.js/,
resolve: {
/*
Temporary bug-fix.
See: https://forum.babylonjs.com/t/modulenotfounderror-after-update-to-babylon-5-0-0-alpha/22638/2
*/
fullySpecified: false,
},
enforce: 'pre',
loader: 'source-map-loader',
},
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(appDirectory, webAppEntryPoint),
}),
new VueLoaderPlugin(),
new webpack.ProgressPlugin((percentage, message) => {
console.log(`${(percentage * 100).toFixed()}% ${message}`);
if (percentage*100 >= 100) {
console.log(`------------------------------------`)
console.log(`🟢 Project is running at: ${ 'http' + (https ? 's' : '') + '://' + host + ':' + port + '/'}`)
console.log(`🟢 Webpack output is served from: ${publicPath}`)
console.log(`🟢 Content not from webpack is served from: ${contentBase}`)
console.log(`------------------------------------`)
}
})
],
mode: "development",
}
#tsconfig.json
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
"target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": [
"DOM",
"ES6"
], /* Specify library files to be included in the compilation. */
"allowJs": false, /* Allow javascript files to be compiled. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"rootDir": "src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"strict": true, /* Enable all strict type-checking options. */
"paths": {
"@/*": ["./src/*"]
}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
.
… I’m open to suggestions 
, but on the other hand I think I’d prefer to debug and even fix the implementation than learn that module resolution in an issue 
I am not aware of any gotchas of the sort.