[Bug?]: Simplest plugin using ink and bundled with @yarnpkg/builder does not work in 4.1.0
Open
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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