Support Node.js ESM

[jaydenseric]

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

Bug.

What is the current behavior?

The styled-jsx/babel Babel plugin is incompatible with Node.js ESM in two ways, relating to mandatory file extensions:

1. It only recognises extensionless styled-jsx deep imports, e.g. import css from 'styled-jsx/css' works but import css from 'styled-jsx/css.js' doesn't.
2. It creates extensionless import specifiers that Node.js can't resolve, e.g. import _JSXStyle from 'styled-jsx/style'.

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

For the first issue:

In demo-1.mjs:

import React from 'react';
import css from 'styled-jsx/css.js';

const styles = css.resolve`
  div {
    color: red;
  }
`;

Try to transpile that file with the styled-jsx/babel Babel plugin, and note that it did not do any transformations.

For the second issue:

In a project with styled-jsx installed, in demo-2.mjs:

// The sort of import styled-jsx/babel currently inserts.
import _JSXStyle from 'styled-jsx/style';

Run with a current Node.js version (e.g. v14.2):

node demo-2.mjs

And note the crash:

internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/[redacted]/node_modules/styled-jsx/style' imported from /[redacted]/demo-2.mjs
Did you mean to import styled-jsx/style.js?
    at finalizeResolution (internal/modules/esm/resolve.js:277:11)
    at packageResolve (internal/modules/esm/resolve.js:608:14)
    at moduleResolve (internal/modules/esm/resolve.js:655:14)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:748:11)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
    at link (internal/modules/esm/module_job.js:41:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

What is the expected behavior?

The styled-jsx/babel Babel plugin should expect, and produce, ESM compatible with Node.js.

Environment (include versions)

• OS: N/A
• Browser: N/A
• styled-jsx (version): v3.2.5

Did this work in previous versions?

Doubt it.

[jaydenseric]

Another few things to support Node.js ESM:

• There should be a decoy styled-jsx/css.mjs file that throws relevant errors about transpilation having not worked. Having a file there with default and named exports also prevents ESLint plugins from complaining what you import doesn’t resolve.
• Code examples in the readme should be Node.js ESM compatible; currently the import specifiers don't have file extensions.

[giuseppeg]

In the latest release we introduced this option https://github.com/zeit/styled-jsx#stylemodule Could it be a solution to this issue?

[jaydenseric]

Nope.