I have the following error:
[Rspack Client] [client-rspack]:package ... /
ERROR in ./node_modules/@firebase/database-compat/dist/index.standalone.js 5:25-32
× Module not found: Can't resolve 'util' in '/home/Dev/VueGPX/node_modules/@firebase/database-compat/dist'
╭─[5:17]
3 │ Object.defineProperty(exports, '__esModule', { value: true });
4 │
5 │ var require$$2 = require('util');
· ───────────────
6 │ var require$$0 = require('buffer');
7 │ var require$$1 = require('events');
╰────
My original rspack.config.js
is:
import { defineConfig } from '@meteorjs/rspack';
import { VueLoaderPlugin } from 'vue-loader';
export default defineConfig(Meteor => {
return {
...(Meteor.isClient && {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// Note, for the majority of features to be available, make sure this option is `true`
experimentalInlineMatchResource: true,
},
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: 'sass-loader',
options: {
// using `modern-compiler` and `sass-embedded` together significantly improve build performance,
// requires `sass-loader >= 14.2.1`
api: 'modern-compiler',
implementation: 'sass-embedded',
},
},
],
// set to 'css/auto' if you want to support '*.module.(scss|sass)' as CSS Modules, otherwise set type to 'css'
type: 'css/auto',
},
{ test: /\.css$/, use: ['postcss-loader'], type: 'css' },
],
},
plugins: [new VueLoaderPlugin()],
}),
resolve: {
alias: {
'@ui': '/imports/ui',
'@api': '/imports/api',
'@plugins': '/imports/plugins',
'@server': '/server',
'@client': '/client',
'@packages': '/packages',
'@tests': '/tests',
'@public': '/public',
'@private': '/private',
},
},
};
});
and the one built by Meteor:
[Rspack Client] Config: {
name: '[client-rspack]',
target: 'web',
mode: 'development',
entry: '/home/Dev/VueGPX/_build/main-dev/client-entry.js',
output: {
path: '/home/Dev/VueGPX/public',
filename: [Function: filename],
libraryTarget: 'commonjs',
publicPath: '/',
chunkFilename: 'build-chunks/[id].js',
assetModuleFilename: 'build-assets/[hash][ext][query]',
cssFilename: 'build-chunks/[name].css',
cssChunkFilename: 'build-chunks/[id].css'
},
optimization: { usedExports: true, splitChunks: { chunks: 'async' } },
module: {
rules: [
{
test: /\.(?:[mc]?js|jsx|[mc]?ts|tsx)$/i,
exclude: /node_modules|\.meteor\/local/,
loader: 'builtin:swc-loader',
options: {
jsc: {
baseUrl: '/home/Dev/VueGPX',
paths: {
'/*': [ '*', '*' ],
'@api/*': [ 'imports/api/*' ],
'@ui/*': [ 'imports/ui/*' ],
'@plugins/*': [ 'imports/plugins/*' ],
'@server/*': [ 'server/*' ],
'@client/*': [ 'client/*' ],
'@packages/*': [ 'packages/*' ],
'@tests/*': [ 'tests/*' ],
'@public/*': [ 'public/*' ],
'@private/*': [ 'private/*' ]
},
parser: { syntax: 'ecmascript' },
target: 'es2015',
transform: { react: { development: true, refresh: true } },
externalHelpers: true
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: { experimentalInlineMatchResource: true }
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: 'sass-loader',
options: { api: 'modern-compiler', implementation: 'sass-embedded' }
}
],
type: 'css/auto'
},
{ test: /\.css$/, use: [ 'postcss-loader' ], type: 'css' }
]
},
resolve: {
extensions: [
'.ts', '.tsx',
'.mts', '.cts',
'.js', '.jsx',
'.mjs', '.cjs',
'.json', '.wasm'
],
alias: {
'/': '/home/Dev/VueGPX',
'@ui': '/imports/ui',
'@api': '/imports/api',
'@plugins': '/imports/plugins',
'@server': '/server',
'@client': '/client',
'@packages': '/packages',
'@tests': '/tests',
'@public': '/public',
'@private': '/private'
}
},
externals: [ /^meteor.*/ ],
plugins: [
RequireExternalsPlugin {
pluginName: 'RequireExternalsPlugin',
_externals: null,
_externalMap: null,
_enableGlobalPolyfill: true,
_isEagerImport: null,
_lastImports: null,
_defaultExternalPrefix: 'external ',
filePath: '/home/Dev/VueGPX/_build/main-dev/client-meteor.js',
backRoot: '../../',
_funcCount: 1
},
DefinePlugin {
affectedHooks: 'compilation',
name: 'DefinePlugin',
_args: [
{
'Meteor.isClient': 'true',
'Meteor.isServer': 'false',
'Meteor.isTest': 'false',
'Meteor.isAppTest': 'false',
'Meteor.isDevelopment': 'true',
'Meteor.isProduction': 'false'
}
]
},
BannerPlugin {
affectedHooks: undefined,
name: 'BannerPlugin',
_args: [
{
banner: '/**\n' +
'* @file client-rspack.js\n' +
'* @description Bundled output generated by Rspack\n' +
'* --------------------------------------------------------------------------\n' +
'* ⚡ Rspack Client App (Development)\n' +
'* --------------------------------------------------------------------------\n' +
'* • [ client-entry.js ] ──▶ [■ client-rspack.js ] ──▶ [ client-meteor.js ]\n' +
'*\n' +
'* This file is the bundled output generated by Rspack.\n' +
'* It contains all application code and assets combined into one build.\n' +
'* It is not used directly, but will be imported by the Meteor main module\n' +
'* file (`client-meteor.js`) so that Meteor runs the Rspack bundle.\n' +
'*\n' +
'* ⚠️ Note: This file is autogenerated. It is not meant to be modified manually.\n' +
'* These files also act as a cache: they can be safely removed and will be\n' +
'* regenerated on the next build. They should be ignored in IDE suggestions\n' +
'* and version control.\n' +
'*/\n' +
'\n' +
'/* No code generated as served by HMR server */\n',
entryOnly: true
}
]
},
HtmlRspackPlugin {
options: {
inject: false,
cache: true,
filename: '../_build/main-dev/index.html',
templateContent: '\n' +
' <head>\n' +
' <% for tag in htmlRspackPlugin.tags.headTags { %>\n' +
' <%= toHtml(tag) %>\n' +
' <% } %>\n' +
' </head>\n' +
' <body>\n' +
' <% for tag in htmlRspackPlugin.tags.bodyTags { %>\n' +
' <%= toHtml(tag) %>\n' +
' <% } %>\n' +
' </body>\n' +
' '
}
},
Plugin {}
],
watchOptions: { ignored: [ '**/.meteor/local/**', '**/dist/**' ] },
devtool: 'source-map',
devServer: {
static: {
directory: '/home/Dev/VueGPX/public',
publicPath: '/__rspack__/'
},
hot: true,
liveReload: true,
port: '8080',
devMiddleware: { writeToDisk: [Function: writeToDisk] }
},
experiments: { css: true }
}
[Rspack Server] [server-rspack]:package ... -
[server-rspack] compiled successfully in 686 ms
[Rspack Client] <i> [webpack-dev-server] Project is running at:
[Rspack Client] <i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.45:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/Dev/VueGPX/public' directory