question-mark
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.

[Bug?]: esbuild-plugin-pnp doesn't use module in package.json for libraries

See original GitHub issue

Describe the bug

Even if in the building options of esbuild it’s define module in the mainFields the plugin use always (and only main). This will create some problem because when building in esm or iife usually library put the umd (or commonjs) version in main and the esm one in modules.

To reproduce

One of the library that has this configuration in the package.json is swr The following file can help to make a use case test

esbuild.js

const { pnpPlugin } = require('@yarnpkg/esbuild-plugin-pnp');
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: {
    index: 'src/index.tsx',
    'index.html': 'src/index.html',
  },
  assetNames: '[name]',
  inject: ['./react-shim.js'],
  mainFields: ['module', 'main'],
  bundle: true,
  outdir: 'build',
  loader: {
    '.html': 'file',
    '.css': 'css',
  },
  plugins: [
    pnpPlugin(),
  ],
});

src/index.ts

import { render } from 'react-dom';
import useSWR from 'swr';

const App = () => {
  const result = useSWR('https://official-joke-api.appspot.com/random_joke');
  return (
    <section>
      <header>
        <h2>This is a test</h2>
      </header>
      <main>{result.data}</main>
    </section>
  );
};

render(<App />, document.querySelector('main'));

package.json

{
  "name": "esbuild-test",
  "sideEffects": false,
  "main": "build/index.js",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rm -rf build && yarn node esbuild.js"
  },
  "devDependencies": {
    "@types/react": "^17.0.13",
    "@types/react-dom": "^17",
    "@yarnpkg/esbuild-plugin-pnp": "^1.0.0-rc.13",
    "esbuild": "^0.12.16"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "swr": "^0.5.6"
  }
}

Environment

OS: macOS browser: chrome, firefox

Additional context

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
huvbercommented, Jul 30, 2021

Can you please take a look at this? I think it will be a problem for a lot of projects

0reactions
merceyzcommented, Sep 2, 2022

Native support for PnP was added to esbuild@0.15.0 so @yarnpkg/esbuild-plugin-pnp is no longer required and is getting deprecated, if you experience any issues with the PnP support in esbuild please report them upstream.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Bug] esbuild-plugin-pnp does not respect browser-specific ...
Describe the bug. Trying to use uuid library with esbuild , and using yarn berry with PNP, so esbuild-plugin-pnp is needed.
Read more >
Why is 'type: module' in package.json file? - Stack Overflow
I upgraded the node and built the existing file. But it didn't build, and there was an error. Error [ERR_REQUIRE_ESM]: Must use import ......
Read more >
package.json - npm Docs
Description. This document is all you need to know about what's required in your package.json file. It must be actual JSON, not just...
Read more >
How To Use Node.js Modules with npm and package.json
The first step will be to create and understand the package.json file. You will then use it to keep track of all the...
Read more >
Configuring your application's dependencies - AWS Elastic ...
You can specify these module dependencies using a package.json file. ... Elastic Beanstalk doesn't run npm install , even if a package.json file...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found