Upgrade to [email protected] does not work without vite builder #18286

drik98 · 2022-05-20T10:38:37Z

Describe the bug
I am currently on version 6.4.22 of storybook. When trying to run npx sb@latest upgrade it tries to upgrade as usual but it suddenly stops without any further message at the step 🔎 checking 'builder-vite'.

Note that I do not use the vite builder. Is this a breaking change? Do we have to move to vite in order to use newer versions of storybook?

To Reproduce
Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions.
Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

Currently no time for that. Sorry.

System
Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - ~/Library/Caches/fnm_multishells/57824_1652876435650/bin/node
    npm: 6.14.6 - ~/Library/Caches/fnm_multishells/57824_1652876435650/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0
    Safari: 15.4
  npmPackages:
    @storybook/addon-actions: ^6.4.22 => 6.4.22 
    @storybook/addon-essentials: ^6.4.22 => 6.4.22 
    @storybook/addon-links: ^6.4.22 => 6.4.22 
    @storybook/vue: ^6.4.22 => 6.4.22

Additional context
Here is the complete log:

npx sb@latest upgrade                                                         
 • Checking for latest versions of '@storybook/*' packagesinfo ,,npx: Installierte 267 in 3.544s
info Unexpected token '.'
info 
 • Installing upgrades • Preparing to install dependencies. ✓



> <MY_PROJECT@version> prepare /Users/drik98/<PROJECT_PATH>
> rimraf build lib && node src/build/compile-vue-components src/js build && babel --copy-files build --out-dir lib && node src/license/crawler

< MOVING SOME src/**/*.vue FILES TO build/**/*.js >

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Successfully compiled 52 files with Babel (1671ms).
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vue/[email protected] requires a peer of postcss@>=6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^7.0.0 || ^8.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of prosemirror-tables@^0.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.

up to date in 12.406s

258 packages are looking for funding
  run `npm fund` for details

