Compilation error when building CRA project on Linux

[livyk]

Environment

• Linaria version: 3.0.0-beta.1
• Create React App: 4.0.3
• Node.js version: 14.16.0
• OS: Ubuntu 18.04.5

The error is also reproduced when configuring with craco-linaria. The error is also reproducible when configuring with craco-linaria and linaria 2.1.0

Description

I am styling custom React components with styled. Using object spread / rest syntax in props results in a compilation error.
The error message looks like this:

./src/App.tsx
Error: /home/av1at0r/linaria-react-app/src/App.tsx: An unexpected runtime error occurred during dependencies evaluation:
/home/av1at0r/linaria-react-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js:1
(function (exports) { import objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
^^^^^^

SyntaxError: Cannot use import statement outside a module
It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window.
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.
at transformFile.next (<anonymous>)
at run.next (<anonymous>)
at Generator.next (<anonymous>)

A similar error a similar error occurs when using array spread in a function argument

./src/App.tsx
Error: /home/av1at0r/linaria-react-app/src/App.tsx: An unexpected runtime error occurred during dependencies evaluation:
/home/av1at0r/linaria-react-app/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray.js:1
(function (exports) { import arrayWithHoles from "@babel/runtime/helpers/esm/arrayWithHoles";
^^^^^^

SyntaxError: Cannot use import statement outside a module
It may happen when your code or third party module is invalid or uses identifiers not available in Node environment, eg. window.
Note that line numbers in above stack trace will most likely not match, because Linaria needed to transform your code a bit.

One of the most important details is that the bug is reproducible only on Linux. Build works without problems on Windows.

Reproducible Demo

The master branch demonstrates an error when using object spread / rest.
The error disappears if you make spread not in the props - argument, but in the body of the function.

src/CustomLink.tsx
...
const CustomLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
    const { href, ...rest } = props
...
}

The array-spread branch demonstrates an error when using array spread.
The error disappears if you make spread not in reduce callback - argument, but in the body of the function.

src/cover.ts
...
    return values.reduce((acc, curr) => {
        const key = curr[0];
        const value = curr[1];
        acc[key] = value;
...
}

I would be grateful for information on any way to fix the error without giving up the spread / rest syntax.

[Anber]

Hi @av1at0r!

Thank you for your report. The fix will be released with 3.0.0-beta.2.

[iMoses-Apiiro]

please update the 2.x version as well, as many people won't be moving to version 3 before it gets out of beta