Meteor-RSPack Integration: A Modern Bundler Meets Meteor 3.4

[diavrank95]

@nachocodoner Hi, wanted to know if you have any updates regarding debugging tool using rspack? I just noticed that the official v3.4 has been released but the debugger is not working yet on my app (a TypeScript app).

More details:

• Mac OS Tahoe
• Cursor/VS Code
• Vue 3

[nachocodoner]

No update yet, sorry.

Similarly to other issues reported after 3.4 RCs, these will be pushed to the 3.4.x series. We had plenty of time with betas and first RCs, and while I could debug it simply and others seem to have done so as well, no issues were mentioned during that time. So 3.4 should move on after all these reports and tests, and we will handle last-moment reports later. While Meteor 3.4 has been released at this point, we have not finished verifications or the final recommendation yet. We are working on that to announce it properly tomorrow.

I have not forgotten about this, I just have not had the time to focus on it as I would like. I will let you know once I can do so. I also plan to add debugging guidance to the docs if needed, and provide facilities in a longer-tested beta version within the 3.4.x series.

So, to understand it better, do you have problems on debug the client or the server? I see above @paulishca shared client-side debug config, and you mention later you can’t add breakpoints to the server side. Does it work for you in any side?

Is debugging issues happening to you all time, even in other kinds of app (like a simple one from new meteor create skeletons)?

Could I ask to open a new issue around debugging issues with specific details on the failing scenarios? I have few on the new changes with modern-build-stack I will look them soon.

meteor/meteor

[diavrank95]

do you have problems on debug the client or the server?

It’s on the server.

Does it work for you in any side?

Yes, the debugger on Chrome browser is working correctly. The issue is on the server.

Is debugging issues happening to you all time, even in other kinds of app (like a simple one from new meteor create skeletons)?

No, this is the first time that I get issues in debug mode with my Meteor apps, and it’s because of rspack since with vite bundler is working well (even with the last version of Meteor, v3.3.2). I am using Meteor since 2019.

The issue is happening with any skeletons from meteor create command, even with JS (not just TS Meteor apps). Here are a few steps to reproduce it:

1. Create the app: meteor create rspack34vue --vue --release 3.4
2. Open the app folder with VSCode and open JavaScript Debug Terminal
3. Put a breakpoint on line 5 of /server/main.js.
4. Run meteor command on the debug terminal
5. Verify how the Editor changes the border color to Orange and then returns to black (the original one).
6. Verify the breakpoint is not working when starting the app. The process should stop there when loading the app.
7. You can create more meteor methods and a brief implementation on the FE to test it out manually and verify the server-side breakpoint is not working.

If yo create a meteor app that don’t uses rspack (e.g. meteor create meteorvue --vue), it works. Here is the evidence:

With Rspack (not working):

With Vite (working):

I was trying to solve on my end (changing the configuration on the rspack.config.ts file) but I didn’t have luck, even with AI help so I guess the issue is coming from the meteor package of rspack.

O.S: Mac OS Tahoe

[vikr00001]

Would it be worth considering using an IDE such as Webstorm?

[diavrank95]

thanks for the suggestion, just tested and it works but with a small issue, that the Step over button doesn’t work as expected. It should jump to the next line in code but it’s having the same behavior as the Continue button.

Also, I was trying to replicate the same run configuration from Webstorm to VSCode/Cursor and this is a summary:

Open a normal terminal in VS Code and run:

MONGO_URL=mongodb://localhost:27017/theory-swe meteor --settings ./settings/settings-development.json --inspect-brk=52094

