area17 / blast

Storybook for Laravel Blade πŸš€

Home Page:https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: Failed to fetch at _callee$ (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26705:20)

ziming opened this issue Β· comments

Hi there,

Thanks for creating this excellent package.

I tried to follow the tutorial at https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c but encountered difficulties.

Steps I tried:

  • composer require area17/blast
  • php artisan blast:launch
  • create resources/views/stories/button/primary.blade.php with the content the tutorial ask me to create

Visit http://localhost:6006/?path=/story/button--primary

Get the following error message:

Failed to fetch
TypeError: Failed to fetch
    at _callee$ (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26705:20)
    at tryCatch (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119458:40)
    at Generator.invoke [as _invoke] (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119689:22)
    at Generator.next (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:119514:21)
    at asyncGeneratorStep (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26666:103)
    at _next (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:194)
    at http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:364
    at new Promise (<anonymous>)
    at http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26668:97
    at defaultFetchStoryHtml (http://localhost:6006/vendors-node_modules_storybook_addon-a11y_dist_esm_a11yHighlight_js-generated-other-entry_js--83ef59.iframe.bundle.js:26720:17)

In my console where php artisan blast:launch is running, I get

resources/views/stories/button/primary.blade.php
[1] 
[1]    InvalidArgumentException 
[1] 
[1]   Unable to locate a class or view for component [button.primary].
[1] 
[1]   at vendor/laravel/framework/src/Illuminate/View/Compilers/ComponentTagCompiler.php:279
[1]     275β–•         if ($viewFactory->exists($view = $this->guessViewName($component).'.index')) {
[1]     276β–•             return $view;
[1]     277β–•         }
[1]     278β–• 
[1]   ➜ 279β–•         throw new InvalidArgumentException(
[1]     280β–•             "Unable to locate a class or view for component [{$component}]."
[1]     281β–•         );
[1]     282β–•     }
[1]     283β–•
[1] 
[1]       +2 vendor frames 
[1]   3   [internal]:0
[1]       Illuminate\View\Compilers\ComponentTagCompiler::Illuminate\View\Compilers\{closure}(["<x-button.primary>", "button.primary", "", ""])
[1] 
[1]       +28 vendor frames 
[1]   32  artisan:37
[1]       Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))

As a side note, similar errors still happen when I do php artisan blast:demo and visit those sample components

If you could point me to a better direction to resolve this issue, that would be great.

@ziming It looks like it's unable to find your views or there's an error within them.

Does anything render when you go to http://[your-laravel-app-url]/storybook_preview/button/primary? This is the url which Storybook uses to render your component within its UI. You can find it in the 'Network' tab of your dev tools when filtering by 'Fetch/XHR`.

If that doesn't fix it, do you have a repo you can link me to and I'll take a look?

Any solution? I have the same problem.

@ziming @mrtimbroo I found the source of the problem, when creating a new project in laravel, I changed the APP_URL to APP_URL=http://localhost:8000, then after running composer require area17/blast, I called the command php artisan vendor:publish --provider="A17\Blast\BlastServiceProvider" --tag="blast-config".

But after that, I still had problem with preview after calling php artisan blast:launch.

Captura de Tela 2021-11-28 aΜ€s 02 49 40

opening the developer locks, I got the following message

Captura de Tela 2021-11-28 aΜ€s 02 52 48

he even said I have a problem with CORS.

After following this tutorial, I restarted the server with php artisan serve and I was successful

Captura de Tela 2021-11-28 aΜ€s 02 59 43

v1.0.0

with v1.3, I didn't need to add CORS.

I had the same problem. Setting correct APP_URL in .env file solved a problem.