babel: [Bug]: Fragments no longer work in mithril

💻

Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

unfortunately I can’t provide a repo as it’s from my company’s gitlab which is private

Configuration file name

babel.config.js

Configuration

module.exports = {
	presets: ["@babel/preset-env"],
	plugins: [
		"@babel/plugin-proposal-object-rest-spread",
		["babel-plugin-root-import", { rootPathSuffix: "src" }],
		[
			"@babel/plugin-transform-react-jsx",
			{
				pragma: "m",
				pragmaFrag: "'['"
			}
		]
	],
	sourceMaps: true,
	retainLines: true,
	env: {
		test: {
			plugins: ["@babel/plugin-transform-modules-commonjs"]
		}
	}
};

Current and expected behavior

when upgrading from 7.19.0 to 7.20.7 my mithril application stops working. I have followed the steps outlined on their page and it was workign previously https://mithril.js.org/jsx.html. Note that I am using babel.config.js though, not .babelrc as they recommend. The issue seems to be with how 7.20.7 is recognizing my fragments. When I change them to divs the application no longer fails but doesn’t render properly because I would have to modify all the CSS to handle all the new nested divs.

I can’t seem to find a list of what was changed from 7.19.0 ti 7.20.7 or the steps involved to upgrade my application

Environment

System: OS: Windows 10 10.0.19045 Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE npm: 8.14.0 - C:\Program Files\nodejs\npm.CMD npmPackages: @babel/plugin-proposal-object-rest-spread: ^7.20.7 => 7.20.7 @babel/plugin-transform-react-jsx: ^7.20.7 => 7.20.7
@babel/preset-env: ^7.20.2 => 7.20.2 babel-eslint: ^10.1.0 => 10.1.0 babel-jest: ^29.3.1 => 29.3.1 babel-loader: ^9.1.2 => 9.1.2 babel-plugin-root-import: ^6.6.0 => 6.6.0 jest: ^29.3.1 => 29.3.1 webpack: ^5.75.0 => 5.75.0

Possible solution

No response

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 17 (11 by maintainers)

Most upvoted comments

No problem, thanks for the responses! Do you see anything in my config file that maybe needs to be changed to handle this?

As a workaround, please specify pragmaFrag: "[" (without single quotes) when using Babel >= 7.20.7. Presumably, pragmaFrag should be something like React.Fragment (as a member expression) or Fragment (as an identifier). Passing a string literal "'['" is sort of uncharted territory. Anyway the breaking change here is never intended and I will try to restore it to the pre-7.20.7 behaviour.

// Input
/* @jsxFrag '[' */
/* @jsx m */
<>Test</>;

// Output
// Before 7.20.7
m('[', null, "Test");
// After 7.20.7
m("'['", null, "Test");

JLHwung on Jan 18, 2023