Configure a Meteor Attach config on launch.json as shown:

 {
      "name": "Meteor: Attach (52094)",
      "type": "pwa-node",
      "request": "attach",
      "port": 52094,
      "restart": true,
      "autoAttachChildProcesses": true,
      "justMyCode": false,
      "smartStep": true,
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],
      "outFiles": [
        "${workspaceFolder}/.meteor/local/build/programs/server/**/*.js",
        "${workspaceFolder}/_build/**/*.js"
      ],
      "sourceMapPathOverrides": {
        "meteor://%F0%9F%92%BBapp/webpack://yourapp/./*": "${workspaceFolder}/*",
        "meteor://%F0%9F%92%BBapp/webpack://yourapp/*": "${workspaceFolder}/*",
        "meteor://%F0%9F%92%BBapp/*": "${workspaceFolder}/*",
        "meteor://💻app/webpack://yourapp/./*": "${workspaceFolder}/*",
        "meteor://💻app/webpack://yourapp/*": "${workspaceFolder}/*",
      },
      "skipFiles": [
        "<node_internals>/**",
        "<node_internals>/packages/meteor.js",
        "<node_internals>/packages/**",
        "**/packages/meteor.js",
        "${workspaceFolder}/packages/**",
        "**/node_modules/**",
        "**/.meteor/packages/**"
      ]
    }

[vikr00001]

I’ve been using Webstorm with Meteor for years. There is an annoying glitch where sometimes the debugger becomes unattached on the server, requiring a restart of the app, but other than that breakpoints, stepping, etc work as expected. I can do a screen share if that would be helpful to see if I can get your app working on Webstorm

[diavrank95]

For sure, that would help me a lot. Also, I’m curious if you are debugging server code well with rspack (3.4) and TypeScript in Webstorm. But yes, I’d appreciate the help!

[vikr00001]

Very good. Yes, I’m debugging server code (3.4) with rspack. But not typescript. Please DM me your time zone and email address and we will coordinate.

[vikr00001]

Seen on Google AI:

Updating now!

[dsavoie]

Please let me know if this is the right place to ask such as question…

Is there a way to control the CSS load order? I have some CSS CDN import in my main.html file. I don’t have much choice but to import it like that.

<meteor-bundled-css /> used to control CSS load order, but it doesn’t seem to work anymore with Rspack. At least, the styles used in my application (including TailwindCSS defaults) don’t overcome the CDN ones anymore for the same specificity.

<head>
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/some-css.min.css"
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

  <meteor-bundled-css />
</head>

<body>
  <div id="app"></div>
</body>

[vikr00001]

Hmmmm… Google AI may have jumped the gun a little bit by saying 3.4.0 was ready. I’m getting some unusual build errors. Let’s wait to hear an official announcement from @nachocodoner before updating to it.

[nachocodoner]

Meteor 3.4 was already delivered officially.

Faster Builds, Smaller Bundles and Extended Setups in Meteor 3.4 with Rspack Integration

Meteor 3.4 is out! Meteor 3.4 introduces the Rspack bundler into Meteor core, cutting build times, reducing bundle size, and enabling modern bundler features from the wider JS ecosystem. This release completes the bundler work started in Meteor 3.2 and 3.3. After adding profiling tools and optimizing the existing bundler with SWC, Meteor 3.4 delegates app compilation to a modern Rust-based tool while keeping Meteor’s handling of Atmosphere packages. Meteor 3.4 delivers faster builds, much sma…

Could you give more details on the actual problem?

What errors do you get?

Which Meteor version were you on before?

Did you run the app and also run npm install after the NPM bumps?

Do you have a reproduction?

[nachocodoner]

Where do you add <meteor-bundled-css />? Is it part of main.html, and does Meteor-Rspack reorder it?

If possible, please share a simple repository that mimics your setup. I can try a few workarounds there and, if this is an issue in the new HTML templating handling, fix it for Meteor 3.4.1.

[vikr00001]

I’m going to investigate further today. It may have nothing to do with Meteor. I’ll post here when I know more.

[vikr00001]

Everything is good. No build errors with Meteor 3.4.

I copied in some code that I’d created for Meteor 3.4 on another project, and it needed some tweaks to fit into this second Meteor 3.4 project.