Missing dependency: @babel/runtime

[janie314]

Description

I think @babel/runtime should be added to our package.json as a dependency.

Reproducing / Demonstrating the issue

1. Create a blank React/Typescript project.

janie@ischia ~gitlab # npm init vite@latest
✔ Project name: … test
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /home/janie/gitlab/test...

Done. Now run:

  cd test
  npm install
  npm run dev

2. Add react-slider as a dependency.

janie@ischia ~gitlab # cd test
janie@ischia ~gitlab/test # npm i

added 218 packages, and audited 219 packages in 6s

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
janie@ischia ~gitlab/test # npm add react-slider

added 4 packages, and audited 223 packages in 941ms

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
janie@ischia ~gitlab/test # npm i --save-dev @types/react-slider

3. Add in a <ReactSlider> element.

janie@ischia ~gitlab/test # vim src/App.tsx
janie@ischia ~gitlab/test # cat src/App.tsx
import ReactSlider from "react-slider";

function App() {
  return (
    <>
      <div>
        <ReactSlider />
      </div>
    </>
  );
}

export default App;

4. Try to build the project, and see that it fails!

janie@ischia ~gitlab/test # npm run build

> test@0.0.0 build
> tsc && vite build

vite v5.0.10 building for production...
✓ 19 modules transformed.
[vite]: Rollup failed to resolve import "@babel/runtime/helpers/inheritsLoose" from "/home/janie/gitlab/test/node_modules/react-slider/dist/es/prod/components/ReactSlider/ReactSlider.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@babel/runtime/helpers/inheritsLoose" from "/home/janie/gitlab/test/node_modules/react-slider/dist/es/prod/components/ReactSlider/ReactSlider.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///home/janie/gitlab/test/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:66953:27)
    at onwarn (file:///home/janie/gitlab/test/node_modules/@vitejs/plugin-react/dist/index.mjs:250:9)
    at onRollupWarning (file:///home/janie/gitlab/test/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:66978:9)
    at onwarn (file:///home/janie/gitlab/test/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:66698:13)
    at file:///home/janie/gitlab/test/node_modules/rollup/dist/es/shared/node-entry.js:17370:13
    at Object.logger [as onLog] (file:///home/janie/gitlab/test/node_modules/rollup/dist/es/shared/node-entry.js:19028:9)
    at ModuleLoader.handleInvalidResolvedId (file:///home/janie/gitlab/test/node_modules/rollup/dist/es/shared/node-entry.js:17974:26)
    at file:///home/janie/gitlab/test/node_modules/rollup/dist/es/shared/node-entry.js:17932:26

5. Now add in @babel/runtime, and see that the build works.

janie@ischia ~gitlab/test # npm add @babel/runtime
added 2 packages, and audited 226 packages in 892ms

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
janie@ischia ~gitlab/test # npm run build

> test@0.0.0 build
> tsc && vite build

vite v5.0.10 building for production...
✓ 35 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/index-T74ItOsL.css    0.92 kB │ gzip:  0.50 kB
dist/assets/index-6ybtwj0_.js   155.03 kB │ gzip: 49.57 kB
✓ built in 1.32s

Other

If we agree with this issue diagnosis, I'm happy to code a PR!

[cisc0disco]

Same thing happening to me with Next.js

[samparmenter]

Just started happening for me and I have no idea whats changed. Was fine last night. Is no longer fine today.

[anamulhaque22]

Same thing happening to me with Next.js