Missing something when transpiling transitive ESModule dependency

[Reeska]

Hi,

These days I'm playing with Snowpack 3 and check if it can work for my current project. I can see it's very fast comparing to other bundlers, amazing ! So I hope to make it work with my existant code.

But I've encounter the following error with Styled Components that is used by Atlaskit :

Unhandled Runtime Error
Uncaught TypeError: styled_components_1.default.span is not a function

But the same code is working in a fresh Create-React-App install, moreover if I use Styled Components directly in my code with Snowpack I don't have the issue, so it's seems to be an issue with how Snowpack compile/integrate Styled Components into Atlaskit component.

• Repo build with CRA : https://github.com/Reeska/cra-typescript-atlaskit
• Repo build with CSA : https://github.com/Reeska/csa-react-typescript-atlaskit
• A branch where I use styled components directly : https://github.com/Reeska/csa-react-typescript-atlaskit/tree/use-styled-comp-directly

I've deep dive to try to understand what happens.

There is head of the styled-components' package.json:

{
  "name": "styled-components",
  "version": "3.4.10",
  "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
  "typings": "typings/styled-components.d.ts",
  "main": "dist/styled-components.cjs.js",
  "jsnext:main": "dist/styled-components.esm.js",
  "module": "dist/styled-components.esm.js",
  "react-native": "dist/styled-components.native.cjs.js",
  "browser": {
    "./dist/styled-components.esm.js": "./dist/styled-components.browser.esm.js",
    "./dist/styled-components.cjs.js": "./dist/styled-components.browser.cjs.js",
    "./dist/styled-components-no-parser.esm.js": "./dist/styled-components-no-parser.browser.esm.js",
    "./dist/styled-components-no-parser.cjs.js": "./dist/styled-components-no-parser.browser.cjs.js"
  },

I found that is this browser entry ./dist/styled-components.esm.js that is used by Snowpack and integrate into node_modules/.cache/snowpack/development/@atlaskit/toggle.js:

// Line 3464
function __importDefault(mod) {
    return (mod && mod.__esModule) ? mod : { default: mod };
}

// Line 7450
var styledComponents_browser_esm = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': styled,
  css: css,
  keyframes: keyframes,
  injectGlobal: injectGlobal,
  isStyledComponent: isStyledComponent,
  consolidateStreamedStyles: consolidateStreamedStyles,
  ThemeProvider: ThemeProvider,
  withTheme: withTheme,
  ServerStyleSheet: ServerStyleSheet,
  StyleSheetManager: StyleSheetManager,
  __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS: __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS
});

// Line 8125
var styled_components_1 = tslib_es6.__importDefault(styledComponents_browser_esm);

But even styledComponents_browser_esm is a ES6 module, it doesn't have the flag __esModule whereas it was transpiled by Snowpack from ESM to CJS. This is ends with styled_components_1 wrongly wrapped this way with an extra default:

{
  default: {
    __proto__: null,
    'default': styled,
    css: css,
    keyframes: keyframes,
    injectGlobal: injectGlobal,
    isStyledComponent: isStyledComponent,
   // ...
  }
}

That explains the error :

TypeError: styled_components_1.default.span is not a function

Because as see above it is wrongly styled_components_1.default.default.span.

But the behavior is different when I import styled-components directly in my code: no error.

Any help would be much appreciated :-).

[Reeska]

Inspired by this comment I've found a temporary solution to fix this issue using patch-package to force Snowpack to use CJS module instead of ESM module from Styled Components.

Here the branch where I've applied the fix : https://github.com/Reeska/csa-react-typescript-atlaskit/tree/fix-styled-components-dep

As explained in the README.md, I have:

1. manually edited the styled-components package.json to change jsnext:main and module property to CJS module.
2. Run this command: npx patch-package styled-components --exclude '\\.js$'
3. Add postinstall hook in my own package.json to run patch-package for every install
4. That works 🎉

[FredKSchott]

Nice workaround! Does adding packageOptions.packageLookupFields: ['jsnext:main'] to your config file fix this as well? If so, maybe this should be supported by default.

[cherihung]

Moreover, the solution with packageLookupFields is not ideal because it will be applied for all dependencies.

right. I just tried this because of a similar problem. but it broke other dependencies.

[Reeska]

Indeed, this solution is working for the repro project, but for real project I use patch-package instead.

[cherihung]

I've seen this problem a couple of times now with using packages compiled as CJS that have style-components particularly. Where it is with Snowpack transpile again as CJS, wrapping in default. I had posted a question about it but my diagnose at the time was wrong. (I thought it was related to named imports but no).

[melissamcewen]

Hi all, if anyone wants to file a bug on this, it would be much appreciated! Would love to debug

[Reeska]

I created a bug here : #2908, thanks for your help 🙂.

[Reeska]

Hello,

I tried with the latest version of Snowpack (3.8.3), and I have the same issue (in this branch https://github.com/Reeska/csa-react-typescript-atlaskit/tree/try-snowpack-3.8.3), so it seems the issue is still here.

Today I check if there is a similar issue is with Vitejs (as it's also use esbuild), but it's work pretty well: https://github.com/Reeska/vite-react-typescript-atlaskit

Is it possible to re-open the related issue #2908 @FredKSchott ? :-)