import side-effects are removed

[layershifter]

Environment

• Linaria version: @linaria/[email protected], @linaria/[email protected]
• Bundler (+ version): N/A
• Node.js version: 16
• OS: N/A

Description

I am trying to get our setup with Storybook & Webpack loader running, the problem that I faced is basically:

/Users/olfedias/WebstormProjects/linaria-side-effects/node_modules/@linaria/babel-preset/lib/module.js:347
        throw new EvalError(`${e.message} in${callstack.join('\n| ')}\n`);
        ^

EvalError: regeneratorRuntime is not defined in
| /linaria-side-effects/node_modules/@storybook/store/dist/cjs/StoryStore.js
| /linaria-side-effects/node_modules/@storybook/store/dist/cjs/index.js
| /linaria-side-effects/node_modules/@storybook/client-api/dist/cjs/ClientApi.js
| /linaria-side-effects/node_modules/@storybook/client-api/dist/cjs/index.js
| /linaria-side-effects/node_modules/@storybook/react/node_modules/@storybook/core-client/dist/cjs/preview/index.js
| /linaria-side-effects/node_modules/@storybook/react/node_modules/@storybook/core-client/dist/cjs/index.js
| /linaria-side-effects/node_modules/@storybook/react/node_modules/@storybook/core/dist/cjs/index.js
| /linaria-side-effects/node_modules/@storybook/react/dist/cjs/client/preview/index.js
| /inaria-side-effects/node_modules/@storybook/react/dist/cjs/client/index.js

The minimal repro is to include import { storiesOf } from "@storybook/react".

import { storiesOf } from "@storybook/react";
import { styled } from "@linaria/react";
import React from "react";

const Title = styled.h1`
  color: red;
`;

storiesOf("Title", module).addStory("basic", () => React.createElement(Title));

I debugged and have seen that an import for regeneratorRuntime is missing (import "regenerator-runtime/runtime"). I made a simpler fixture to check if it's a problem with imports.

Relevant parts of the log:

  linaria:transform:00001 [init] /Users/olfedias/WebstormProjects/linaria-side-effects/fixture-simple/index.js (__linariaPreval)
  linaria:transform:00001       import { styled } from "@linaria/react";
  linaria:transform:00001       import React from "react";
  linaria:transform:00001       
  linaria:transform:00001       import bgColor from "./bgColor";
  linaria:transform:00001       import "./side-effect";
  linaria:transform:00001       
  linaria:transform:00001       const Title = styled.h1`
  linaria:transform:00001         background: ${bgColor};
  linaria:transform:00001         color: ${process.env.FIXTURE_COLOR};
  linaria:transform:00001       `;
  linaria:transform:00001       
  linaria:transform:00001       console.log(React.createElement(Title));

  ----

  linaria:shaker:00001 [start] /Users/olfedias/WebstormProjects/linaria-side-effects/fixture-simple/index.js, onlyExports: __linariaPreval +0ms
  linaria:shaker:00001 [import-and-exports] imports: 2 (side-effects: 1), exports: 1, reexports: 0 +1ms
  linaria:shaker:00001 [end] remaining imports: Map(1) { './bgColor' => [ 'default' ] } +10ms

  ----

  linaria:transform:00001 [stage-1] << (__linariaPreval)
  linaria:transform:00001       "use strict";
  linaria:transform:00001       
  linaria:transform:00001       var _bgColor = _interopRequireDefault(require("./bgColor"));
  linaria:transform:00001       function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  linaria:transform:00001       const _exp = /*#__PURE__*/() => _bgColor.default;
  linaria:transform:00001       const _exp2 = /*#__PURE__*/() => process.env.FIXTURE_COLOR;
  linaria:transform:00001       console.log(null);
  linaria:transform:00001       exports.__linariaPreval = {
  linaria:transform:00001         _exp: _exp,
  linaria:transform:00001         _exp2: _exp2
  linaria:transform:00001       }; +0ms

Evaluated code does not contain an import for side-effect.js and it breaks 💥

Reproducible Demo

• Clone https://github.com/layershifter/linaria-side-effects-issue
• Run yarn
• Run node test.js or test-simple.js