Meteor-RSPack Integration: A Modern Bundler Meets Meteor 3.4

announce
58

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.

1 Like