When installing the storubook library and using autodocs, I noticed that my server started crashing with an error:
react-app-frontend-storybook-1 | /app/node_modules/cli-table3/src/utils.js:1
react-app-frontend-storybook-1 | const stringWidth = require('string-width');
I found a solution to this problem (there was even a link to the relevant issues in the mountain), but as it turned out, it didn't help me, so this link as removing yarn.lock and running a new yarn install and everything worked okay until I deployed my project on a new environment with already deleted yarn.lock and found that it needs to be deleted constantly, for me it looks like some kind of bug that needs to be fixed and I have an assumption that the yarn cache is to blame. This is what the console prints to me when I add a new library or deploy my project to a new environment.
docker compose -f docker-compose.yml up -d
[+] Running 6/6
✔ Container react-app-frontend-node-1 Started 0.0s
✔ Container react-app-frontend-preview-1 Started 0.0s
✔ Container react-app-frontend-storybook-1 Started 0.0s
✔ Container react-app-frontend-node-cli-1 Started 0.0s
✔ Container react-app-frontend-1 Started 0.1s
✔ Container react-app-reverse-proxy-1 Started 0.0s
docker compose -f docker-compose.yml run --rm frontend-node-cli yarn install
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
warning Pattern ["strip-ansi@^6.0.1"] is trying to unpack in the same destination "/home/node/.cache/yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/home/node/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "/home/node/.cache/yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.2.0"] is trying to unpack in the same destination "/home/node/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.2.3"] is trying to unpack in the same destination "/home/node/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "postcss@^8.4.29".
[4/4] Building fresh packages...
$ patch-package
patch-package 8.0.0
Applying patches...
No patch files found
Done in 38.34s.
I'm running my code via a docker image node and I'm specifically concerned about the warning lines.
After this installation I get an error:
react-app-frontend-storybook-1 | 🔴 Error: It looks like you are having a known issue with package hoisting.
react-app-frontend-storybook-1 | Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
react-app-frontend-storybook-1 |
react-app-frontend-storybook-1 |
react-app-frontend-storybook-1 | /app/node_modules/cli-table3/src/utils.js:1
react-app-frontend-storybook-1 | const stringWidth = require('string-width');
react-app-frontend-storybook-1 | ^
react-app-frontend-storybook-1 |
react-app-frontend-storybook-1 | Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/string-width/index.js from /app/node_modules/cli-table3/src/utils.js not supported.
react-app-frontend-storybook-1 | Instead change the require of index.js in /app/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/cli-table3/src/utils.js:1:21)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/cli-table3/src/table.js:2:15)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/cli-table3/index.js:1:18)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/@storybook/core-server/dist/index.js:104:2802)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/@storybook/cli/dist/generate.js:11:4494)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/@storybook/cli/bin/index.js:26:1)
react-app-frontend-storybook-1 | at Object.<anonymous> (/app/node_modules/storybook/index.js:3:1) {
react-app-frontend-storybook-1 | code: 'ERR_REQUIRE_ESM'
react-app-frontend-storybook-1 | }
react-app-frontend-storybook-1 |
react-app-frontend-storybook-1 | Node.js v20.9.0
And the stylelint error:
$ stylelint "src/**/*.scss" --custom-syntax postcss-scss
/app/node_modules/stylelint/lib/writeOutputFile.js:5
const stripAnsi = require('strip-ansi');
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/strip-ansi/index.js from /app/node_modules/stylelint/lib/writeOutputFile.js not supported.
Instead change the require of index.js in /app/node_modules/stylelint/lib/writeOutputFile.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (/app/node_modules/stylelint/lib/writeOutputFile.js:5:19) {
code: 'ERR_REQUIRE_ESM'
}
Node.js v20.9.0
To resolve issues with the libraries themselves, I added the resolutions lines to my package.json file:
...
"resolutions": {
"storybook/**/jackspeak": "2.3.6",
"**/globby": "^11.0.1"
}
...
And in the end, it will all work only if I delete yarn.lock and run `yarn install' again.
I will leave a link to my project in which there is a redmi how to install it. https://github.com/saschati/react-app
To see the storybook problem, it is enough to call the make frontend-storybook-logs command to stylelint make check
I moved the project to Yarn version 4 and that solved my problem, although there may be some more concise ways to solve it. But since this is not an enterprise project, it suits me.