yarnpkg / yarnpkg/berry

[Bug?]: Simplest plugin using ink and bundled with @yarnpkg/builder does not work in 4.1.0

Open
#6,136 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

Self-service
  • I'd be willing to implement a fix
Describe the bug

The simplest plugin for Yarn fails at runtime after bundling with @yarnpkg/builder in 4.1.0

To reproduce

Create the simplest plugin for Yarn using ink:

package.json:

{
  "name": "yarn-plugin-test",
  "version": "1.0.0",
  "private": true,
  "main": "src/index.tsx",
  "scripts": {
    "build": "tsc --noEmit",
    "bundle": "builder build plugin && yarn plugin import ./bundles/@yarnpkg/plugin-test.js",
    "test": "ts-node -r tsconfig-paths/register"
  },
  "yarn.build": {
    "output": null
  },
  "devDependencies": {
    "@carsync/types-web": "1.0.0",
    "@types/node": "^18.11.9",
    "@types/react": "^16.8.0",
    "@yarnpkg/builder": "^4.0.0",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.0",
    "typescript": "~5.2.2"
  },
  "dependencies": {
    "@yarnpkg/cli": "^4.1.0",
    "@yarnpkg/core": "^4.0.3",
    "ink": "^3.0.8",
    "react": "^16.13.1"
  }
}

tsconfig.json:

{
	"compilerOptions": {
		// https://stackoverflow.com/questions/51716406/typescript-tsconfig-settings-for-node-js-10
		"target": "es2020",
		"module": "commonjs",
		"lib": ["es2020"],

		"rootDir": "src",
		// @yarnpkg/builder does not support this
		//
		// "baseUrl": "./src",
		"noEmit": true,

		"esModuleInterop": true,

		"strict": true,
		"jsx": "react-jsx",
		// Additional checks
		"noImplicitReturns": true,
		"noFallthroughCasesInSwitch": true,
		// Disable while developing
		"noUnusedLocals": false,
		"noUnusedParameters": false
	},
	"include": [
		"src",
	]
}

index.tsx:

import React, { useEffect, useState } from "react"
import { Plugin } from "@yarnpkg/core"
import { BaseCommand } from "@yarnpkg/cli"
import { render, Text } from "ink"

const Counter = () => {
	const [counter, setCounter] = useState(0)

	useEffect(() => {
		const timer = setInterval(() => {
			setCounter(previousCounter => previousCounter + 1)
		}, 100)

		return () => {
			clearInterval(timer)
		}
	}, [])

	return <Text color="green"> {counter} tests passed </Text>
}

export class HelloWorldCommand extends BaseCommand {
	static paths = [
		[`hello-world`],
	]

	async execute() {
		console.log(`Hello, world!`)
		render(<Counter />)
	}
}

const plugin: Plugin = {
	commands: [
		HelloWorldCommand,
	],
}

// eslint-disable-next-line import/no-default-export
export default plugin

Bundle it with @yarnpkg/builder:

yarn bundle

Try:

yarn

Output is:

Reference Error: _a is not defined (when initializing @yarnpkg/plugin-test, defined in /Users/alamothe/projects/car-manager/.yarnrc.yml)
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:182:58600
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:182:77796
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:183:508
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:6:494
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:264:21930
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:6:494
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:280:4343
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:6:494
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:282:809
    at /Users/alamothe/projects/car-manager/.yarn/plugins/@yarnpkg/plugin-test.cjs:6:494
Environment
System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 18.19.1 - /private/var/folders/dk/wjrhndy12g9b9p2lyfx6qm9c0000gn/T/xfs-6486a21c/node
    Yarn: 4.1.0 - /private/var/folders/dk/wjrhndy12g9b9p2lyfx6qm9c0000gn/T/xfs-6486a21c/yarn
    npm: 10.2.4 - /opt/homebrew/opt/node@18/bin/npm
Additional context

No response

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.

Research direction

Start with package.json, tsconfig.json, and index.tsx, then run yarn bundle followed by yarn in the listed Yarn 4.1.0 environment. Inspect the generated .yarn/plugins/@yarnpkg/plugin-test.cjs around the _a ReferenceError and trace the bundle through @yarnpkg/builder. Done means the bundled plugin loads and the hello-world command runs without the runtime error.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, react, typescript
Domain
build-system, cli, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.