codesandbox / codesandbox/codesandbox-client

Transpiled ESM dependency is referencing CJS packages incorrectly

Open
#6,160 1 comment 0 reactions 1 assignee View on GitHub

@DeMoorJasper is already working on this.

Since Sep 26, 2021.

🎒 Bundler 🐛 Bug
Dominant language
JavaScript
Stars
13.6k
Forks
2.4k
Avg merge
6d 19h
Merged PRs (30d)
2

Description

🐛 bug report

Preflight Checklist

  • I have read the Contributing Guidelines for this project.
  • I agree to follow the Code of Conduct that this project
    adheres to.
  • I have searched the issue tracker for an issue that matches the one I want
    to file, without success.

Description of the problem

From https://unpkg.com/browse/wana@0.13.17/dist/wana.mjs

import * as React from 'react';
import { useMemo, useEffect, useState, forwardRef, useRef } from 'react';

CSB transpiles this into…

var React = _interopRequireDefault(require("react"));

…where useMemo is transformed into React.useMemo for example.

The problem is that, since react is not ESM (nor does it define __esModule on its exports), it gets wrapped in…

{ default: require("react") }

…by interopRequireDefault.

Therefore, useMemo should really be transformed into React.default.useMemo.

How has this issue affected you? What are you trying to accomplish?

The library becomes unusable. The only workaround is to import wana/dist/wana.js instead of wana.

To Reproduce

Load the sandbox below.

Link to sandbox: link (optional)

https://codesandbox.io/s/wana-deferred-update-forked-getnz?from-embed=&file=/src/App.js

Your Environment
Software Name/Version
Сodesandbox
Browser
Operating System

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.