module evaluates ESM helpers from SWC output

[layershifter]

Environment

• Linaria version:

    "@linaria/babel-preset": "^4.3.3",
    "@linaria/shaker": "^4.2.7",
    "@linaria/tags": "^4.3.0",
    "@linaria/utils": "^4.3.0",
    "@linaria/webpack-loader": "^4.1.11",
  

• Bundler (+ version): Webpack 5 + Next.js
• Node.js version: Node 16
• OS: MacOS

Description

Basically the problem is the same as in #1046 and repros in (microsoft/griffel#309). I am struggling to provide an isolated repro for this:

To run it:

• clone branch
• yarn
• yarn nx test @griffel/e2e-nextjs

The test will fail, but it will create a temporary directory like that:

✔ Temporary directory created under /var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL

Move to that dir and run rm -rf .next && DEBUG=linaria\* LINARIA_LOG=debug yarn next build.

Input

import _object_spread from "@swc/helpers/src/_object_spread.mjs";
import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { makeStyles } from "@griffel/react";
import Head from "next/head";
import * as React from "react";
var useStyles = makeStyles({
    container: _object_spread_props(_object_spread({}, {
        display: "flex"
    }), {
        width: "200px"
    })
});
var Home = function() {
    var styles = useStyles();
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx(Head, {
                children: /*#__PURE__*/ _jsx("title", {
                    children: "My app"
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: styles.container,
                children: "Hello world!"
            })
        ]
    });
};
export default Home;

The interesting part of the log:

  linaria:transform:00001 [stage-1:async-resolve] ✅ @swc/helpers/src/_object_spread_props.mjs -> /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread_props.mjs +5ms
  linaria:transform:00008 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread.mjs is ignored. If you want it to be processed, you should add '.mjs' to the "extensions" option. +0ms
  linaria:transform:00009 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread_props.mjs is ignored. If you want it to be processed, you should add '.mjs' to the "extensions" option. +0ms
  linaria:transform:00001 [stage-2] >> evaluate __linariaPreval +8ms
  linaria:module:00001 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/pages/index.tsx +990ms
  linaria:module:00001 [evaluate:fragment-01] 
  linaria:module:00001 	"use strict";
  linaria:module:00001 	
  linaria:module:00001 	var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  linaria:module:00001 	var _object_spread2 = _interopRequireDefault(require("@swc/helpers/src/_object_spread.mjs"));
  linaria:module:00001 	var _object_spread_props2 = _interopRequireDefault(require("@swc/helpers/src/_object_spread_props.mjs"));
  linaria:module:00001 	var _exp = /*#__PURE__*/() => ({
  linaria:module:00001 	  container: (0, _object_spread_props2.default)((0, _object_spread2.default)({}, {
  linaria:module:00001 	    display: "flex"
  linaria:module:00001 	  }), {
  linaria:module:00001 	    width: "200px"
  linaria:module:00001 	  })
  linaria:module:00001 	});
  linaria:module:00001 	exports.__linariaPreval = {
  linaria:module:00001 	  _exp: _exp
  linaria:module:00001 	}; +0ms
  linaria:module:00001 [require] @babel/runtime/helpers/interopRequireDefault -> /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@babel/runtime/helpers/interopRequireDefault.js +1ms
  linaria:module:00001 [eval-cache] ❌ module:00003 is going to be initialized +0ms
  linaria:module:00003 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@babel/runtime/helpers/interopRequireDefault.js +998ms
  linaria:module:00003 [code-cache] ❌ +0ms
  linaria:module:00003 [evaluate:fragment-01] 
  linaria:module:00003 	function _interopRequireDefault(obj) {
  linaria:module:00003 	  return obj && obj.__esModule ? obj : {
  linaria:module:00003 	    "default": obj
  linaria:module:00003 	  };
  linaria:module:00003 	}
  linaria:module:00003 	module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports; +1ms
  linaria:module:00003 [evaluated] the whole exports was overridden with [Function: _interopRequireDefault] +0ms
  linaria:module:00001 [require] @swc/helpers/src/_object_spread.mjs -> /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread.mjs +1ms
  linaria:module:00001 [eval-cache] ❌ module:00008 is going to be initialized +0ms
  linaria:module:00008 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread.mjs +0ms
  linaria:module:00008 [evaluated] the whole exports was overridden with '/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread.mjs' +0ms
  linaria:module:00001 [require] @swc/helpers/src/_object_spread_props.mjs -> /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread_props.mjs +0ms
  linaria:module:00001 [eval-cache] ❌ module:00009 is going to be initialized +0ms
  linaria:module:00009 [init] /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread_props.mjs +0ms
  linaria:module:00009 [evaluated] the whole exports was overridden with '/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@swc/helpers/src/_object_spread_props.mjs' +0ms
  linaria:module:00001 [evaluated] set __linariaPreval: { _exp: [Function: _exp] } +0ms
  linaria:module:00001 [evaluated] get __linariaPreval: { _exp: [Function: _exp] } +0ms
  linaria:transform:00001 [stage-2] << evaluated __linariaPreval [Function (anonymous)] +2ms
  linaria:collect:start /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/pages/index.tsx +992ms
  linaria:template-parse:generated-meta slug: u1rhmy4, displayName: useStyles, className: u1rhmy4 +122ms
...........
MakeStyles:styles TypeError: (0 , _object_spread2.default) is not a function
    at _exp (/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/pages/index.tsx:7:77)
    at wrap (/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@linaria/babel-preset/lib/transform-stages/2-eval.js:14:12)
    at /private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@linaria/babel-preset/lib/transform-stages/2-eval.js:33:19
    at Array.forEach (<anonymous>)
    at evalStage (/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@linaria/babel-preset/lib/transform-stages/2-eval.js:32:33)
    at syncStages (/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@linaria/babel-preset/lib/transform.js:47:45)
    at transform (/private/var/folders/v4/l_41mr81261dpdvcdldkgdbh0000gn/T/nextjs-98284-78vGr91L2kUL/node_modules/@linaria/babel-preset/lib/transform.js:146:10)
...........

The most relevant line is:

  linaria:module:00001 	var _object_spread2 = _interopRequireDefault(require("@swc/helpers/src/_object_spread.mjs"));
  linaria:module:00001 	var _object_spread_props2 = _interopRequireDefault(require("@swc/helpers/src/_object_spread_props.mjs"));

It tries to evaluate ESM helpers and fails 💥

Reproducible Demo

See above.