Failed to link '@storybook/addon-knobs' with local package

[markselby9]

My steps:

1. Cloned the storybook repository to local
2. In the local repo, run 'npm run bootstrap' to install package dependencies and link packages
3. In my react project, run 'npm link @storybook/react' first, then 'npm link @storybook/addon-knobs' to link the addon package.
4. Try to 'yarn storybook', and the local 'addon-knobs' failed to present. As screenshot below.

As I checked the soft link, the links are successfully linked to my local 'storybool' repository, but it failed to run. Under which step may I have done it wrong? Thanks!

[danielduan]

You seem to be linking it wrong. After running npm run bootstrap, you should run npm link in app/react and addon/knobs, and then in your project run npm link @storybook/react and npm link @storybook/addon-knobs.

[markselby9]

Hi,
I've created a new react project following your instructions, but the issue still remains. For detail, my related files are listed below:
stories:

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import '@storybook/addon-knobs/register'
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';


import { Button, Welcome } from '@storybook/react/demo';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Button', module)
  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);


const stories = storiesOf('Storybook Knobs', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);
// Knobs for React props
stories.add('with a button', () => (
	<button disabled={boolean('Disabled', false)} >
		{text('Label', 'Hello Button')}
	</button>
))

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
	const name = text('Name', 'Arunoda Susiripala');
	const age = number('Age', 89);

	const content = `I am ${name} and I'm ${age} years old.`;
	return (<div>{content}</div>);
});

package.json

{
  "name": "react-storybook-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.2.6",
    "@storybook/addon-knobs": "^3.2.8",
    "@storybook/addon-links": "^3.2.6",
    "@storybook/react": "^3.2.8"
  }
}

Please tell if you need more information. Thanks!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!