pnpx storybook@next upgrade --prerelease | Storybook | Page 1

glossy cobalt Mar 13, 2023, 3:39 PM

#

This command fails to updgrade my packages and package json.

This is the output

λ pnpm dlx  storybook@next upgrade --prerelease
.../Local/pnpm/store/v3/tmp/dlx-31560    | +624 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
.../Local/pnpm/store/v3/tmp/dlx-31560    | Progress: resolved 624, reused 624, downloaded 0, added 624, done  
(node:30540) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 • Checking for latest versions of '@storybook/*' packagesinfo ,,| was unexpected at this time.
info
info ,,| was unexpected at this time.
info
 • Installing upgrades • Preparing to install dependencies. ✓


 • Installing dependenciesScope: all 8 workspace projects
Done in 3.6s

vapid forge Mar 13, 2023, 3:39 PM

#

I'm not familiar with pnpm dlx, is it the same as pnpx?

#

Can you try npx instead? pnpm will still be used to install the actual dependencies

#

if you have a pnpm lockfile

glossy cobalt Mar 13, 2023, 3:42 PM

#

just pnpx is just an alias for it

#

trying now

vapid forge Mar 13, 2023, 3:43 PM

#

If this is a monorepo, you should run it from within the project that contains the storybook

glossy cobalt Mar 13, 2023, 3:44 PM

#

thanks, yes i am doing that

#

looks like npx is working better so far

vapid forge Mar 13, 2023, 3:44 PM

#

pnpx normally works too, not sure what the issue was there

glossy cobalt Mar 13, 2023, 4:00 PM

#

even after npx, my package.json file isnt updated and Storybook 6.5.16 is running

#

λ npx  storybook@next upgrade --prerelease
Need to install the following packages:
  storybook@7.0.0-rc.2
Ok to proceed? (y) y
(node:3892) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)                                         
 • Checking for latest versions of '@storybook/*' packagesinfo ,,| was unexpected at this time.
info
info ,,| was unexpected at this time.
info

#

any other way i can find the correct versions?

vapid forge Mar 13, 2023, 5:46 PM

#

@drowsy kernel is the upgrade command broken?

#

@glossy cobalt what version of node.js are you using?

drowsy kernel Mar 13, 2023, 5:48 PM

#

@vapid forge is the upgrade command broken? I updated it recently & it's possible there's a regression cc @coral locust

#

@glossy cobalt do you have a public project i can look at?

coral locust Mar 13, 2023, 5:52 PM

#

Please share how your package json dependencies look like, that would be fantastic

drowsy kernel Mar 13, 2023, 5:52 PM

#

@glossy cobalt or can you tell me any more about your environment? npx sb@next info

coral locust Mar 13, 2023, 5:52 PM

#

I just tried that same command in my project and the dependencies were upgraded (though with a canary release @drowsy kernel )

drowsy kernel Mar 13, 2023, 5:53 PM

#

OOF i'll see what i can do about that canary release. thanks @coral locust

coral locust Mar 13, 2023, 5:54 PM

#

Also worked for a 6.5 setting

glossy cobalt Mar 13, 2023, 5:54 PM

#

vapid forge <@1040658203383443497> what version of node.js are you using?

18.9.1

glossy cobalt Mar 13, 2023, 5:55 PM

#

