Infinite loop with 401 errors

[EvgenyOrekhov]

When I try to open the "Design" panel, it goes into an infinite loop trying to load the Figma file.

The following appears in the console:

This is my setup:

"@storybook/html": "^6.2.1",
"storybook-addon-designs": "^6.0.0-alpha.3"

.storybook/preview.js

import { withDesign } from 'storybook-addon-designs';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
  decorators: [withDesign],
  design: { accessToken: '<private-access-token>' },
};

MyComponent.stories.js

// ...

export const MyComponent = Template.bind({});

MyComponent.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/...',
  },
};

[shamilovtim]

Think this is #92. Try moving the token down to the component and removing design:{} from parameters

[EvgenyOrekhov]

Tried moving accessToken from .storybook/preview.js to MyComponent.stories.js, it didn't help.

[shamilovtim]

This helped fix my issues. I noticed you had:

import { withDesign } from 'storybook-addon-designs';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
  decorators: [withDesign],
  design: { accessToken: '<private-access-token>' },
};

Instead I put withDesign on my individual components (not globally set like this)

Working repro is:

export default {
  decorators: [withDesign],
  title: 'Buttons',
  component: PrimaryButton,
}

const Template: Story<unknown> = args => <PrimaryButton {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  text: 'Button',
  type: 'primary',
  onPress: () => null,
  disabled: false,
  isInProgress: false,
  compact: false
};
Primary.parameters = {
  design: {
    url: 'designURL'
  }
};

export const PrimaryDisabled = Template.bind({});
PrimaryDisabled.args = {
  ...Primary.args,
  disabled: true
};
PrimaryDisabled.parameters = {
  design: {
    url: 'designURL'
  }
};

and with this my #92 and #95 were resolved

[EvgenyOrekhov]

So it's impossible to set withDesign globally? That's unfortunate. I would rather prefer to have less boilerplate code.

[shamilovtim]

You only have to set it on the default stories, so it's not too bad IMO

[EvgenyOrekhov]

I just tried this:

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
};

MyComponent.stories.js

import { withDesign } from 'storybook-addon-designs';

export default {
  title: 'MyComponent',
  decorators: [withDesign],
  argTypes: {
    // ...
  },
};

// ...

export const MyComponent = Template.bind({});

MyComponent.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/...',
    accessToken: '<private-access-token>',
  },
};

It did not help.

[pocka]

At first, this is nothing related to #92, as this issue is for type: "figma" and the Figma Live Embed Kit is loaded successfully. Also, the accessToken property is for type: "experimental-figspec", not type: "figma". Only type and url are required properties even if your file is private as loaded iframe takes care of the authentication process.

---

These errors are results of Figma Live Embed Kit (= scripts inside <iframe>) calling their internal(?) API and the API returns HTTP 401. From my experience, this is probably due to their API outage or session problem. If the latter, clearing cache/using private browsing/using a different browser would solve the problem.

If you believe the cause is at the addon instead of at the loaded iframe content, please provide an actual and expected behavior, not just errors.

[EvgenyOrekhov]

At first, this is nothing related to #92, as this issue is for type: "figma" and the Figma Live Embed Kit is loaded successfully. Also, the accessToken property is for type: "experimental-figspec", not type: "figma". Only type and url are required properties even if your file is private as loaded iframe takes care of the authentication process.

That is very valuable information! It was not clear when I was reading the docs. I would appreciate it if you could add this information to the docs.

---

I figured it out. The 401 errors and the infinite loop were caused by the fact that I have the "Block third-party cookies" feature enabled in Google Chrome:

I added my Storybook host to exceptions and now it works:

Thank you!

[pocka]

🤯

Given the world's movement toward more-privacy-focused-internet, I'll add a section of the third-party cookie stuff to docs.

[judithrocketmakers]

Worth noting that this doesn't work with Safari still, but that's because Safari has a bit of an all or nothing approach to privacy so it's the browser not the plugin.