Inquiries about applying the addon.

[H0onnn]

Hello, I am trying to apply this addon to an open source project called recharts.

I went through the process below, but an error is occurring.

process

1. npm i @codesandbox/storybook-addon --save-dev
2. Add @codesandbox/storybook-addon to storybook/main.ts
3. Add parameters to storybook/preview.ts

// import ...

const preview: Preview = {
  parameters: {
    // ...
   // add codesandbox parameters
    codesandbox: {
      apiToken: '123_12_1234',
      dependencies: {
        react: 'latest',
        'react-dom': 'latest',
        recharts: 'latest',
      },
      fallbackImport: {},
    },
  },
};

export default preview;

error message

I couldn't find a solution due to lack of references.

Any help would be greatly appreciated.

[danilowoz]

Hi, thanks for opening this issue.

Could you please share a screenshot from your console? Maybe we can find some additional information from there. Plus, I'd try to remove fallbackImport from your configuration.

[H0onnn]

Hello, @danilowoz Thank you for the reply !

Below is the console log.

Is the apiToken wrong? It has the same format as 123_12_1234 and consists of a total of 9 characters excluding '_'.

[danilowoz]

Your token should be following strucutre: csb_v1_xxxx_xxxx-xxxx-xxxx. Maybe you're using team-id instead of the API token?

[H0onnn]

@danilowoz

It seems that all apiTokens are not displayed because I am an invited general member. I'll have to ask the recharts team about this.

[H0onnn]

Hello, @danilowoz !

If I add fallbackImport: 'recharts',

To indicate that all components should be imported from recharts we get something like that sandbox where it imports CategoricalChart instead of the correct AreaChart, etc.

This means that we need an Import map in the meta of each story ?