[Bug]: Backbone + rspack

[Piero87]

System Info

System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1 Pro
Memory: 98.14 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
Yarn: 4.0.0 - ~/.nvm/versions/node/v18.18.2/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
Browsers:
Chrome: 126.0.6478.127
Safari: 17.5
npmPackages:
@rspack/cli: ^0.7.5 => 0.7.5
@rspack/core: ^0.7.5 => 0.7.5

Details

I want to migrate from webpack 5 to rspack in my project in which I use Backbone + Marionette (it's a legacy project) but jquery that is a dependency of backbone and marionette seems undefined inside backbone. this is an example I created:

// rspack.config.js
const { RspackManifestPlugin } = require('rspack-manifest-plugin');
const rspack = require('@rspack/core');

module.exports = {
  entry: {
    main: './js/main.js',
  },
  mode: "development",
  devtool: 'source-map',
  output: {
    path: `${__dirname}/assets/js`,
    filename: '[name].[contenthash].js',
    publicPath: 'assets/js/',
    clean: true,
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,                  
        exclude: /node_modules/,
        use: [ 
          { 
            loader: 'babel-loader', 
            options: {
              presets: ['@babel/preset-env']
            } 
          }
        ]
      }
    ]
  },
  plugins: [
    new RspackManifestPlugin({
      filter: (file) => {
        return (
          (file.name.startsWith('vendor-main') || file.name.startsWith('main')) &&
          !file.isModuleAsset &&
          !file.name.endsWith('.map')
        );
      },
      generate: (seed, files) => {
        const manifestFiles = files.reduce((manifest, file) => {
          manifest[file.name] = file.path;
          return manifest;
        }, seed);
        return manifestFiles;
      },
      sort: function () {
        return -1;
      }

    }),
    new rspack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Backbone: 'backbone'
    })
  ]
};

main.js

import $ from 'jquery'; // this can be optional using ProvidePlugin
import Backbone from 'backbone';

console.log(Backbone)

this is the console.log:

as you can see it's undefined, backbone use an UMD for modules, I don't if this change anything, in Webpack this is working, what I'm missing?

Reproduce link

No response

Reproduce Steps

rspack build

[CPunisher]

🤔 I install backbone and jquery, build and run your main.js. Whether or not the ProvidePlugin is configured I don't get undefined $.

[Piero87]

test.zip
This is a zip of a simple project start from scratch, as you can see it's undefined

[xc2]

The way out

Bump backbone up to at least 1.2.0.

Why Backbone 1.1.2 will not work as expected

1. Why ProvidePlugin didn't work as expected

the ProvidePlugin only replace identifier that is a free variable in a module like window.jQuery or free/undefined $, and unfortunately there's no free identifier to jquery in backbone's source code.

2. Backbone 1.1.2 doesn't provide jQuery to its factory at all when it is used in a commonjs module system.

But 1.2.0 does.

The highlighted code below shows Backbone 1.1.2 doesn't provide jQuery to its factory at all when it is used in a commonjs module system.

[xc2]

In addition, this case works with webpack as webpack has a builtin amd support while rspack doesn't (#4313).

To reproduce this case with webpack, add amd: false to webpack config.

[Piero87]

@xc2 Thank you very much for the great explanation

[xc2]

I'm closing this issue for:

1. the reason of this case is lack of amd support which has been tracked by the issue support analyze AMD module format #4313
2. a solution has been suggested above.

Please feel free to continue this thread if you have any more questions about this case.