Webpack omits exposed modules when sideEffects are enabled

[psimk]

Reopening issue #89. The same problem still occurs on version 1.0.1 of expose-loader

• Operating System:
• Node Version: 12.8.3
• NPM Version: 6.14.8
• webpack Version: 4.35.0
• expose-loader Version: 1.0.1

Preface

sideEffects is set to true when mode is production.

Expected Behavior

When mode is production, styled-components is bundled and exposed as a global styled variable.

Actual Behavior

When mode is production, neither styled-components or the exposed global styled are included into the bundled output.

Code

import "expose-loader?exposes=styled!styled-components";

webpack.config.js

How Do We Reproduce?

I have forked the reproduction branch from the previous issue and updated it to use 1.0.1 of expose-loader.
https://github.com/psimk/reproduction-expose-loader-optimization

Once again, the bug reproduction can be found in the with-expose-loader directory. There are also variants for but without expose-loader and one with sideEffects: false, both of which do produce the expected output. The build output is part of the repository, so you can inspect it without cloning. Additional information can be found in the repository readme.

[alexander-akait]

Can you try sideEffects: false on the loader level

[psimk]

@evilebottnawi Might be a dumb question, but how would I disable sideEffects on the loader level? don't see anything about it in webpack's documentation.

[alexander-akait]

Just add sideEffects where you set test/exclude/include, https://webpack.js.org/configuration/module/#rulesideeffects, bad documentation

[psimk]

This would mean that I can't use the inline syntax as it can't accept rule options?

I have attempted it with sideEffects disabled:

// main.js
import styled from "styled-components";

// webpack.config.js
{
  sideEffects: false,
  test: require.resolve("styled-components"),
  loader: "expose-loader",
  options: {
     exposes: "styled",
  },
},

but no luck, styled-components still seems to be removed.

Also, I have tried using the non-inline sytax with sideEffects disabled, then the styled-components module is bundled, but there's no exposed styled global. I have added this reproduction to my repository: https://github.com/psimk/reproduction-expose-loader-optimization/tree/master/with-non-inline-expose-loader

[alexander-akait]

What is real use case to use styled-components and expose-loader?

[psimk]

a proprietary library, which requires styled-components to be defined globally. However, I am guessing, because we are not using styled-components in our own code, sideEffects then removes outright.

[alexander-akait]

Why do not use externals?

[psimk]

Isn't externals for defining globally scoped variable's as importable modules? I need the opposite, that's why I am using expose-loader. styled-components needs to be exposed as a global.

[alexander-akait]

You can try this workaround:

import { something } from "expose-loader?exposes=styled!styled-components";

if (!something) {}

[alexander-akait]

Ref: webpack/webpack#6571

[alexander-akait]

I don' think we can fix it here, because it was stripped by webpack

[alexander-akait]

Found solution, fix will be in near future

[alexander-akait]

Please try https://github.com/webpack-contrib/expose-loader/releases/tag/v1.0.3