Conflict between data-presets and data-targets #17769
Description
💻
- Would you like to work on a fix?
How are you using Babel?
babel-loader (webpack)
Input code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom/client": "https://esm.sh/react-dom@18/client"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React from "react";
import ReactDOMClient from "react-dom/client";
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(React.createElement('h1', null, 'Hello, world!'));
</script>
</body>
</html>Configuration file name
No response
Configuration
No response
Current and expected behavior
In previous Babel (< 7.29.0), the above code snippet works well. However, after 7.29.0, where data-targets is introduced, there will be an error Uncaught Error: .targets["esmodules"] must be a boolean, or undefined thrown.
Taking a quick look, it seems like because here
will addtargets.esmodules = "intersect";, if we specify type="text/babel" (for browser ESM to work), it will always add this default value. However, this default value is invalid according to
Environment
@babel/standalone@7.29.0Chrome 144.0.7559.98
Possible solution
No response
Additional context
No response