. ✓
🔎 checking 'cra5'
🔎 checking 'webpack5'
🔎 checking 'angular12'
🔎 checking 'mainjsFramework'
🔎 checking 'eslintPlugin'
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                      │
│   We've detected you are not using our eslint-plugin.                                                                                │
│                                                                                                                                      │
│   In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.   │
│                                                                                                                                      │
│   More info: https://github.com/storybookjs/eslint-plugin-storybook#readme                                                           │
│                                                                                                                                      │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'eslintPlugin' fix on your project? … yes
✅ Adding dependencies: eslint-plugin-storybook
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for @typescript-eslint/[email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: @typescript-eslint/[email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.18.3","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.12.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vue/[email protected] requires a peer of postcss@>=6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>= 2.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of postcss@^7.0.0 || ^8.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of prosemirror-tables@^0.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 34 packages from 43 contributors in 25.508s

265 packages are looking for funding
  run `npm fund` for details

✅ Configuring eslint rules in .eslintrc.js
✅ Adding Storybook to extends list
✅ fixed eslintPlugin
🔎 checking 'builder-vite'

The text was updated successfully, but these errors were encountered:

shilman · 2022-05-20T10:55:55Z

@drik98 i'm confused. is something actually broken?

what's going on is that we introduced a feature in 6.4 called automigrations. when you upgrade, it checks for some common configuration changes that needs to be fixed. if it finds something, it will ask you if you want to make the change. if it doesn't prompt you, it means that it didn't find anything that needs changing.

drik98 · 2022-05-20T10:58:38Z

It just stops with this step. No prompt or anything. No error message. No cvs changes, everything gets reset.

Note that npx storybook init fails as well at the same point if I remove everything storybook related. ( Just a few days ago I was still working with 6.4.22)

shilman · 2022-05-20T14:56:53Z

@drik98 I see, thanks for the clarification. Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro.

Alternatively, perhaps you could go into node_modules/@storybook/cli/dist/cjs/automigrate/fixes/builder-vite.js and add some console.log settings to see exactly where it's hanging?

drik98 · 2022-05-23T07:30:12Z

Hello @shilman,

I am not able to create a repro as it instantly works when selecting vue2 as a preset.

But I was just able to to debug the builder-vite.js file as you said. run and prompt are never executed.

The following happens in check:

const builder = main.getFieldValue(['core', 'builder']);
// builder --> undefined

const builderName = typeof builder === 'string' ? builder : builder === null || builder === void 0 ? void 0 : builder.name;
// builderName --> undefined

if (builderName !== 'storybook-builder-vite') {
  return null;
}
// as builderName is undefined" this evaluates to true and the function returns null. That seems to be where the upgrade process just stops.

drik98 · 2022-05-23T07:41:06Z

Upon further investigation it seems in node_modules/@storybook/cli/dist/cjs/automigrate/index.js it just skips the check so that should not be why the upgrade process just stops.

Just found out about the --skip-check flag. The issue seems to be unrelated to vite or any checks. It just does not want to upgrade the storybook version it seems.

yannbf · 2022-05-23T15:22:48Z

@IanVS is this related to the vite automigration?

shilman · 2022-05-23T16:04:59Z

@yannbf @drik98 I think it's finished. It loops through all the automigrations and builderVite is the last automigration. The code @drik98 has highlighted above returns null, meaning that there is nothing left to do, which is consistent with the fact that the project is not using vite.

I guess the question is why doesn't the process exit after that?

@yannbf I know you were going to change the logging behavior of automigrate. Perhaps you could add a ✅ done at the end?

drik98 · 2022-05-23T16:19:26Z

Yeah, a "Done" would probably be a good addition even though there seems to be nothing wrong with automigrate (or vite, I think).

The problem seems to lie somewhere else. When checking the code of the upgrade script the "automigrate" step seems to be the last IIRC. Still none of the @storybook/* dependencies seem to have been upgraded at this point (or later).

I am just so confused as to why nothing happens with no error or termination message.

drik98 · 2022-05-24T10:01:31Z

Where and when exactly do the @storybook/* dependencies get updated? If you point me to the correct file maybe I can debug it and find the error.

yannbf · 2022-05-24T10:03:43Z

Where and when exactly do the @storybook/* dependencies get updated? If you point me to the correct file maybe I can debug it and find the error.

I really appreciate your help!

storybook/lib/cli/src/upgrade.ts

Line 166 in 4b849f9

    
           const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], {

drik98 · 2022-05-24T11:21:33Z

No need to thank me. I greatly appreciate your work with storybook. It really makes developing and documenting much easier!

So I managed to install version 6.5.4 and successfully build it. I could not do it with the "cli" but I think the problem lies with my machine.. What I found out is the command you linked above evaluates to

npx npm-check-updates@latest /storybook/ --upgrade --target latest

because flags contains [ '--upgrade', '--target', 'latest' ].

Now the ncu command logs the following:

,,npx: Installierte 259 in 6.658s
Unexpected token '.'

As you can maybe see above (issue description )that already happened from the beginning. But It also happens when I run the command on its own. So the problem does not lie with storybook but with either ncu or me.

I did some googling and it seems to be a problem with npm itself (or perhaps in combination with fnm/nvm).

I installed npm-check-updates globally using yarn (normally not using yarn) and executed the command without npx

npm-check-updates /storybook/ --upgrade --target latest

and voila it works.

drik98 · 2022-05-24T11:24:18Z

The weird part for me is that npm-check-updates apparently encounters some kind of error ("Unexpected token '.'") but doesn't seem to throw an error after it, which then results in Storybook not being able to throw an error.

shilman · 2023-06-09T02:00:28Z

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

drik98 added bug needs triage labels May 20, 2022

shilman added question / support and removed bug needs triage labels May 20, 2022

shilman added bug cli and removed question / support labels May 20, 2022

shilman added the needs reproduction label May 20, 2022

yannbf mentioned this issue May 23, 2022

CLI: Improve texts for automigration #18303

Merged

3 tasks

shilman closed this as not planned Won't fix, can't repro, duplicate, stale Jun 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to [email protected] does not work without vite builder #18286

Upgrade to [email protected] does not work without vite builder #18286

drik98 commented May 20, 2022

shilman commented May 20, 2022

drik98 commented May 20, 2022 •

edited

Loading

shilman commented May 20, 2022

drik98 commented May 23, 2022 •

edited

Loading

drik98 commented May 23, 2022 •

edited

Loading

yannbf commented May 23, 2022

shilman commented May 23, 2022 •

edited

Loading

drik98 commented May 23, 2022

drik98 commented May 24, 2022

yannbf commented May 24, 2022

drik98 commented May 24, 2022

drik98 commented May 24, 2022 •

edited

Loading

shilman commented Jun 9, 2023

Upgrade to [email protected] does not work without vite builder #18286

Upgrade to [email protected] does not work without vite builder #18286

Comments

drik98 commented May 20, 2022

shilman commented May 20, 2022

drik98 commented May 20, 2022 • edited Loading

shilman commented May 20, 2022

drik98 commented May 23, 2022 • edited Loading

drik98 commented May 23, 2022 • edited Loading

yannbf commented May 23, 2022

shilman commented May 23, 2022 • edited Loading

drik98 commented May 23, 2022

drik98 commented May 24, 2022

yannbf commented May 24, 2022

drik98 commented May 24, 2022

drik98 commented May 24, 2022 • edited Loading

shilman commented Jun 9, 2023

drik98 commented May 20, 2022 •

edited

Loading

drik98 commented May 23, 2022 •

edited

Loading

drik98 commented May 23, 2022 •

edited

Loading

shilman commented May 23, 2022 •

edited

Loading

drik98 commented May 24, 2022 •

edited

Loading