drowsy kernel <@1040658203383443497> or can you tell me any more about your environment? `npx ...

λ npx sb@next info

Environment Info:

System:
OS: Windows 10 10.0.19044
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Binaries:
Node: 18.9.1 - ~\scoop\persist\nvm\nodejs\nodejs\node.EXE
npm: 8.19.1 - ~\scoop\persist\nvm\nodejs\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.69)

coral locust Mar 13, 2023, 5:55 PM

#

I just upgraded to use the exact same node version ☝️ and had a successful upgrade as well

drowsy kernel Mar 13, 2023, 5:55 PM

#

must be a windows thing

coral locust Mar 13, 2023, 5:56 PM

#

can do us a favor @glossy cobalt and run pnpm dlx storybook@7.0.0-beta.50 upgrade --prerelease

glossy cobalt Mar 13, 2023, 5:56 PM

#

coral locust Please share how your package json dependencies look like, that would be fantast...

📎 message.txt

coral locust Mar 13, 2023, 5:56 PM

#

and see if that gives a different result

#

aha

#

I see the problem

#

It seems like your project has an internal Storybook package, probably a utility wrapper of some sorts? @oen.web.vue/storybook

glossy cobalt Mar 13, 2023, 5:58 PM

#

ah yes, I removed that before upgrading, sorry i forgot to send you the right version

#

2 secs

coral locust Mar 13, 2023, 5:59 PM

#

It doesn't seem that you have any Storybook package (that we provide)

glossy cobalt Mar 13, 2023, 5:59 PM

#

I do

coral locust Mar 13, 2023, 5:59 PM

#

thanks a lot for going through this with us btw

glossy cobalt Mar 13, 2023, 6:00 PM

#

📎 message.txt

coral locust Mar 13, 2023, 6:00 PM

#

so you ran the upgrade command in the CWD that contains that package.json file?

glossy cobalt Mar 13, 2023, 6:00 PM

#

No problem, Im going to hell and back with it at the moment. Always happy to try and make the experience better for the next person

glossy cobalt Mar 13, 2023, 6:01 PM

#

coral locust so you ran the upgrade command in the CWD that contains that package.json file?

yep

coral locust Mar 13, 2023, 6:02 PM

#

This is what I get when I use the command with your package.json in a pnpm project

glossy cobalt Mar 13, 2023, 6:04 PM

#

yep, finally since using the new version provided, i get sometihng similar

coral locust Mar 13, 2023, 6:05 PM

#

I guess I can at least point you to the right versions?

    "@storybook/addon-a11y": "^7.0.0-rc.2",
    "@storybook/addon-actions": "^7.0.0-rc.2",
    "@storybook/addon-essentials": "^7.0.0-rc.2",
    "@storybook/addon-interactions": "^7.0.0-rc.2",
    "@storybook/addon-links": "^7.0.0-rc.2",
    "@storybook/addon-notes": "^6.0.0-alpha.6",
    "@storybook/addon-postcss": "^3.0.0-alpha.1",
    "@storybook/builder-vite": "7.0.0-rc.2",
    "@storybook/csf-tools": "^7.0.0-rc.2",
    "@storybook/testing-library": "^0.0.14-next.1",
    "@storybook/theming": "^7.0.0-rc.2",
    "@storybook/vue3": "^7.0.0-rc.2",

And a few points:

addon-notes is deprecated in favor of addon-docs, which is part of addon-essentials which you already have installed
Given that you're using vite, I believe you can just get rid of addon-postcss
I'm really curious what you use csf-tools for

glossy cobalt Mar 13, 2023, 6:05 PM

#

Sidenote

storybook-vue3-router has not been updated to be compatible yet

coral locust Mar 13, 2023, 6:06 PM

#

That's a community package
There's an open PR for it since December, maybe it needs a little push (pun intended)? https://github.com/NickMcBurney/storybook-vue3-router/pull/39

glossy cobalt Mar 13, 2023, 6:06 PM

#

Yep I did already today 😉

glossy cobalt Mar 13, 2023, 6:07 PM

#

coral locust I guess I can at least point you to the right versions? ```json "@storybook...

in Our case we like the extra notes tab, as we have a development checklist for every component in there
I was unaware and will give that a try thanks.
I can check on that

#

For what its worth... you mentioned @oen.web.vue/storybook
The reason we had this in the past is that we have many projects using storybook, and we often ran into compatibility issues when using various versions and plugins, so we managed it in one single package...

