The styled-jsx/babel Babel plugin incorrectly inserts ESM imports into CJS files

[jaydenseric]

Do you want to request a feature or report a bug?

Bug!

What is the current behavior?

The styled-jsx/babel Babel plugin incorrectly inserts code using import instead of require when the Babel sourceType for the file is script (CJS).

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

See this reproduction in the Babel REPL.

With this input:

'use strict';

const React = require('react');

module.exports = function Foo() {
  return (
    <div>
      <style jsx>{`
        div {
          color: red;
        }
      `}</style>
    </div>
  );
};

Using the @babel/preset-react and styled-jsx/babel Babel plugins, with the sourceType set to script (CJS), the output code is:

"use strict";

import _JSXStyle from "styled-jsx/style";

const React = require("react");

module.exports = function Foo() {
  return /*#__PURE__*/ React.createElement(
    "div",
    {
      className: "jsx-4156136654"
    },
    /*#__PURE__*/ React.createElement(
      _JSXStyle,
      {
        id: "4156136654"
      },
      "div.jsx-4156136654{color:red;}"
    )
  );
};

Note that import _JSXStyle from "styled-jsx/style"; has been inserted. A require expression should have been inserted, not an import statement.

The CJS module format is now corrupted, resulting in code that can't be run by Node.js or be bundled correctly via webpack or other bundlers.

What is the expected behavior?

The styled-jsx/babel Babel plugin should always respect the module format indicated by the Babel sourceType when transforming code. If the sourceType is script, a require expression should be inserted, not an import statement.

Environment (include versions)

• styled-jsx: v3.3.1

Did this work in previous versions?

• Probably not.

[jaydenseric]

These seem to be the offending locations in the Babel plugin code:

• styled-jsx/src/babel.js

  Lines 309 to 310 in eac1703

  	const importDeclaration = createReactComponentImportDeclaration(state)
  	node.body.unshift(importDeclaration)

• styled-jsx/src/_utils.js

  Lines 623 to 633 in eac1703

  	export const createReactComponentImportDeclaration = state => {
  	const styleModule =
  	typeof state.opts.styleModule === 'string'
  	? state.opts.styleModule
  	: 'styled-jsx/style'
  	return t.importDeclaration(
  	[t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
  	t.stringLiteral(styleModule)
  	)
  	}

[jaydenseric]

Edit: Sorry, I wrote this comment in the wrong repo 😅