Bug when bundling a browser-ready package

[FalconPilot]

What is the current behavior?

I'm working on a project that involves making a browser-ready version of a package. So far, nothing fancy. There's a package A, with react-use as a dependency, as a package B, with package A as a dependency. There's a rollup config to make a browser-ready build of package B (not A).

However, when package B is built, for some reason, when imported on a browser with requireJS, requireJS tries to import react-universal-interface as a file that should be present on the server. This breaks any page using the bundle :/

I'm sorry if it's a very hard to reproduce issue, but I'm out of solutions and it seems like react-universal-interface's usage is incriminated here for not being able to be made browser-ready due to it being a simple tsc build of multiple JS files instead of an AMD module. Perhaps just changing this library for something else would solve the issue?

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

Alas, it's a problem that involves a rollup build and, therefore, for consistency's sake, I included the entire configuration to make it as precise as possible (sorry, there are also external plug-ins :( )

1. Have a yarn workspace
2. Have a first package that uses react-use (and is bundled with tsup with the arguments --dts --target es5)
3. Have a second package that uses Rollup using the configuration given below
4. Bundle that second package, and inspect the resulting bundle

Here's the rollup config for the "browser-ready" package:

import replace from '@rollup/plugin-replace'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import json from '@rollup/plugin-json'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/index.ts',
  output: {
    name: 'PACKAGE_NAME',
    file: 'dist/bundle.min.js',
    format: 'amd',
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    peerDepsExternal(),
    resolve({
      browser: true,
      moduleDirectories: ['../../node_modules', '../packages'],
      preferBuiltins: false,
    }),
    json(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      compilerOptions: { outDir: 'dist', declaration: false, jsx: 'react' },
    }),
    terser(),
  ],
}

What is the expected behavior?

The browser-ready bundle shouldn't consider react-universal-interface as an external dependency. Plus, it's only used for useScratch, which isn't even used in our project's packages :/

A little about versions:

• OS: OS X 11.6.5
• Browser (vendor and version): Chromium 106.0.5249.119
• React: 18.2.0
• react-use: ^17.4.0
• Did this worked in the previous package version? : I couldn't say as we just added react-use as a dependency