{
  "name": "@oen.web.vue/storybook",
  "version": "1.1.1",
  "description": "Storybook & Plugins, bundled into a single package for convenience.",
  "keywords": [],
  "license": "UNLICENSED",
  "author": "Euronet Worldwide",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@etchteam/storybook-addon-status": "^4.2.2",
    "@storybook/addon-a11y": "^6.5.15",
    "@storybook/addon-actions": "^6.5.15",
    "@storybook/addon-essentials": "^6.5.15",
    "@storybook/addon-interactions": "^6.5.15",
    "@storybook/addon-links": "^6.5.15",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-vite": "0.3.0",
    "@storybook/csf-tools": "^6.5.15",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/theming": "^6.5.15",
    "@storybook/vue3": "^6.5.15"
  },
  "peerDependencies": {
    "storybook-vue3-router": "^2.3.1"
  },
  "publishConfig": {
    "registry": "https://artifactory.oneeuronet.com/artifactory/api/npm/oen-npm/"
  }
}

and installed that everywhere we needed it.

#

at the moment, I cant find any justification of having csf-tools, my best guess was we got it from one of the setup guides on the site or git at somepoint

#

Migration script is working much better on this version thanks

#

I have one issue with the CSF migration script & runtime on one of my stories, it complains about bad syntax, but I cant spot it anywhere

#

The line numbers in the error out dont match with the source file. any tips ?

coral locust Mar 13, 2023, 6:17 PM

#

Migration script is working much better on this version thanks
Wait, did the migration work then?

#

The line numbers in the error out dont match with the source file. any tips ?
Let's sort out the first situation, but after please share a screenshot or any error message so we can assist you better

glossy cobalt Mar 13, 2023, 6:18 PM

#

coral locust > Migration script is working much better on this version thanks Wait, did the m...

yes

coral locust Mar 13, 2023, 6:19 PM

#

How?

glossy cobalt Mar 13, 2023, 6:20 PM

#

you sent a newer version, which worked
pnpm dlx storybook@7.0.0-beta.50 upgrade --prerelease

vapid forge Mar 13, 2023, 6:33 PM

#

That's actually an older version 🙈

#

So maybe something did break in a newer version

glossy cobalt Mar 13, 2023, 6:34 PM

#

ah, right ok. That one works anyhow

glossy cobalt Mar 13, 2023, 6:49 PM

#

Running into some other issues, should I create new tickets?

#

Internal server error: At least one <template> or <script> is required in a single file component.

#

Failed to fetch dynamically imported module: http://localhost:6006/src/components/PMediaUpload/PMediaUpload.stories.ts

#

These are the main two issues which are coming up

#

Other that that, the Stroybook instance is rendering and looking hopeful

#

vapid forge Mar 13, 2023, 7:16 PM

#

I'd recommend starting another thread with the details of your stories file

#

and the contents of your PMediaUpload

glossy cobalt Mar 13, 2023, 7:23 PM

#

Well, its all of my files, like there is an issue with the loader or something
At least one <template> or <script> is required in a single file component.
At least one <template> or <script> is required in a single file component. (x2)
At least one <template> or <script> is required in a single file component. (x3)
At least one <template> or <script> is required in a single file component. (x4)
At least one <template> or <script> is required in a single file component. (x5)
At least one <template> or <script> is required in a single file component. (x6)
At least one <template> or <script> is required in a single file component. (x7)
At least one <template> or <script> is required in a single file component. (x8)
At least one <template> or <script> is required in a single file component. (x9)
At least one <template> or <script> is required in a single file component. (x10)
At least one <template> or <script> is required in a single file component. (x11)
At least one <template> or <script> is required in a single file component. (x12)
At least one <template> or <script> is required in a single file component. (x13)
At least one <template> or <script> is required in a single file component. (x14)
At least one <template> or <script> is required in a single file component. (x15)
At least one <template> or <script> is required in a single file component. (x16)

#

Do you know if the shared vite config is working with the likes of vitesse an uplugin-auto-imports and components?

#pnpx storybook@next upgrade --prerelease