Issue with Create addon section #284
Comments
|
Hey @jonniebigodes -- hmm it looks like a recent change in the Can you add a |
|
A full error would indeed be helpful. If you'd have to the time we could do a meeting about this problem? https://calendly.com/ndelangen/storybook |
|
@tmeasday and @ndelangen the error posted is actually intentional. That was the output that was thrown with Here's the full one: yarn run v1.21.1
$ start-storybook -p 9009 -s public
info @storybook/react v6.0.0-alpha.18
info
info => Loading static files from: C:\Users\MyUser\Myfolder\storybook_fork\storybook-related\learnstorybook_with_react\test_with_npm_and_local_plugins\dummy-taskbox\public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
info => Loading Webpack configuration from `node_modules\react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack setup.
webpack built 8a2b0ea9129736293313 in 19497ms
× ｢wdm｣: Hash: 8a2b0ea9129736293313
Version: webpack 4.41.6
Time: 19497ms
Built at: 2020-02-24 16:45:39
Asset Size Chunks Chunk Names
asset-manifest.json 640 bytes [emitted]
iframe.html 3.1 KiB [emitted]
main.8a2b0ea9129736293313.bundle.js 16.6 KiB main [emitted] [immutable] main
main.8a2b0ea9129736293313.bundle.js.map 5.12 KiB main [emitted] [dev] main
runtime~main.8a2b0ea9129736293313.bundle.js 31.2 KiB runtime~main [emitted] [immutable] runtime~main
runtime~main.8a2b0ea9129736293313.bundle.js.map 32.3 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.8a2b0ea9129736293313.bundle.js 2.38 MiB vendors~main [emitted] [immutable] [big] vendors~main
vendors~main.8a2b0ea9129736293313.bundle.js.map 2.42 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.8a2b0ea9129736293313.bundle.js runtime~main.8a2b0ea9129736293313.bundle.js.map vendors~main.8a2b0ea9129736293313.bundle.js vendors~main.8a2b0ea9129736293313.bundle.js.map main.8a2b0ea9129736293313.bundle.js main.8a2b0ea9129736293313.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false 88 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 249 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 390 bytes {main} [built]
[./.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./node_modules/@storybook/client-api/dist/index.js] 3.6 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.34 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false] 7.68 KiB {vendors~main} [built]
+ 603 hidden modules
ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'C:UsersMyUserMyfolderstorybook_forkstorybook-relatedlearnstorybook_with_react est_with_npm_and_local_pluginsdummy-taskbox.storybookpreview.js' in 'C:\Users\MyUser\Myfolder\storybook_fork\storybook-related\learnstorybook_with_react\test_with_npm_and_local_plugins\dummy-taskbox\.storybook'
@ ./.storybook/preview.js-generated-config-entry.js 6:4-166
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.43 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.23 KiB {HtmlWebpackPlugin_0} [built]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.The error happens with a version greater than 6.0.0-alpha.8, i tested it with a couple of versions afterwards and they started to throw this error. Here's a screenshot of the setup with all the key files involved
|
|
OK, thanks for that @jonniebigodes. I think the issue here is that this line: https://github.com/storybookjs/storybook/blob/d9612f7090e5e732175ea0de8e3e4c785e1a5e24/lib/core/src/server/preview/iframe-webpack.config.js#L58:L58 Doesn't work properly when |
In windows the path sep is '\' which will lead to weird stuff like: chromaui/learnstorybook.com#284
|
Fix here (I think?): storybookjs/storybook#9960 |
|
@jonniebigodes could you verify that the newest alpha works again? |
|
@ndelangen i've tested it and here are the results:
Svelte breaks with the following: > start-storybook -p 6006 -s public --ci
info @storybook/svelte v6.0.0-alpha.20
info
info => Loading static files from: C:\Users\MyUser\Myfolder\storybook_fork\storybook-related\tests_with_local_addons\taskbox-with-alpha-build\public .
info => Loading presets
info => Loading presets
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook\main.js".
info => Using default Webpack setup.
webpack built fba1a032dabb109ad1c6 in 10279ms
× ｢wdm｣: Hash: a0bca496ec88e917c61d
Version: webpack 4.41.6
Time: 11317ms
Built at: 2020-02-27 18:33:58
Asset Size Chunks Chunk Names
index.html 2.49 KiB [emitted]
main.66c338c6f26d3b6d550f.bundle.js 2.93 KiB main [emitted] [immutable] main
runtime~main.99691078705b39185f99.bundle.js 6.12 KiB runtime~main [emitted] [immutable] runtime~main
vendors~main.fc4b012264e901e42806.bundle.js 6.17 MiB vendors~main [emitted] [immutable] [big] vendors~main
Entrypoint main [big] = runtime~main.99691078705b39185f99.bundle.js vendors~main.fc4b012264e901e42806.bundle.js main.66c338c6f26d3b6d550f.bundle.js
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-actions/register.js ./.storybook/addons/register.js 76 bytes {main} [built]
[./.storybook/addons/register.js] 351 bytes {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-actions/dist/manager.js] 941 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/register.js] 38 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/constants.js] 450 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-links/dist/register.js] 1.92 KiB {vendors~main} [built]
[./node_modules/@storybook/addons/dist/public_api.js] 2.23 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/conditional-polyfills.js] 2.56 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 521 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/client/manager/provider.js] 4.13 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/ui/dist/index.js] 3.14 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 359 bytes {vendors~main} [built]
[./node_modules/core-js/modules/es.function.name.js] 680 bytes {vendors~main} [built]
+ 1392 hidden modules
ERROR in ./.storybook/addons/register.js 28:11
Module parse failed: Unexpected token (28:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
> return <Img alt="" src={url} />;
| }
|
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js ./node_modules/@storybook/addon-links/dist/register.js ./node_modules/@storybook/addon-actions/register.js ./.storybook/addons/register.js main[4]
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.41 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.2 KiB {HtmlWebpackPlugin_0} [built]
WARN force closed preview build
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
All 3 frameworks tests were done with the exact same set of rules. The same images and code for the addon. Feel free to provide feedback |
|
confirmed, investigating.. |
|
I found something: I was able to make it work in "^6.0.0-alpha.20". However if the project didn't have a git repo, it didn't work. Without a git setup, the include filter for the main loader for storybook's manager wasn't correct. The include should refer to the project's root, which we try to find based on the existence of git or It seems there might be a bug in that last part? When I didn't have my project initialized for git, I got: Then I initiated git: The bottom one is correct! |
|
@jonniebigodes could you verify my repro works for you? |
|
@ndelangen sorry for the delay. I'm going to detail the steps i took to test the reproduction.
and
I took this a bit further and applied the same as for the other test cases.
import Task from "./Task.svelte";
import { action } from "@storybook/addon-actions";
export default {
title: "Task",
excludeStories: /.*Data$/,
parameters: {
assets: ["./image_1.jpg", "./image_2.jpg", "./image_3.jpg"]
}
};
export const actionsData = {
onPinTask: action("onPinTask"),
onArchiveTask: action("onArchiveTask")
};
export const taskData = {
id: "1",
title: "Test Task",
state: "Task_INBOX",
updated_at: new Date(2019, 0, 1, 9, 0)
};
// default task state
export const Default = () => ({
Component: Task,
props: {
task: taskData
},
on: {
...actionsData
}
});
// pinned task state
export const Pinned = () => ({
Component: Task,
props: {
task: {
...taskData,
state: "TASK_PINNED"
}
},
on: {
...actionsData
}
});
// archived task state
export const Archived = () => ({
Component: Task,
props: {
task: {
...taskData,
state: "TASK_ARCHIVED"
}
},
on: {
...actionsData
}
});
/* const x = <div>Hello</div> */
import React, { Fragment } from 'react';
import { useParameter, useStorybookState, useAddonState } from '@storybook/api';
import { addons, types } from '@storybook/addons';
import { AddonPanel, ActionBar } from '@storybook/components';
import { styled } from '@storybook/theming';
const getUrl = input => {
return typeof input === 'string' ? input : input.url;
};
const Iframe = styled.iframe({
width: '100%',
height: '100%',
border: '0 none',
});
const Img = styled.img({
width: '100%',
height: '100%',
border: '0 none',
objectFit: 'contain',
});
const Asset = ({ url }) => {
if (!url) {
return null;
}
if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
return <Img alt="" src={url} />;
}
return <Iframe title={url} src={url} />;
};
export const Content = () => {
const results = useParameter('assets', []); // story's parameter being retrieved here
const [selected, setSelected] = useAddonState('my/design-assets', 0); // addon state being persisted here
const { storyId } = useStorybookState(); // the story«s unique identifier being retrieved from Storybook global state
if (results.length === 0) {
return null;
}
if (results.length && !results[selected]) {
setSelected(0);
return null;
}
const url = getUrl(results[selected]).replace('{id}', storyId);
return (
<Fragment>
<Asset url={url} />
{results.length > 1 ? (
<ActionBar
actionItems={results.map((i, index) => ({
title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
onClick: () => setSelected(index),
}))}
/>
) : null}
</Fragment>
);
};
addons.register('my/design-assets', () => {
addons.add('design-assets/panel', {
title: 'assets',
type: types.PANEL,
render: ({ active, key }) => (
<AddonPanel active={active} key={key}>
<Content />
</AddonPanel>
),
});
});And module.exports = {
//stories: ['../stories/**/*.stories.js'],
stories: ['../src/components/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links', './.storybook/addons/register'],
};One noteworthy thing, i didn't install
It worked, no more errors. The only issue is the images not being displayed. But that's a win in my book, we are getting there (pardon the bad pun). If that's actually the case, then i think we got it covered as when the reader gets to this part of the documentation he'll have a repo setup. In the Testing section he is told to initialize a local repo before adding the I'm going to run a aditional test, going to initialize a new temp project with svelte and see if initializing the local repo addresses this, leaving only the documentation to be fine tuned. |
|
Just did another test and it's working with a repo initialized. Regarding the images issue, i've found the solution. Adding the
A thought that occured me, would it be a good idea to use the same approach with the svelte Storybook initialization process to include in the script the flag and folder as it's currently being done in the react version? Feel free to provide feedback |
yes |
|
Closing this as the issue is no longer present. |
While working on the updates for the documention to allow them to be compliant with Storybook >=5.3 starting from the Svelte version and further testing with Angular and React it seems that there are some issues between the current documentation and Storybook. I created a issue in the Storybook repo describing what was happening initially in Svelte, then further tested in the remainder frameworks. More specifically this issue. Based on the feedback provided it seems that we have options to help and address this:
@nextversion of the packages procced from there.Based on the issue above and also #280 i did a bit of extra research and i was able to get a addon working for:
The mention of the
6.0.0-alpha.8version is intentional. After that for me running in windows Storybook breaks. I tried with the latest alpha version and if i issueyarn storybooki'm presented with the following errorAlso the
Xin both the vue and react native version are intentional. Those are some cases that i would like a bit of feedback from. Based on my research it seems that in order for a vue local addon to work, a middle step must need to be added. Basically it must be compiled before being used with storybook. I tested a bit and a couple of issues popped in, which led me to the conclusion that despite jsx usage, vue has no concept of the hooks that the api offers. For React native, it's a bit of a paradigm shift from the "traditional" way to implement a addon, some additional work is required aswell and with that possibly "put something in the books" (pardon the bad pun) with @ndelangensomewhere in the near future so that i can better understand the model behind this and update the documentation so that the reader has the full benefits of it.
Based on this i would like for @domyen @tmeasday opinion on the issue. But also @shilman and @ndelangen aswell.
Feel free to provide feedback.
The text was updated successfully, but these errors were encountered: