Check out my starter template here:
Basically you setup postcss and install the required tailwindcss npm packages. You can maybe simply follow these instructions: Install Tailwind CSS with Meteor - Tailwind CSS Install Tailwind CSS with Meteor - Tailwind CSS
You can get a Tailwind fresh project easily with:
meteor create --release 3.4-beta.6 --tailwind
That has all configured to make it work. Otherwise, you can adapt any existing project following official docs to integrateTailwind in Rspack. Consider rspack.config.js in Meteor describes differently, this file is created automatically as you install Rspack package.
To fix it, mark bcrypt as external in Rspack so Meteor handles it. Meteor’s bundler already includes bcrypt built-in, so adding as external make Meteor’s bcrypt to be used. With the following config, import bcrypt from "bcrypt"; console.log("bcrypt", bcrypt); resolves:
export default defineConfig(Meteor => {
return {
externals: [/^bcrypt/],
};
});
I’ll add bcrypt to the default externals for the Meteor Rspack integration for next release.
Right, that happens when .js is treated as .jsx. Add a rule to support React components in .js, either in rspack.config.js (as you did) or in .swcrc. Similarly can be achieved for TypeScript and ts/tsx files.
Right, that happens when .js is treated as .jsx. Add a rule to support React components in .js, either in
rspack.config.js(as you did) or in.swcrc. Similarly can be achieved for TypeScript and ts/tsx files.
You misunderstand. If I have that part of rspack.config.js in there it will error
In particular its this part
type: "javascript/auto" // Specifies the module type
I copied this from somewhere else so I’m not sure its even important,
Got through those errors, now I’m running into an error with imports not running in the expected order. I’m not sure if this is expected but will make converting a bigger task than I had hoped.
The easiest case to explain is using @shopify/shopify-api but I believe moment has a similar experienc
In order to use it you need to import an adapter like this:
import “@shopify/shopify-api/dist/cjs/adapters/node”;
Now without RS pack the bundler executes code in the order that it is imported so that we can guarantee by the time we use the shopifyApi that the adapter has been loaded
With RS pack it seems that the side effect detection isn’t quite working correctly for that module so the adapter is never applied
Hi, I just tested the vue skeleton example for 3.4-rc.2 and I got this error:
meteor-vue-rspack meteor
[[[[[ ~/Documents/meteor-vue-rspack ]]]]]
=> Started proxy.
=> Started HMR server.
[Rspack Server] [server-rspack]:package ... /
[server-rspack] compiled successfully in 91 ms
=> Started MongoDB.
[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.80:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/user/Documents/meteor-vue-rspack/public' directory
[Rspack Client] [client-rspack]:
ERROR in ./imports/ui/main.css
× Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
╰─▶ × /Users/user/Documents/meteor-vue-rspack/postcss.config.js:1
│ export default {
│ ^^^^^^
│
│ SyntaxError: Unexpected token 'export'
│ at wrapSafe (node:internal/modules/cjs/loader:1281:20)
│ at Module._compile (node:internal/modules/cjs/loader:1321:27)
│ at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
│ at Module.load (node:internal/modules/cjs/loader:1208:32)
│ at Module._load (node:internal/modules/cjs/loader:1024:12)
│ at Module.require (node:internal/modules/cjs/loader:1233:19)
│ at module.exports (/Users/user/Documents/meteor-vue-rspack/node_modules/import-fresh/index.js:33:91)
│ at Object.loadJsSync (/Users/user/Documents/meteor-vue-rspack/node_modules/cosmiconfig/dist/loaders.js:17:12)
│ at .js (/Users/user/Documents/meteor-vue-rspack/node_modules/postcss-loader/dist/utils.js:57:56)
│ at #loadConfiguration (/Users/user/Documents/meteor-vue-rspack/node_modules/cosmiconfig/dist/Explorer.js:116:42)
[client-rspack] compiled with 1 error in 131 ms
=> Started your app.
=> App running at: http://localhost:3000/
To solve it, I had to switch postcss.config.js to CommonJS so postcss-loader (via cosmiconfig) can parse it; it doesn’t support ESM export default in a .js config by default. This removes the Unexpected token ‘export’ error.
Before:
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
After:
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
},
};
So, with that, I was able to run the app correctly.
UPDATE: The above issue was because I was using Node v20.15.1. With Node 22, no changes needed to work correctly.
@nachocodoner could you give me a hand with an issue that I am getting with rspack configuration please.
theory-swe git:(rspack-integration) ✗ yarn start
yarn run v1.22.22
$ MONGO_URL=mongodb://localhost:27017/theory-swe meteor --settings ./settings/settings-development.json
[[[[[ ~/Documents/theory-swe ]]]]]
=> Started proxy.
[Rspack Client Error] Browserslist: browsers data (caniuse-lite) is 14 months old. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
[Rspack Server Error] Browserslist: browsers data (caniuse-lite) is 14 months old. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
[Rspack Client Error] [rspack-cli] Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
at VueLoaderPlugin.apply (/Users/user/Documents/theory-swe/node_modules/vue-loader/dist/pluginWebpack5.js:112:19)
at Plugin.apply (/Users/user/Documents/theory-swe/node_modules/vue-loader/dist/plugin.js:16:20)
at createCompiler (/Users/user/Documents/theory-swe/node_modules/@rspack/core/dist/index.js:12120:179)
at Array.map (<anonymous>)
at /Users/user/Documents/theory-swe/node_modules/@rspack/core/dist/index.js:12137:45
at create (/Users/user/Documents/theory-swe/node_modules/@rspack/core/dist/index.js:12140:18)
at /Users/user/Documents/theory-swe/node_modules/@rspack/core/dist/index.js:12165:39
at RspackCLI.createCompiler (/Users/user/Documents/theory-swe/node_modules/@rspack/cli/dist/index.js:1198:45)
at async CAC.<anonymous> (/Users/user/Documents/theory-swe/node_modules/@rspack/cli/dist/index.js:930:34)
This is a Meteor app with Vue and Vuetify. it’s using vite and some vite aliases. But the error seems to be on the vue-loader plugin.
This is my PR chore: integrate rspack by diavrank · Pull Request #23 · diavrank/theory-swe · GitHub
Info:
Hi @diavrank95
if it could help, here my rspack.config.js for a Vue/Vuetify project. For sure not perfect but at least, is works.
import { createRequire } from 'module';
import { dirname, resolve } from 'path';
import { fileURLToPath } from 'url';
import { defineConfig } from '@meteorjs/rspack';
import { rspack } from '@rspack/core';
import { VueLoaderPlugin } from 'vue-loader';
const require = createRequire(import.meta.url);
const swcConfig = require('./swc.config.js');
// Get the absolute path of the project directory
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const projectRoot = resolve(__dirname);
export default defineConfig(Meteor => {
const isCoverageMode = process.env.COVERAGE === '1';
return {
experiments: {
css: true,
cache: false,
},
lazyCompilation: {
entries: false,
imports: false,
},
module: {
rules: [
// TypeScript support (both client and server)
{
test: /\.(ts|tsx)$/,
loader: 'builtin:swc-loader',
options: {
// Merge the configuration from swc.config.js with specific options
jsc: {
...swcConfig.jsc,
// Ensure baseUrl is an absolute path (SWC requires an absolute path)
baseUrl: projectRoot,
parser: { syntax: 'typescript', tsx: true, decorators: true },
target: 'es2020',
// Ensure the coverage plugin is dynamically enabled if COVERAGE=1
...(isCoverageMode && {
experimental: {
plugins: [
[
'swc-plugin-coverage-instrument',
{
unstableExclude: [
'**/node_modules/**',
'**/dist/**',
'**/build/**',
'**/_build/**',
'**/coverage/**',
'**/.meteor/**',
'**/packages/**',
'**/tests/**',
],
},
],
],
},
}),
},
},
},
// Client-only loaders
...(Meteor.isClient
? [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
experimentalInlineMatchResource: true,
},
},
{ test: /\.scss$/, type: 'css/auto' },
{ test: /\.css$/, type: 'css' },
{
test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
type: 'asset/resource',
generator: { filename: 'assets/images/[name].[hash][ext]' },
},
]
: []),
],
},
...(Meteor.isClient && {
plugins: [
new VueLoaderPlugin(),
new rspack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(true),
__VUE_PROD_DEVTOOLS__: JSON.stringify(false),
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
}),
],
}),
resolve: {
alias: {
'@ui': '/imports/ui',
'@api': '/imports/api',
'@models': '/imports/types/models',
'@localTypes': '/imports/types',
'@plugins': '/imports/plugins',
'@server': '/server',
'@client': '/client',
'@packages': '/packages',
'@tests': '/tests',
'@public': '/public',
'@private': '/private',
},
extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'],
extensionAlias: {
'.js': ['.ts', '.js'],
'.mjs': ['.mts', '.mjs'],
},
// Improve module resolution stability
symlinks: true,
fullySpecified: false,
},
cache: false,
// Add stats configuration for better error reporting
stats: {
errorDetails: true,
children: true,
},
// Split vendor chunk (client-only to avoid server build conflicts)
...(Meteor.isClient && !Meteor.isTest ? Meteor.splitVendorChunk() : {}),
// Disable cache
...Meteor.setCache(false),
};
});
Nice!!, thanks so much @harry97 , will check it out today or maybe tomorrow, and will let you know 
. Hope you have a Happy New Year all of you guys!!! 
lol what’re you referring to?
Hi @harry73 , I tried your rspack config on my Meteor app but I have the same error of Vue Loader. I also tried to replicate on a small meteor app example and I found something that if I add the meteor package called harry97:ssr , I get the Vue Loader error:
packages:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base@1.5.2 # Packages every Meteor app needs to have
mobile-experience@1.1.2 # Packages for a great mobile UX
mongo@2.2.0-rc340.2 # The database Meteor supports right now
reactive-var@1.0.13 # Reactive variable for tracker
standard-minifier-css@1.10.0-rc340.2 # CSS minifier run for production mode
standard-minifier-js@3.2.0-rc340.2 # JS minifier run for production mode
es5-shim@4.8.1 # ECMAScript 5 compatibility for older browsers
ecmascript@0.17.0-rc340.2 # Enable ECMAScript2015+ syntax in app code
typescript@5.9.3-rc340.2 # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.7.0-rc340.2 # Server-side component of the `meteor shell` command
hot-module-replacement@0.5.4 # Update client in development without reloading the page
static-html@1.5.0-rc340.2 # Define static page content in .html files
rspack@1.0.0-rc340.2 # Integrate Rspack into Meteor for client and server app bundling
zodern:types
harry97:ssr
rspack.config.js
const { defineConfig } = require('@meteorjs/rspack');
const { VueLoaderPlugin } = require('vue-loader');
const projectRoot = process.cwd();
/**
* Rspack configuration for Meteor projects.
*
* Provides typed flags on the `Meteor` object, such as:
* - `Meteor.isClient` / `Meteor.isServer`
* - `Meteor.isDevelopment` / `Meteor.isProduction`
* - …and other flags available
*
* Use these flags to adjust your build settings based on environment.
*/
module.exports = defineConfig(Meteor => {
return {
...Meteor.isClient && {
plugins: [new VueLoaderPlugin()],
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: /\.scss$/, type: 'css/auto' },
{ test: /\.css$/, type: 'css' },
{
test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
type: 'asset/resource',
generator: { filename: 'assets/images/[name].[hash][ext]' },
},
{
test: /\.(ts)$/,
exclude: /node_modules/,
loader: 'builtin:swc-loader',
options: {
// Merge the configuration from swc.config.js with specific options
jsc: {
//...swcConfig.jsc,
// Ensure baseUrl is an absolute path (SWC requires an absolute path)
baseUrl: projectRoot,
parser: {
syntax: 'typescript',
decorators: true,
},
//target: 'es2020',
transform: {
legacyDecorator: true,
decoratorMetadata: true,
},
},
},
},
],
},
resolve: {
extensions: ['.ts', '.vue', '.json'],
alias: {
'@components': '/imports/ui/components',
'@views': '/imports/ui/views',
'@layouts': '/imports/ui/layouts',
'@routes': '/imports/ui/routes',
'@mixins': '/imports/ui/mixins',
'@typings': '/imports/ui/typings',
},
// Improve module resolution stability
symlinks: true,
fullySpecified: false,
},
},
};
});
If I remove that package, the small app example works correctly.
On the other hand, should I have a .swcrc file?, I guess no, because that config can be defined in the rspack.config.js file, right?
I was able to load my app correctly with Rspack, this was the configuration that I used:
const { defineConfig } = require('@meteorjs/rspack');
const { VueLoaderPlugin } = require('vue-loader');
const { rspack } = require('@rspack/core');
const projectRoot = process.cwd();
/**
* Rspack configuration for Meteor projects.
*
* Provides typed flags on the `Meteor` object, such as:
* - `Meteor.isClient` / `Meteor.isServer`
* - `Meteor.isDevelopment` / `Meteor.isProduction`
* - …and other flags available
*
* Use these flags to adjust your build settings based on environment.
*/
module.exports = defineConfig(Meteor => {
if (Meteor.isServer) {
return {
plugins: [],
module: {
rules: [
{
test: /\.(ts)$/,
exclude: /node_modules/,
loader: 'builtin:swc-loader',
options: {
// Merge the configuration from swc.config.js with specific options
jsc: {
//...swcConfig.jsc,
// Ensure baseUrl is an absolute path (SWC requires an absolute path)
baseUrl: projectRoot,
parser: {
syntax: 'typescript',
decorators: true,
},
transform: {
legacyDecorator: true,
decoratorMetadata: true,
},
},
},
},
],
},
resolve: {
extensions: ['.ts', '.json'],
alias: {
'@api': '/imports/api',
'@server': '/imports/startup/server',
},
// Improve module resolution stability
symlinks: true,
fullySpecified: false,
},
}
}
return {
...Meteor.isClient && {
plugins: [new VueLoaderPlugin(),
new rspack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(true),
__VUE_PROD_DEVTOOLS__: JSON.stringify(false),
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
})],
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,
},
},
{
resourceQuery: /lang=sass/,
type: 'css/auto',
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: require.resolve('sass-embedded'),
sassOptions: {
syntax: 'indented',
},
},
},
],
},
{
test: /\.sass$/,
type: 'css/auto',
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: require.resolve('sass-embedded'),
sassOptions: {
syntax: 'indented',
},
},
},
],
},
{ test: /\.css$/, type: 'css' },
{
test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
type: 'asset/resource',
generator: { filename: 'assets/images/[name].[hash][ext]' },
},
{
test: /\.(ts)$/,
exclude: /node_modules/,
loader: 'builtin:swc-loader',
options: {
// Merge the configuration from swc.config.js with specific options
jsc: {
//...swcConfig.jsc,
// Ensure baseUrl is an absolute path (SWC requires an absolute path)
baseUrl: projectRoot,
parser: {
syntax: 'typescript',
decorators: true,
},
//target: 'es2020',
transform: {
legacyDecorator: true,
decoratorMetadata: true,
},
},
},
},
],
},
resolve: {
extensions: ['.ts', '.vue', '.json'],
alias: {
/* '@api': '/imports/api',
'@server': '/imports/startup/server', */
'@components': '/imports/ui/components',
'@views': '/imports/ui/views',
'@layouts': '/imports/ui/layouts',
'@routes': '/imports/ui/routes',
'@mixins': '/imports/ui/mixins',
'@typings': '/imports/ui/typings',
},
// Improve module resolution stability
symlinks: true,
fullySpecified: false,
},
},
};
});
So far, I just have an issue, which is to run the app debug mode. I am using VSCode/Cursor and I am opening a JavaScript Debug Terminal to run the app, but the breakpoints are not working. Anyone knows how to solve it? I tried by setting this in rspack but it didn’t work:
devtool: isDev ? 'source-map' : false,
In all my projects (tried rc1 and rc2), updating these two packages:
"@rspack/cli": "1.6.8",
"@rspack/core": "1.6.8",
to 1.7.0 results in the following errors:
In the browser page:
ERROR Problem communicating active modules to the server at http://192.168.1.72:3600/build-chunks/imports_startup_client_routes_js_lazy-compilation-proxy.js:32:11 at Set.forEach (<anonymous>) at activeEventSource.onerror (http://192.168.1.72:3600/build-chunks/imports_startup_client_routes_js_lazy-compilation-proxy.js:30:21)
In the browser console:
EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.Understand this error loadable.esm.mjs:146 loadable-components: failed to asynchronously load component Object (anonymous) @ loadable.esm.mjs:146Understand this error lazy-compilation-web.js:29 Uncaught Error: Problem communicating active modules to the server at lazy-compilation-web.js:29:1 at Set.forEach (<anonymous>) at activeEventSource.onerror (lazy-compilation-web.js:27:1)
I use @loadable/component for my dynamic imports:
import loadable from '@loadable/component'
const Component = loadable(() => import('./SomePath/Component.js'))
Downgrade back to 1.6.8 and everything works fine.
I opened this to see some opinions there: [Bug]: @loadable/component no longer works with v 1.7.0 · Issue #12606 · web-infra-dev/rspack · GitHub
Hi @diavrank95,
not a solution for your question, but I also struggled with SCSS a lot in 3.4 and I finally abandoned it and grabbed the compiled CSS from 3.3 and dropped SCSS.
I am curious if you run Meteor with a launch.json file in VS Code.
not a solution for your question, but I also struggled with SCSS a lot in 3.4 and I finally abandoned it and grabbed the compiled CSS from 3.3 and dropped SCSS.
I think you can use this config for SCSS:
{
resourceQuery: /lang=scss/,
type: 'css/auto',
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: require.resolve('sass-embedded'),
sassOptions: {
syntax: 'scss',
},
},
},
],
},
That is a rule for Vue Single components (style section with lang=scss). But should be similar for .sass files.
I am curious if you run Meteor with a launch.json file in VS Code.
I guess this is for my debugging session issue, no yet, will give a try today. But also, I’d like to know if anyone know if there’s an rspack config to hide all the verbose preload logs when running the app in debug mode.
I know that Rspack 1.7.0 introduced the lazyCompilation setting by default, which is incompatible with the Meteor–Rspack integration.
I will create the next RC and the official 3.4 release with lazyCompilation set to false for us.
For the moment, to verify it fixes it you can disable lazyCompilation: false in your rspack.config.js.
PD: I will attend the answers to the other reports sometime next week, after my rest time. Keep them coming.
3.4 full release wen?
I tried to run the app in debug mode with launch.json file but it didn’t work either. @nachocodoner I think is essential for any dev to have debug mode working correctly. Could you orient me how to get this working? I tried on a skeleton example but it didn’t work.
I will try your SCSS config, tx.
This is what my launch.json for VS Code looks like:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Meteor: Run (from app/)",
"runtimeExecutable": "meteor",
"runtimeArgs": [
"run",
"--port",
"3600",
"--settings",
"${workspaceFolder}/app/settings.json"
],
"restart": true,
"timeout": 30000,
"stopOnEntry": false,
"cwd": "${workspaceFolder}/app",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"env": {
"PORT": "3600",
"ROOT_URL": "http://192.168.x.x:3600",
"AWS_ACCESS_KEY_ID": "xxxx",
"AWS_S3_REGION": "eu-central-1",
"AWS_SECRET_ACCESS_KEY": "yyyy",
// .. all other env variables
}
},
{
"type": "node",
"request": "attach",
"name": "Meteor: Attach Server",
"port": 9229,
"restart": true,
"timeout": 30000,
"cwd": "${workspaceFolder}/app",
"skipFiles": [
"<node_internals>/**"
]
},
{
"type": "chrome",
"request": "launch",
"name": "Meteor: Debug Client",
"url": "http://192.168.x.x:3600",
"webRoot": "${workspaceFolder}/app",
"sourceMapPathOverrides": {
"meteor://💻app/*": "${workspaceFolder}/app/*"
}
}
],
"compounds": [
{
"name": "Meteor: Full Stack",
"configurations": [
"Meteor: Attach Server",
"Meteor: Debug Client"
]
}
]
}
@paulishca I tried your config but it didn’t work. Some questions that I have: