New 3.4-beta.12 Release, Faster Builds, Smaller Bundles and Modern Setups with the Rspack integration ⚡

announce releases
72

My react.lazy calls do work with rspack. I will stick with that.

Thanks very much for checking into the login issue.

73

A note on react lazy, I will paste directly from google and save the planet from an extra search:

In summary, if you need SSR now or in the future, you need more than react lazy

@loadable/component (often referred to as Loadable Components) and React.lazy are both solutions for code splitting and lazy loading components in React applications, but they differ primarily in their support for Server-Side Rendering (SSR) and feature set.

React.lazy:

  • Client-Side Only:

React.lazy is designed for client-side rendering and relies on React.Suspense to handle the loading state. It is not compatible with Server-Side Rendering (SSR) because Suspense is not available in the server environment.

  • Simpler API:

It offers a straightforward API for dynamic imports, making it easy to implement basic lazy loading.

  • Limited Features:

React.lazy focuses on the core functionality of lazy loading and does not offer advanced features like preloading or custom loading states beyond what Suspense provides.

@loadable/component:

  • SSR Compatible:

@loadable/component provides a robust solution for Server-Side Rendering, allowing you to perform code splitting and lazy loading in SSR environments. It handles the complexities of server-side chunking and hydration.

  • Richer Feature Set:

It offers more advanced features compared to React.lazy, including:

  • Preloading: You can explicitly preload components, which can improve user experience by fetching components before they are needed.

  • Custom Loading and Error States: It provides more granular control over loading and error states, allowing for custom fallback components and error handling logic.

  • Library Splitting: It supports library splitting, enabling you to separate common libraries into their own bundles.

  • More Configuration:

While offering more features, it also involves a slightly more complex setup and configuration, especially for SSR.

In summary:

  • If your application is client-side rendered only and you need a simple solution for lazy loading, React.lazy is a suitable and easy-to-use option.
  • If your application requires Server-Side Rendering (SSR) or you need more advanced features like preloading, custom loading/error states, or library splitting, @loadable/component is the recommended choice.
1 Like
74

Hi, many thanks for your work on modernizing Meteor’s build infrastructure!

Does rspack provide for production builds at the moment? meteor build . (:bulb: I tried . after exhausting my options) gives me

packages/core-runtime.js:189
            throw error;
            ^

Error: Could not find rspack.config.js, rspack.config.mjs, or rspack.config.cjs. Make sure @meteorjs/rspack is installed correctly.
    at getConfigFilePath (packages/rspack/lib/processes.js:161:9)
    at runRspackBuild (packages/rspack/lib/processes.js:406:22)
    at module.wrapAsync.self (packages/rspack/rspack_plugin.js:289:9)

Further investigation with strace appears to show that the getCustomConfigFilePath() logic can’t seem to figure out where the application sources are — Here is an abridged excerpt:

[pid   581] access("/app/node_modules/@meteorjs/rspack/rspack.config.js", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/app/node_modules/@meteorjs/rspack/rspack.config.mjs", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/app/node_modules/@meteorjs/rspack/rspack.config.cjs", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/app/package.json", F_OK) = 0
[pid   581] openat(AT_FDCWD, "/app/package.json", O_RDONLY|O_CLOEXEC) = 383
[pid   581] read(383, "{\n  \"name\": \"phd-assess\",\n  \"ver"..., 8192) = 3391
[pid   581] read(383, "", 8192)         = 0
[pid   581] close(383)                  = 0
[pid   581] access("/app/lerna.json", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/app/pnpm-workspace.yaml", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/package.json", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/lerna.json", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] access("/pnpm-workspace.yaml", F_OK) = -1 ENOENT (No such file or directory)
[pid   581] clock_gettime(CLOCK_MONOTONIC, {tv_sec=44783, tv_nsec=284023876}) = 0
[pid   581] clock_gettime(CLOCK_MONOTONIC, {tv_sec=44783, tv_nsec=284141876}) = 0
[pid   581] write(17, "\33[31mRspack plugin error: Could "..., 155Rspack plugin error: Could not find rspack.config.js, rspack.config.mjs, or rspack.config.cjs. Make sure @meteorjs/rspack is installed correctly.
) = 155

Thanks in advance for your help!

75

Nevermind — The error message was meant to be taken at face value, and the fix was to put @meteorjs/rspack in dependencies rather than devDependencies in package.json.

Leaving my previous comment up, as an offering to the search engine deities. :moyai:

2 Likes
76

Well, @meteorjs/rspack is listed as a devDependency in all Meteor-Rspack examples so far.

I’d like to understand why it was required in your setup. Are you using a monorepo structure? How does your project manage dependencies?

77

I am occasionally getting a ridiculous amount of memory in a rspack instance, I had a 80gb one that i just missed screenshotting as well.

image
image1224×147 18.9 KB

This just happened while I was trying to build my project. I hadn’t gotten it to succeed yet.

Edit:
I have gotten it to happen every time I launch. I’m not sure how long I can keep my computer in this state, but if you have anything I should do to help debug this let me know. I’ve tried deleting the __build and most of the .meteor/local folder and still got the same result


=> Started proxy.
=> Started HMR server.
e[35m[i] Meteor Npx prefix: /Users/user/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/npxe[0m
e[35m[i] Meteor Npm prefix: /Users/user/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/npme[0m
e[35m[i] Meteor app ignores: _build/test/** _build/main-prod/** node_modules/** .DS_Store .babelrc .bash_profile .eslintrc .gitignore .gitmodules .graphqlrc.ts .mocharc.js .npmrc .oxlintignore .prettierignore .prettierrc .slugignore .watchmanconfig Dockerfile PlayPackSteps.md README.md app.json bitbucket-pipelines.yml docker-compose.yml dump.rdb environment_app_image_aws eslint-local-rules.js eslint.config.mjs heroku-postinstall.sh heroku-preinstall.sh jsconfig.json memoryIssue.txt mobile-config.js npm-shrinkwrap.json out.txt rspack.config.js sample.bin.db1.zip settings.json swc.config.js test.settings.json webpack.config.js .circleci/**/*.ts .circleci/**/*.tsx .circleci/**/*.js .circleci/**/*.jsx .circleci/**/*.mjs .circleci/**/*.cjs .circleci/**/*.json .circleci/**/*.yml .circleci/**/*.info .circleci/**/*.txt .circleci/**/*.sample .circleci/**/*.2 .circleci/**/*.0 .circleci/**/*.4 .circleci/**/*.5 .circleci/**/*.9 .circleci/**/*.7 .circleci/**/*.1 .circleci/**/*.6 .circleci/**/*.64 .circleci/**/*.3 .circleci/**/*.33 .circleci/**/*.22 .circleci/**/*.17 .circleci/**/*.18 .circleci/**/*.19 .circleci/**/*.78 .circleci/**/*.13 .circleci/**/*.20 .circleci/**/*.idx .circleci/**/*.pack .circleci/**/*.public .circleci/**/*.rev .circleci/**/*.lock .circleci/**/*.bin .circleci/**/*.properties .circleci/**/*.iml .circleci/**/*.xml .circleci/**/*.cmake .circleci/**/*.o .circleci/**/*.ninja .circleci/**/*.check_cache .circleci/**/*.a .circleci/**/*.cpp .circleci/**/*.c .circleci/**/*.verify_globs .circleci/**/*.log .circleci/**/*.bzl .circleci/**/*.gradle .circleci/**/*.bundle .circleci/**/*.java .circleci/**/*.h .circleci/**/*.png .circleci/**/*.jpg .circleci/**/*.gif .circleci/**/*.mp4 .circleci/**/*.map .circleci/**/*.ttf .circleci/**/*.meta .circleci/**/*.profm .circleci/**/*.prof .circleci/**/*.pb .circleci/**/*.jar .circleci/**/*.so .circleci/**/*.dat .circleci/**/*.dex .circleci/**/*.aab .circleci/**/*.kotlin_module .circleci/**/*.class .circleci/**/*.ap_ .circleci/**/*.flat .circleci/**/*.zip .circleci/**/*.sym .circleci/**/*.textproto .circleci/**/*.tab .circleci/**/*.tab_i .circleci/**/*.len .circleci/**/*.keystream .circleci/**/*.at .circleci/**/*.bat .circleci/**/*.keystore .circleci/**/*.pro .circleci/**/*.kt .circleci/**/*.sha .circleci/**/*.html .circleci/**/*.md .circleci/**/*.sh .circleci/**/*.plist .circleci/**/*.env .circleci/**/*.local .circleci/**/*.mm .circleci/**/*.podspec .circleci/**/*.swift .circleci/**/*.m .circleci/**/*.hpp .circleci/**/*.cc .circleci/**/*.modulemap .circleci/**/*.xcprivacy .circleci/**/*.swiftinterface .circleci/**/*.swiftdoc .circleci/**/*.strings .circleci/**/*.swiftsourceinfo .circleci/**/*.xcfilelist .circleci/**/*.windows .circleci/**/*.in .circleci/**/*.gz .circleci/**/*.svg .circleci/**/*.build .circleci/**/*.cfg .circleci/**/*.meson .circleci/**/*.yaml .circleci/**/*.s .circleci/**/*.asm .circleci/**/*.bash .circleci/**/*.manifest .circleci/**/*.rc .circleci/**/*.am .circleci/**/*.bak .circleci/**/*.pbxproj .circleci/**/*.xcscheme .circleci/**/*.pch .circleci/**/*.xcconfig .circleci/**/*.markdown .circleci/**/*.cer .circleci/**/*.ipa .circleci/**/*.storekit .circleci/**/*.xcworkspacedata .circleci/**/*.xcsettings .circleci/**/*.xcuserstate .circleci/**/*.storyboard .circleci/**/*.entitlements .circleci/**/*.command .circleci/**/*.cts .circleci/**/*.stflow .circleci/**/*.bnf .circleci/**/*.flow .circleci/**/*.aar .circleci/**/*.snap .circleci/**/*.css .circleci/**/*.mts .circleci/**/*.jst .circleci/**/*.def .circleci/**/*.ogg .circleci/**/*.jks .circleci/**/*.glsl .circleci/**/*.ttc .circleci/**/*.less .circleci/**/*.pug .circleci/**/*.proto .circleci/**/*.bsd .circleci/**/*.idl .circleci/**/*.sln .circleci/**/*.config .circleci/**/*.props .circleci/**/*.vcxproj .circleci/**/*.filters .circleci/**/*.tsbuildinfo .circleci/**/*.rb .circleci/**/*.avif .circleci/**/*.ico .circleci/**/*.probe .circleci/**/*.kts .circleci/**/*.toml .circleci/**/*.mf .circleci/**/*.node .circleci/**/*.docs .circleci/**/*.mkd .circleci/**/*.cmd .circleci/**/*.ls .circleci/**/*.wiki .circleci/**/* .... <<<VERY LONG LIST OF IGNORES>>>

 !server/*.html !server/*.csse[0m
e[35m[i] App entrypoints: {
  "mainClient": "_build/main-dev/client-meteor.js",
  "mainServer": "_build/main-dev/server-meteor.js",
  "testModule": "_build/test/test-meteor.js"
}e[0m
e[35m[i] App custom script: /__rspack__/client-rspack.jse[0m
e[35m[i] Rspack DevServer Port: 8080e[0m
e[35m[i] Rspack default config: /Users/user/my_app/node_modules/@meteorjs/rspack/rspack.config.jse[0m
e[35m[i] Rspack custom config: /Users/user/my_app/rspack.config.jse[0m
e[35m[Rspack Server] [i] Rspack mode: development
e[0m
e[35m[Rspack Server] [i] Meteor flags: {
  isDevelopment: e[33mtruee[39m,
  isProduction: e[33mfalsee[39m,
  isDebug: e[33mfalsee[39m,
  isVerbose: e[33mtruee[39m,
  isTest: e[33mfalsee[39m,
  isRun: e[33mtruee[39m,
  isBuild: e[33mfalsee[39m,
  isNative: e[33mfalsee[39m,
  isClient: e[33mfalsee[39m,
  isServer: e[33mtruee[39m,
  entryPath: e[32m'main-dev/server-entry.js'e[39m,
  outputPath: e[32m'main-dev/server-rspack.js'e[39m,
  outputFilename: e[32m'server-rspack.js'e[39m,
  runPath: e[32m'main-dev/server-meteor.js'e[39m,
  buildContext: e[32m'_build'e[39m,
  chunksContext: e[32m'build-chunks'e[39m,
  assetsContext: e[32m'build-assets'e[39m,
  devServerPort: e[32m'8080'e[39m,
  projectConfigPath: e[32m'/Users/user/my_app/rspack.config.js'e[39m,
  swcExternalHelpers: e[33mtruee[39m,
  isReactEnabled: e[33mtruee[39m,
  isTypescriptEnabled: e[33mtruee[39m,
  isTsxEnabled: e[33mtruee[39m,
  RSPACK_WATCH: e[33mtruee[39m,
  buildOutputDir: e[32m'/Users/user/my_app/_build/main-dev'e[39m,
  HtmlRspackPlugin: e[36m[Function (anonymous)]e[39m
}
e[0m
e[35m[Rspack Client] [i] Rspack mode: development
e[0m
e[35m[Rspack Client] [i] Meteor flags: {
  isDevelopment: e[33mtruee[39m,
  isProduction: e[33mfalsee[39m,
  isDebug: e[33mfalsee[39m,
  isVerbose: e[33mtruee[39m,
  isTest: e[33mfalsee[39m,
  isRun: e[33mtruee[39m,
  isBuild: e[33mfalsee[39m,
  isNative: e[33mfalsee[39m,
  isClient: e[33mtruee[39m,
  isServer: e[33mfalsee[39m,
  entryPath: e[32m'main-dev/client-entry.js'e[39m,
  outputPath: e[32m'main-dev/client-rspack.js'e[39m,
  outputFilename: e[32m'client-rspack.js'e[39m,
  runPath: e[32m'main-dev/client-meteor.js'e[39m,
  buildContext: e[32m'_build'e[39m,
  chunksContext: e[32m'build-chunks'e[39m,
  assetsContext: e[32m'build-assets'e[39m,
  devServerPort: e[32m'8080'e[39m,
  projectConfigPath: e[32m'/Users/user/my_app/rspack.config.js'e[39m,
  swcExternalHelpers: e[33mtruee[39m,
  isReactEnabled: e[33mtruee[39m,
  isTypescriptEnabled: e[33mtruee[39m,
  isTsxEnabled: e[33mtruee[39m,
  RSPACK_SERVE: e[33mtruee[39m,
  buildOutputDir: e[32m'/Users/user/my_app/_build/main-dev'e[39m,
  HtmlRspackPlugin: e[36m[Function (anonymous)]e[39m
}
e[0m
e[35m[Rspack Server] Config: {
  name: e[32m'[server-rspack]'e[39m,
  target: e[32m'node'e[39m,
  mode: e[32m'development'e[39m,
  entry: e[32m'/Users/user/my_app/_build/main-dev/server-entry.js'e[39m,
  output: {
    path: e[32m'/Users/user/my_app/private'e[39m,
    filename: e[36m[Function: filename]e[39m,
    libraryTarget: e[32m'commonjs'e[39m,
    chunkFilename: e[32m'build-chunks/[id].js'e[39m,
    assetModuleFilename: e[32m'build-assets/[hash][ext][query]'e[39m
  },
  optimization: { usedExports: e[33mtruee[39m },
  module: {
    rules: [
      {
        test: e[31m/\.(tsx|ts|mts|cts|jsx|mjs|cjs)$/ie[39m,
        exclude: e[31m/node_modules|\.meteor\/local/e[39m,
        loader: e[32m'builtin:swc-loader'e[39m,
        options: {
          jsc: {
            baseUrl: e[32m'/Users/user/my_app'e[39m,
            paths: {
              e[32m'/*'e[39m: [ e[32m'*'e[39m, e[32m'/*'e[39m ],
              e[32m'@meteorrn/core'e[39m: [ e[32m'meteor'e[39m ],
              e[32m'react-native-localization'e[39m: [ e[32m'react-localization'e[39m ],
              e[32m'@shared/*'e[39m: [ e[32m'common/*'e[39m ],
              e[32m'@client_root/*'e[39m: [ e[32m'client/*'e[39m ],
              e[32m'/imports/*'e[39m: [ e[32m'imports/*'e[39m ],
              e[32m'/server/*'e[39m: [ e[32m'server/*'e[39m ],
              e[32m'@admin-methods'e[39m: [ e[32m'server/admin/admin_includes'e[39m ],
              e[32m'@printer-server'e[39m: [ e[32m'server/printer'e[39m ],
              e[32m'@admin-router'e[39m: [ e[32m'./client/router/adminRouterEmpty'e[39m ],
              e[32m'@server-includes'e[39m: [ e[32m'./server/bundles/server_includes_user'e[39m ],
              e[32m'@main-router'e[39m: [ e[32m'./client/router/webRoutes'e[39m ]
            },
            parser: { syntax: e[32m'typescript'e[39m, tsx: e[33mtruee[39m, jsx: e[33mtruee[39m },
            target: e[32m'es2015'e[39m,
            transform: { react: { development: e[33mtruee[39m } },
            externalHelpers: e[33mtruee[39m
          }
        }
      },
      {
        test: e[31m/\.js$/e[39m,
        use: {
          loader: e[32m'builtin:swc-loader'e[39m,
          options: { jsc: { parser: { syntax: e[32m'ecmascript'e[39m, jsx: e[33mtruee[39m } } }
        }
      },
      { test: e[31m/\.node$/e[39m, type: e[32m'asset/resource'e[39m }
    ],
    parser: { javascript: { dynamicImportMode: e[32m'eager'e[39m } },
    noParse: e[31m/react-native-|react-native-gesture-handler/e[39m
  },
  resolve: {
    extensions: [
      e[32m'.web.ts'e[39m, e[32m'.web.tsx'e[39m,
      e[32m'.web.js'e[39m, e[32m'.ts'e[39m,
      e[32m'.tsx'e[39m,    e[32m'.js'e[39m,
      e[32m'.jsx'e[39m,    e[32m'.html'e[39m,
      e[32m'.mts'e[39m,    e[32m'.cts'e[39m,
      e[32m'.mjs'e[39m,    e[32m'.cjs'e[39m,
      e[32m'.json'e[39m,   e[32m'.wasm'e[39m
    ],
    alias: {
      e[32m'/'e[39m: e[32m'/Users/user/my_app'e[39m,
      e[32m'three/examples'e[39m: [ e[32m'/Users/user/my_app/node_modules/three/examples'e[39m ],
      e[32m'@react-native-async-storage/async-storage'e[39m: [
        e[32m'/Users/user/my_app/node_modules/@react-native-async-storage/async-storage/lib/module/AsyncStorage'e[39m
      ]
    },
    modules: [ e[32m'node_modules'e[39m, e[32m'/Users/user/my_app'e[39m ],
    conditionNames: [ e[32m'import'e[39m, e[32m'require'e[39m, e[32m'node'e[39m, e[32m'default'e[39m ],
    tsConfig: e[32m'/Users/user/my_app/tsconfig.json'e[39m,
    enforceExtension: e[33mfalsee[39m,
    fullySpecified: e[33mfalsee[39m
  },
  externals: [ e[31m/^meteor.*/e[39m, e[31m/^react$/e[39m, e[31m/^react-dom$/e[39m, e[31m/^bcrypt$/e[39m, e[31m/^bcrypt/e[39m ],
  plugins: [
    DefinePlugin {
      affectedHooks: e[32m'compilation'e[39m,
      name: e[32m'DefinePlugin'e[39m,
      _args: [
        {
          e[32m'Meteor.isClient'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isServer'e[39m: e[32m'true'e[39m,
          e[32m'Meteor.isTest'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isAppTest'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isDevelopment'e[39m: e[32m'true'e[39m,
          e[32m'Meteor.isProduction'e[39m: e[32m'false'e[39m
        }
      ]
    },
    BannerPlugin {
      affectedHooks: e[90mundefinede[39m,
      name: e[32m'BannerPlugin'e[39m,
      _args: [
        {
          banner: e[32m'/**\n'e[39m +
            e[32m'* @file server-rspack.js\n'e[39m +
            e[32m'* @description Bundled output generated by Rspack\n'e[39m +
            e[32m'* --------------------------------------------------------------------------\n'e[39m +
            e[32m'* ⚡ Rspack Server App (Development)\n'e[39m +
            e[32m'* --------------------------------------------------------------------------\n'e[39m +
            e[32m'* • [   server-entry.js ] ──▶ [■ server-rspack.js ] ──▶ [   server-meteor.js ]\n'e[39m +
            e[32m'*\n'e[39m +
            e[32m'* This file is the bundled output generated by Rspack.\n'e[39m +
            e[32m'* It contains all application code and assets combined into one build.\n'e[39m +
            e[32m'* It is not used directly, but will be imported by the Meteor main module\n'e[39m +
            e[32m'* file (`server-meteor.js`) so that Meteor runs the Rspack bundle.\n'e[39m +
            e[32m'*\n'e[39m +
            e[32m'* ⚠️ Note: This file is autogenerated. It is not meant to be modified manually.\n'e[39m +
            e[32m'* These files also act as a cache: they can be safely removed and will be\n'e[39m +
            e[32m'* regenerated on the next build. They should be ignored in IDE suggestions\n'e[39m +
            e[32m'* and version control.\n'e[39m +
            e[32m'*/\n'e[39m +
            e[32m'\n'e[39m +
            e[32m'/* Code generated */\n'e[39m,
          entryOnly: e[33mtruee[39m
        }
      ]
    },
    RequireExternalsPlugin {
      pluginName: e[32m'RequireExternalsPlugin'e[39m,
      _externals: e[1mnulle[22m,
      _externalMap: e[1mnulle[22m,
      _enableGlobalPolyfill: e[33mfalsee[39m,
      _isEagerImport: e[1mnulle[22m,
      _lastImports: e[1mnulle[22m,
      _defaultExternalPrefix: e[32m'external 'e[39m,
      filePath: e[32m'/Users/user/my_app/_build/main-dev/server-meteor.js'e[39m,
      backRoot: e[32m'../../'e[39m,
      _funcCount: e[33m1e[39m
    }
  ],
  watchOptions: {
    ignored: [
      e[32m'**/fakeServer/**'e[39m,    e[32m'**/app/android'e[39m,
      e[32m'**/app/ios'e[39m,          e[32m'**/cloudslicer/**'e[39m,
      e[32m'**/tools/**'e[39m,         e[32m'**/dataAnalyzer/**'e[39m,
      e[32m'**/app/app/**'e[39m,       e[32m'**/app/e2e/**'e[39m,
      e[32m'**/app/**tests**/**'e[39m, e[32m'**/app/Assets/**'e[39m,
      e[32m'**/app/node_modules'e[39m, e[32m'**/*.native.js'e[39m,
      e[32m'**/gen/**'e[39m,           e[32m'**/services/target'e[39m,
      e[32m'**/app/**'e[39m,           e[32m'**/.meteor/local/**'e[39m,
      e[32m'**/dist/**'e[39m
    ]
  },
  devtool: e[32m'source-map'e[39m,
  cache: e[33mtruee[39m,
  experiments: {
    cache: {
      version: e[32m'swc-development-server'e[39m,
      type: e[32m'persistent'e[39m,
      storage: {
        type: e[32m'filesystem'e[39m,
        directory: e[32m'node_modules/.cache/rspack/server'e[39m
      }
    }
  }
}
e[0m
e[35m[Rspack Client] Config: {
  name: e[32m'[client-rspack]'e[39m,
  target: e[32m'web'e[39m,
  mode: e[32m'development'e[39m,
  entry: e[32m'/Users/user/my_app/_build/main-dev/client-entry.js'e[39m,
  output: {
    path: e[32m'/Users/user/my_app/public'e[39m,
    filename: e[36m[Function: filename]e[39m,
    libraryTarget: e[32m'commonjs'e[39m,
    publicPath: e[32m'/'e[39m,
    chunkFilename: e[32m'build-chunks/[id].js'e[39m,
    assetModuleFilename: e[32m'build-assets/[hash][ext][query]'e[39m,
    cssFilename: e[32m'build-chunks/[name].css'e[39m,
    cssChunkFilename: e[32m'build-chunks/[id].css'e[39m
  },
  optimization: { usedExports: e[33mtruee[39m, splitChunks: { chunks: e[32m'async'e[39m } },
  module: {
    rules: [
      {
        test: e[31m/\.(tsx|ts|mts|cts|jsx|mjs|cjs)$/ie[39m,
        exclude: e[31m/node_modules|\.meteor\/local/e[39m,
        loader: e[32m'builtin:swc-loader'e[39m,
        options: {
          jsc: {
            baseUrl: e[32m'/Users/user/my_app'e[39m,
            paths: {
              e[32m'/*'e[39m: [ e[32m'*'e[39m, e[32m'/*'e[39m ],
              e[32m'@meteorrn/core'e[39m: [ e[32m'meteor'e[39m ],
              e[32m'react-native-localization'e[39m: [ e[32m'react-localization'e[39m ],
              e[32m'@shared/*'e[39m: [ e[32m'common/*'e[39m ],
              e[32m'@client_root/*'e[39m: [ e[32m'client/*'e[39m ],
              e[32m'/imports/*'e[39m: [ e[32m'imports/*'e[39m ],
              e[32m'/server/*'e[39m: [ e[32m'server/*'e[39m ],
              e[32m'@admin-methods'e[39m: [ e[32m'server/admin/admin_includes'e[39m ],
              e[32m'@printer-server'e[39m: [ e[32m'server/printer'e[39m ],
              e[32m'@admin-router'e[39m: [ e[32m'./client/router/adminRouterEmpty'e[39m ],
              e[32m'@server-includes'e[39m: [ e[32m'./server/bundles/server_includes_user'e[39m ],
              e[32m'@main-router'e[39m: [ e[32m'./client/router/webRoutes'e[39m ]
            },
            parser: { syntax: e[32m'typescript'e[39m, tsx: e[33mtruee[39m, jsx: e[33mtruee[39m },
            target: e[32m'es2015'e[39m,
            transform: { react: { development: e[33mtruee[39m, refresh: e[33mtruee[39m } },
            externalHelpers: e[33mtruee[39m
          }
        }
      },
      {
        test: e[31m/\.js$/e[39m,
        use: {
          loader: e[32m'builtin:swc-loader'e[39m,
          options: { jsc: { parser: { syntax: e[32m'ecmascript'e[39m, jsx: e[33mtruee[39m } } }
        }
      },
      { test: e[31m/\.node$/e[39m, type: e[32m'asset/resource'e[39m }
    ],
    noParse: e[31m/react-native-|react-native-gesture-handler/e[39m
  },
  resolve: {
    extensions: [
      e[32m'.web.ts'e[39m, e[32m'.web.tsx'e[39m,
      e[32m'.web.js'e[39m, e[32m'.ts'e[39m,
      e[32m'.tsx'e[39m,    e[32m'.js'e[39m,
      e[32m'.jsx'e[39m,    e[32m'.html'e[39m,
      e[32m'.mts'e[39m,    e[32m'.cts'e[39m,
      e[32m'.mjs'e[39m,    e[32m'.cjs'e[39m,
      e[32m'.json'e[39m,   e[32m'.wasm'e[39m
    ],
    alias: {
      e[32m'/'e[39m: e[32m'/Users/user/my_app'e[39m,
      e[32m'three/examples'e[39m: [ e[32m'/Users/user/my_app/node_modules/three/examples'e[39m ],
      e[32m'@react-native-async-storage/async-storage'e[39m: [
        e[32m'/Users/user/my_app/node_modules/@react-native-async-storage/async-storage/lib/module/AsyncStorage'e[39m
      ]
    },
    tsConfig: e[32m'/Users/user/my_app/tsconfig.json'e[39m,
    enforceExtension: e[33mfalsee[39m,
    fullySpecified: e[33mfalsee[39m
  },
  externals: [ e[31m/^meteor.*/e[39m, e[31m/^react$/e[39m, e[31m/^react-dom$/e[39m, e[31m/^bcrypt/e[39m ],
  plugins: [
    ReactRefreshRspackPlugin {
      options: {
        exclude: e[31m/node_modules/ie[39m,
        include: e[31m/\.([cm]js|[jt]sx?|flow)$/ie[39m,
        forceEnable: e[33mfalsee[39m,
        injectLoader: e[33mtruee[39m,
        injectEntry: e[33mtruee[39m,
        reloadOnRuntimeErrors: e[33mfalsee[39m,
        overlay: e[33mfalsee[39m
      }
    },
    RequireExternalsPlugin {
      pluginName: e[32m'RequireExternalsPlugin'e[39m,
      _externals: e[1mnulle[22m,
      _externalMap: e[1mnulle[22m,
      _enableGlobalPolyfill: e[33mtruee[39m,
      _isEagerImport: e[1mnulle[22m,
      _lastImports: e[1mnulle[22m,
      _defaultExternalPrefix: e[32m'external 'e[39m,
      filePath: e[32m'/Users/user/my_app/_build/main-dev/client-meteor.js'e[39m,
      backRoot: e[32m'../../'e[39m,
      _funcCount: e[33m1e[39m
    },
    DefinePlugin {
      affectedHooks: e[32m'compilation'e[39m,
      name: e[32m'DefinePlugin'e[39m,
      _args: [
        {
          e[32m'Meteor.isClient'e[39m: e[32m'true'e[39m,
          e[32m'Meteor.isServer'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isTest'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isAppTest'e[39m: e[32m'false'e[39m,
          e[32m'Meteor.isDevelopment'e[39m: e[32m'true'e[39m,
          e[32m'Meteor.isProduction'e[39m: e[32m'false'e[39m
        }
      ]
    },
    BannerPlugin {
      affectedHooks: e[90mundefinede[39m,
      name: e[32m'BannerPlugin'e[39m,
      _args: [
        {
          banner: e[32m'/**\n'e[39m +
            e[32m'* @file client-rspack.js\n'e[39m +
            e[32m'* @description Bundled output generated by Rspack\n'e[39m +
            e[32m'* --------------------------------------------------------------------------\n'e[39m +
            e[32m'* ⚡ Rspack Client App (Development)\n'e[39m +
            e[32m'* --------------------------------------------------------------------------\n'e[39m +
            e[32m'* • [   client-entry.js ] ──▶ [■ client-rspack.js ] ──▶ [   client-meteor.js ]\n'e[39m +
            e[32m'*\n'e[39m +
            e[32m'* This file is the bundled output generated by Rspack.\n'e[39m +
            e[32m'* It contains all application code and assets combined into one build.\n'e[39m +
            e[32m'* It is not used directly, but will be imported by the Meteor main module\n'e[39m +
            e[32m'* file (`client-meteor.js`) so that Meteor runs the Rspack bundle.\n'e[39m +
            e[32m'*\n'e[39m +
            e[32m'* ⚠️ Note: This file is autogenerated. It is not meant to be modified manually.\n'e[39m +
            e[32m'* These files also act as a cache: they can be safely removed and will be\n'e[39m +
            e[32m'* regenerated on the next build. They should be ignored in IDE suggestions\n'e[39m +
            e[32m'* and version control.\n'e[39m +
            e[32m'*/\n'e[39m +
            e[32m'\n'e[39m +
            e[32m'/* No code generated as served by HMR server */\n'e[39m,
          entryOnly: e[33mtruee[39m
        }
      ]
    },
    HtmlRspackPlugin {
      options: {
        inject: e[33mfalsee[39m,
        cache: e[33mtruee[39m,
        filename: e[32m'../_build/main-dev/index.html'e[39m,
        templateContent: e[32m'\n'e[39m +
          e[32m'          <head>\n'e[39m +
          e[32m'            <% for tag in htmlRspackPlugin.tags.headTags { %>\n'e[39m +
          e[32m'              <%= toHtml(tag) %>\n'e[39m +
          e[32m'            <% } %>\n'e[39m +
          e[32m'          </head>\n'e[39m +
          e[32m'          <body>\n'e[39m +
          e[32m'            <% for tag in htmlRspackPlugin.tags.bodyTags { %>\n'e[39m +
          e[32m'              <%= toHtml(tag) %>\n'e[39m +
          e[32m'            <% } %>\n'e[39m +
          e[32m'          </body>\n'e[39m +
          e[32m'        'e[39m
      }
    }
  ],
  watchOptions: {
    ignored: [
      e[32m'**/fakeServer/**'e[39m,    e[32m'**/app/android'e[39m,
      e[32m'**/app/ios'e[39m,          e[32m'**/cloudslicer/**'e[39m,
      e[32m'**/tools/**'e[39m,         e[32m'**/dataAnalyzer/**'e[39m,
      e[32m'**/app/app/**'e[39m,       e[32m'**/app/e2e/**'e[39m,
      e[32m'**/app/**tests**/**'e[39m, e[32m'**/app/Assets/**'e[39m,
      e[32m'**/app/node_modules'e[39m, e[32m'**/*.native.js'e[39m,
      e[32m'**/gen/**'e[39m,           e[32m'**/services/target'e[39m,
      e[32m'**/app/**'e[39m,           e[32m'**/.meteor/local/**'e[39m,
      e[32m'**/dist/**'e[39m
    ]
  },
  devtool: e[32m'source-map'e[39m,
  devServer: {
    static: {
      directory: e[32m'/Users/user/my_app/public'e[39m,
      publicPath: e[32m'/__rspack__/'e[39m
    },
    hot: e[33mtruee[39m,
    liveReload: e[33mtruee[39m,
    port: e[32m'8080'e[39m,
    devMiddleware: { writeToDisk: e[36m[Function: writeToDisk]e[39m }
  },
  cache: e[33mtruee[39m,
  experiments: {
    cache: {
      version: e[32m'swc-development-client'e[39m,
      type: e[32m'persistent'e[39m,
      storage: {
        type: e[32m'filesystem'e[39m,
        directory: e[32m'node_modules/.cache/rspack/client'e[39m
      }
    },
    css: e[33mtruee[39m
  }
}
e[0m
=> Started MongoDB.
e[35m[Rspack Client] <i> [webpack-dev-server] Project is running at:
e[0m
e[35m[Rspack Client] <i> [webpack-dev-server] Loopback: e[36mhttp://localhost:8080/e[39m, e[36mhttp://[::1]:8080/e[39m
<i> [webpack-dev-server] On Your Network (IPv4): e[36mhttp://192.168.0.56:8080/e[39m
<i> [webpack-dev-server] Content not from webpack is served from 'e[36m/Users/user/my_app/publice[39m' directory
e[0m
e[35m[Rspack Client] [client-rspack]:
  e[1m[client-rspack]e[39me[22m compiled e[1me[32msuccessfullye[39me[22m in 728 ms
e[0m
78

You have a project with performance issues that seem to come from the Rspack config. Can you reproduce this often to verify possible fixes?

I suggest you try the next options and measure the memory consumed to verify if fixed:

  • Set devtool: false → retry. Source maps can use a lot of memory on large projects. There are cheaper options, but first disable it completely to confirm.
  • If still high: set experiments.cache=false, cache=false → retry. If this helps, the cache may be corrupted or too large. You can re-enable later with a fresh cache dir.
  • If still high: set RSPACK_MAX_THREADS=1 and retry. Peak memory may come from threading. If it helps, increase slowly to 2, then 3.
  • If fixed, re-enable in this order: threads, cache, then a cheap devtool.

By the way, is your project using barrel index files? Like using the re-export pattern:

export * from './a'
export * from './b'
export * from './c'

I’m migrating a project that uses this and I’m seeing early performance issues. I haven’t confirmed it’s the cause, but research suggests this pattern can increase incremental memory use, introduce circular deps, and block some bundle optimizations. I’m analyzing it to find better patterns for performance and optimizations. I wonder if you use them, just to understand if a fix on these will also help you if I confirm it beforehand.

1 Like
79 
    experiments: {
      cache: false,
    },

This resolves the memory issue for me

I do have a few places where I do export * from I will look at what happens if I remove those

Edit:
I tried getting rid of all export * from and it was still having the memory issue.

I tried reverting to beta 9 which is the last one I had working and got

[Rspack Client Error] Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues: panicked at crates/rspack_core/src/cache/persistent/occasion/make/module_graph.rs:188:8:
should mgm exist

So that might be related?

80

Try always to meteor reset when changing from Meteor versions or even changes on profile. I am improving this automatically cleaning for next betas, but for existing you should consider to do this yourself more often.

I improved the cache in the newer beta.11 version so it creates separate caches for client and server contexts, since these targets need different caches. Maybe this affected on consume lots more of RAM.

Glad to see removing the cache fixes it for you. Persistent cache is experimental in Rspack and may improve in upcoming versions. Another option is to use memory cache, maybe it behaves better.

Also try:

optimization: { usedExports: Meteor.isProduction }

If we disable tree-shaking analysis in development, it might help. I’m seeing reports that this analysis can cause spikes.

1 Like
81

Yeah, I noticed Meteor 3.4 doesn’t jive well with any fancy caching stuff now so I disabled it too

1 Like
82

It does look like it might be a slightly more generic issue than just meteor.

I’m sure we could do something to mitigate, but seems like it should be coordinated with the RSPack team

83

Yes, it could be an Rspack issue. It’s marked experimental, so it may still need improvements.

I haven’t hit it myself. It might be due to the project sizes I’ve used for the integration. I’m now working on larger apps and still haven’t seen it. Do you have any means to reproduce it?

Would enabling the in-memory cache help? Use:

cache: true,
experiments: { cache: true }

You won’t see gains on a full app restart, but it should help incremental rebuilds in dev. This can show if the problem is with serialization/deserialization of Rspack’s persistent cache used by default in Meteor.

If you can confirm the in-memory cache behaves better, I’ll enable it by default for all apps. Otherwise, I’ll disable caching entirely so projects don’t run into these issues until it’s fixed by Rspack. I still encourage everyone to find reproducible cases so Rspack can get more data to resolve it.

Anyway, with and without cache, Rspack is faster than pure Meteor bundling of your app code. But hopefully they can make it stable.

84

For me, registration and login work correctly. I tried several times. Could you check after meteor reset` just in case (I don’t think is related).

image
image1200×318 15.9 KB

I’m not sure what the issue is, it might not be related to your Rspack integration. Please provide exact steps to reproduce.

2 Likes
85

@nachocodoner You’re right, it’s fine. There was a repeatable error on my dev system, and after reading your post here, I tracked it down. Yet again my local mongdb for the project had been corrupted. This is the second time this has happened in the past few months. I believe it has something to do with how I’m maintaining two separate folders for the project (one with tested working code, and one with new code) as I update different node packages, etc. Each has its own separate copy of the mongodb, so I’m not quite sure how it’s happening. I tried to avoid the things that I thought may have been responsible last time.

This time I just verified that everything was good in the older folder, and finder-coped my-project/.meteor/local/db/ from the older folder to the newer folder. I ran a meteor reset, re-built, and all was well. :slight_smile:

1 Like
86

@nachocodoner would it be helpful to open a forum thread where people can contribute their rspack.config.js setups, or is that better handled as a github issue? I can start a thread here if that would be helpful.

87

Is there a way to separate out server and client unit tests?

This is something that was nice about meteor’s old test infrastructure but doesn’t work with RS pack

This is also part of what makes using the test entry point harder since there isn’t really a way to specify the 3 different possible entries (.app-test., server .test. , and client .test.)

Also on my large app even after the ignore fix I am getting memory errors pretty frequently

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x10473625c node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 2: 0x10490c4fc v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 3: 0x104b1bc24 v8::internal::Heap::stack() [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 4: 0x104b19fc4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 5: 0x104b0e5ac v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 6: 0x104b0ede4 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 7: 0x104af2104 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 8: 0x104f0dbb4 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]
 9: 0x1053d1af4 Builtins_CEntry_Return1_ArgvOnStack_NoBuiltinExit [/Users/zacholigschlaeger/.meteor/packages/meteor-tool/.3.4.0-beta.11.1byw6heih2ak++os.osx.arm64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.arm64/dev_bundle/bin/node]

I have not been able to break it down and figure out exactly what causes it, but its not happening every time
Doing this does resolve it, but thats a pretty high amount of memory
NODE_OPTIONS=“–max-old-space-size=40960”

Edit:
Figured out the memory problem was at least partially because unit tests were including the .spec. files which is not what they used to do, which was causing it to include my app test, which then includes way too much and causes it to crash

In my repo

npm run test
and
npm run test-app

both fail when by old Meteor infrastructure they would pass.

88

It seems that has been fixed:

I’ll check in which Rspack version it’s released, likely 1.6.0. There’s also a chance that a beta will include it for early testing.

Remember that your Meteor app can now use any specific Rspack version you define in your package.json. To use the latest version, just update it there. As long as it’s newer than the one bundled by the Meteor Rspack package, it will be preserved. Later, when an official Meteor Rspack update includes a newer version, it will become the new default automatically. But you can always adopt the latest Rspack version whenever you prefer.

89

New extensibility & contributions release available: 3.4-beta.12. This release ensures further Rspack support for real-world app projects, enabling new features and fixes. It also marks the start of contributions from the Meteor community.

Since the last report, I’ve been able to integrate Rspack into real-world apps like Galaxy and successfully get it running and felt all speed gains and modern build environment. I also reviewed additional feedback provided during your transitions.

  • Added Meteor.compileWithRspack, a quick helper for rspack.config.js to define npm dependencies that should be treated as modern or require transpilation through Rspack’s SWC. Useful for npm packages written in modern-only syntax.
  • Added Meteor.compileWithMeteor, a quick helper for rspack.config.js to define npm dependencies that should be skipped by Rspack and handled directly by Meteor’s bundler and Node runtime. Needed for native dependencies.
  • Added Meteor.setCache([true|false|'memory']) as a shortcut to configure Rspack cache in rspack.config.js.
  • Added support for Rspack code-splitting using splitChunks.
  • Improved dev environments where ROOT_URL points to an external server instead of localhost.
  • Ensured shared code can properly resolve modules, allowing node/server-specific modules to be processed as no-ops in client code, supporting natural code sharing.
  • Ensured cache refreshes properly when configuration files like rspack.config.js, .swcrc, .babelrc, or tsconfig.json change, keeping the persistent cache in sync.
  • Ensured externalHelpers in .swcrc is enabled only for client code, since server code already supports needed syntax features.
  • Fixed an issue with Service Workers causing infinite reloads in dev mode.

We’ll continue addressing feedback on the Rspack integration, with the focus now on ensure stability in production environments, eager tests behaving better, support additional modern setups, and other feedback we get with it.

Besides, we’ve included several community contributions that were pending for inclusion in Meteor 3.4, among them:

We still have more contributions to include in this release, especially after Hacktoberfest, during which we received the highest number of contributions in years. Some of these remaining updates will be part of the next beta and round up the final Meteor 3.4 release.

5 Likes
91
92

I updated to beta 12 via:

meteor update --release 3.4-beta.12

I’m now getting these error logs during build:

[i] Rspack DevServer Port: 8080
Rspack plugin error: Could not find rspack.config.js, rspack.config.mjs, or rspack.config.cjs. Make sure @meteorjs/rspack is installed correctly.
packages/core-runtime.js:189
            throw error;
            ^

Error: Could not find rspack.config.js, rspack.config.mjs, or rspack.config.cjs. Make sure @meteorjs/rspack is installed correctly.
    at getConfigFilePath (packages/rspack/lib/processes.js:161:9)
    at module.wrapAsync.self (packages/rspack/rspack_plugin.js:151:26)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)

Node.js v22.20.0