Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v2: code splitting with `process` in shared module throws in child bundle

See original GitHub issue

🐛 bug report

When using styled-components within a parent and child bundle, the application throws at runtime with TypeError: c(...).div is not a function. It looks like, within the child bundle, styled-components refers to the named imports instead of the default import.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "scripts": {
    "start": "rm -rf .parcel-cache dist && parcel build index.html && serve dist"
  },
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "parcel": "^2.0.0-alpha.2.1",
    "serve": "^11.2.0"
  }
}

🤔 Expected Behavior

It should allow importing styled-components in a parent and child bundle with the same syntax.

😯 Current Behavior

Currently, it fails. It would work when using styled.default.div in the child bundle.

💻 Code Sample

EDIT: See a smaller sample here.

index.html

<!DOCTYPE html>
<main></main>
<script src="./index.js"></script>

index.js

import React, { Suspense } from "react";
import { render } from "react-dom";
import styled from "styled-components";

const Page = React.lazy(() => import("./Page"));

const Section = styled.section`
  width: 100%;
`;

render(
  <Suspense fallback={null}>
    <Section />
    <Page />
  </Suspense>,
  document.querySelector("main")
);

page.js

import React from "react";
import styled from "styled-components";

const Div = styled.div`
  width: 100%;
`;

const Page = () => <Div />;

export default Page;

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-alpha.2.1
Node	v12.8.1

Issue Analytics

State:
Created 4 years ago
Comments:10 (10 by maintainers)

Top GitHub Comments

1reaction

mischniccommented, Oct 26, 2019

The main bundle uses (and therefore contains) styled-components. The async child bundle also uses that package, and imports it via $parcel$interopDefault(parcelRequire(....)). The issue here is that the main bundle seems to have optimized away the $...styled-components....$exports.__esModule = true; statement (therefore $parcel$interopDefaul fails in the child bundle and it won’t find the default export, it treats styled-components as a CJS module).

Thank you so much for reporting all these bugs!

0reactions

garthenwebcommented, Mar 25, 2020

Checked it one more time with 2.0.0-nightly.171 and it is still working! Therefore the ticket can be closed.