When running blade:publish, a JavaScript error is present in main.5538a5c7.iframe.bundle.js (link):

VM2768:1 Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at ./.storybook/preview.js-generated-config-entry.js (main.5538a5c7.iframe.bundle.js:1:15462)
    at __webpack_require__ (runtime~main.1e62e197.iframe.bundle.js:1:381)
    at __webpack_exec__ (main.5538a5c7.iframe.bundle.js:1:64322)
    at main.5538a5c7.iframe.bundle.js:1:65443
    at __webpack_require__.O (runtime~main.1e62e197.iframe.bundle.js:1:1015)
    at main.5538a5c7.iframe.bundle.js:1:65586
    at webpackJsonpCallback (runtime~main.1e62e197.iframe.bundle.js:1:5873)
    at main.5538a5c7.iframe.bundle.js:1:69

That line refers to STORYBOOK_VIEWPORTS as the culprit (viewports: JSON.parse(process.env.STORYBOOK_VIEWPORTS)).

As far as I can tell, the Publish command doesn't provide viewport information, and possibly other information as well. (It looks like it hasn't been updated for a couple of years.)

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.

For instance, I have a typical blade component called ticket.blade.php. Inside that component I render things like ticket->title and $ticket->price. In typical Laravel fashion, I render the component by passing a whole ticket object (eloquent model) to the component like <x-card.ticket :ticket="$ticket" />

How would I do similar inside a story file? How can I pass a single $ticket object to the component inside a story?

In the button example, there are single variables like $label, etc. but I can't figure out how to create a story with an object rather than just individual vars.

Hopefully that question makes sense :) Thanks!

Bug Description

When running the script on a Windows environment, the dynamic import statement in the resolveTailwindConfig function throws an ERR_UNSUPPORTED_ESM_URL_SCHEME error. This issue arises because the path provided to the import() function does not conform to the file:// URL scheme expected by Node.js for ESM imports on Windows platforms.

To Reproduce

Steps to reproduce the behavior:

• Set up the project on a Windows environment.
• Run the script php artisan blast:publish.
• See the ERR_UNSUPPORTED_ESM_URL_SCHEME error related to the dynamic import statement.

Expected behavior

The script should dynamically import the Tailwind configuration file without throwing any errors, regardless of the operating system.

Error Output

Error Output:
================
node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data,
and node are supported by the default ESM loader. On Windows, absolute paths must
be valid file:// URLs. Received protocol 'c:'
    at new NodeError (node:internal/errors:405:5)
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:131:11)
    at defaultLoad (node:internal/modules/esm/load:82:3)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

Node.js v18.17.0

Proposed Solution

To resolve this issue, we suggest modifying the resolveTailwindConfig() function to use the pathToFileURL function from Node.js's url module. This change will correctly convert the file path to a file:// URL, ensuring compatibility across operating systems, including Windows.

Here's the suggested change:

// ./src/resolveTailwindConfig.js

async function resolveTailwindConfig() {
  const fs = await import('fs');
  const { default: resolveConfig } = await import('tailwindcss/resolveConfig.js')
  const { pathToFileURL } = await import('url');

  // Convert CONFIGPATH to a file URL
  const configPath = pathToFileURL(process.env.CONFIGPATH).href;

  const { default: config } = await import(configPath)

  const fullConfig = resolveConfig(config);

  try {
    if (!fs.existsSync(TEMP_DIR)) {
      fs.mkdirSync(TEMP_DIR);
    }

    fs.writeFileSync(OUTPUT_PATH, `<?php return ${parseConfig(fullConfig)};`);
  } catch (err) {
    console.error(err);
  }
}

This update will automatically handle the conversion of the configuration file path into a valid file:// URL, resolving the ERR_UNSUPPORTED_ESM_URL_SCHEME error on Windows platforms.

Additional context

• This error was encountered using Node.js version 18.17.0 on a Windows environment.
• We have tested a successful outcome on the Windows environment in question after the suggested change.
• The issue does not appear on UNIX-based systems due to differences in file path handling.
• We have tested the continued successful outcome on UNIX-based systems after the suggested change.

We’re currently looking to add a data-theme switcher addon for use with DaisyUI, but would it be in anyway possible to add the ability to manage storybook addons, so that you could add your own?

I followed the instruction to create a demo from here https://dev.to/area17/getting-started-with-blast-storybook-for-laravel-blade-c5c ,
After running php artisan blast:demo then php artisan blast:launch , the demo button is not rendered

checked the console and got this error :

EventSource's response has a MIME type ("application/json") that is not "text/event-stream". Aborting the connection.

Hi!
Please excuse my poor English.
Thank you for the great library.

Let me ask a question as there does not seem to be the same issue in the past.

Environment

My environment is:

M1 Macbook Air
macOS 12.2.1
Blast v1.8

Description

I have a component that changes its style when an error occurs, like this:

@props([
    'name' => '',
    'errors' => null,
])

<input {{ $attributes->class(['!border-rose-600' => $errors->has($name)])
    ->merge([
        'type' => 'text',
        'name' => $name,
        'class' => 'w-full !text-base py-3 px-5 border border-solid border-transparent focus:outline-none focus:border-primary-400 rounded-xl',
    ]) }} />

I want to display this component in Storybook, but since the $errors variable is undefined.
I tried to override the has() method explicitly by using storybook or php directive, but you received an error message and could not achieve your goal.

@storybook([
    'args' => [
        'errors' => (object) [
            'has' => function () {
                return true;
            }
        ]
    ]
])

<x-input :errors="$errors" placeholder="Enter text here"></x-input>

// error message -> Call to a member function has() on array

@php
    $errors = (object) [
        'has' => function () {
            return true;
        },
    ];
@endphp

<x-input :errors="$errors" placeholder="Enter text here"></x-input>

// error message -> Call to undefined method stdClass::has()

Is there a way to display this component in Story?

Hello, I'm sorry to report I'm having CORs issues with the default installation.

I have tried the workaround in the blog post listed here but it has not worked.

Storybook instance loads fine but I get a 301 error and CORS errors in the console for the iframe content.

I can confirm that going to that page directly, loads the button component just fine.

If there's anything I can do to help or more info I can provide please let me know.

Lastly, thanks for creating this - it's a much needed addition to laravel and will allow me to remove a lot of my own hacks for getting components in to storybook.

Let's say we have a component that uses slots, how should that be defined in the storybook args?

For example, a more complex component that uses slots and sub-components:

<x-ui.buttons.general
    class="flex items-center gap-2 px-4 py-1 text-gray-600 border border-gray-500 rounded-md hover:bg-gray-500 hover:text-gray-100"
>
    <x-slot
        name="loadingIcon"
    >
        <x-icons.solid.cog
            class="w-4 h-4 shrink-0"
        />
    </x-slot>
    <x-slot
        name="icon"
    >
        <x-icons.light.csv
            class="w-4 h-4 shrink-0"
        />
    </x-slot>
    <span>
        Export To CSV
    </span>
</x-ui.buttons.general>

Update so --noInstall is default action when running the blast:launch task.

Detect if storybook is installed already and if so, skip the install. Add --install option to force installing dependencies.

I am using default Laravel 10 and tested also with Laravel 11 after installed Laravel Breeze:

0/2 [░░░░░░░░░░░░░░░░░░░░░░░░░░░░] Reusing npm dependencies...
1/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░] Generating Stories...node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/www/html/node_modules/tailwindcss/defaultTheme' imported from /var/www/html/tailwind.config.js
Did you mean to import tailwindcss/defaultTheme.js?
at finalizeResolution (node:internal/modules/esm/resolve:264:11)
at moduleResolve (node:internal/modules/esm/resolve:917:10)
at defaultResolve (node:internal/modules/esm/resolve:1130:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
code: 'ERR_MODULE_NOT_FOUND',
url: 'file:///var/www/html/node_modules/tailwindcss/defaultTheme'
}

Node.js v20.11.1

Symfony\Component\Process\Exception\ProcessFailedException

The command "'node' './src/resolveTailwindConfig.js'" failed.

Exit Code: 1(General error)

Working directory: /var/www/html/vendor/area17/blast

Output:

Error Output:

at vendor/symfony/process/Process.php:270
266▕ */
267▕ public function mustRun(?callable $callback = null, array $env = []): static
268▕ {
269▕ if (0 !== $this->run($callback, $env)) {
➜ 270▕ throw new ProcessFailedException($this);
271▕ }
272▕
273▕ return $this;
274▕ }

  +27 vendor frames 

28 artisan:35
Illuminate\Foundation\Console\Kernel::handle()

Hi there, amazing project , perfect partner for working with Twill.

I instaled in a pre-existing twill instalation. Everything fine, but I would like to devep isolated components working straight in the Storybook as I do with Nuxt. But I can't get it to auto-reload the page when a save the component source changes.

At my laravel build I use the browserSync for Lavavel Mix so I can proxy the Storybook url to get something like this, but I would like to have it straight into the Storybook build. Any way to edit the Blast webpack.config ?

Also, Is there any way to add storybook addons, like the tailwind dark mode ?

Resuming: the possibly to overwrite the .storybook and webpack without hacking the vendor package would be great.

Big thanks.

At the moment presetArgs can only be used inside a preset. Enabling presetArgs in @storybook directive would remove the requirement to create a data file.

hello. is it possible to set data in 'controls' tab and copy ready to use code snippet with this data. like Copy to Clipboard" or "Code Snippets" addons?

Currently we're bulding a static version of the storybook (blast:publish) and including that in a docker image to be deployed to various urls... Thus the STORYBOOK_SERVER_URL still includes the storybook_preview (which is weird as i'd like to have a static build of the entire storybook)

So what am i doing wrong? Is this something inside storybook or in the combination of blast and storybook ?

After installing blast and added the demo button I get the error message
'Cannot GET /storybook_preview/blast-demo/button'

In developer console it shows a 'GET' error 404 not found on this url:
http://localhost:6006/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after

What should I change in my config to make this work?

Investigate if it's possible to automatically detect css and js to remove requirement to publish config and manually setup assets when initially setting up Blast.

• Detect mix-manifest file and auto load from that?
• Prompt for asset paths during initial setup?
  • Look in public folder and create list of assets to select from?

https://www.chromatic.com/docs/setup

ive tried using the prebuilt static storybook but still fails.
Its likely ive missed something

steps to reproduce

create project on chromatic
https://www.chromatic.com/start

blast:publish

npx chromatic --project-token=<tokenId> --storybook-build-dir public/storybook-static

relates to #66

First of all, awesome work! Very cool making Storybook work with blade components. 😄

I was wondering if actions were currently supported, I think I'm on the right track, but I'm not sure if my config is broken or if it's the app.

I've been able to get this far:

{{-- resources/views/stories/button.blade.php --}}
@storybook([
    'name' => 'Button',
    'args' => [ ],
    'argTypes' => [
        'onClick' => [
            'action' => 'click',
        ],
    ]
])
<button onclick="{{ $onClick ?? '' }}('click')">Click Me</button>

But when I click the button, I get the following error:

In case it's needed, here is my config/blast.php file

<?php

return [
    'storybook_server_url' =>
        env('STORYBOOK_SERVER_HOST', env('APP_URL')) . '/storybook_preview',

    // See https://storybook.js.org/docs/react/configure/theming for available options
    'storybook_theme' => [],

    // set the background color of the storybook canvas area
    'canvas_bg_color' => '',

    // Blast will attempt to autoload assets from a mix-manifest if the assets arrays are empty. This option allows you to disable that functionality
    'autoload_assets' => false,

    'assets' => [
        'css' => [
            'assets/css/argon.mine209.css',
            'css/app.css',
            'assets/css/custom.css',
        ],
        'js' => [
            'js/manifest.js',
            'js/vendor.js',
            'js/app.js'
        ],
    ],

    // See https://storybook.js.org/addons/@etchteam/storybook-addon-status/
    'storybook_statuses' => [
        'deprecated' => [
            'background' => '#e02929',
            'color' => '#ffffff',
            'description' =>
                'This component is deprecated and should no longer be used',
        ],
        'wip' => [
            'background' => '#f59506',
            'color' => '#ffffff',
            'description' => 'This component is a work in progress',
        ],
        'readyForQA' => [
            'background' => '#34aae5',
            'color' => '#ffffff',
            'description' => 'This component is complete and ready to qa',
        ],
        'stable' => [
            'background' => '#1bbb3f',
            'color' => '#ffffff',
            'description' => 'This component is stable and released',
        ],
    ],

    'storybook_global_types' => [],

    // set a global custom order for stories in the Storybook UI
    // More info - https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
    'storybook_sort_order' => [],

    'build_timeout' => 300,

    'vendor_path' => 'vendor/area17/blast',

    'components' => [
        'docs-page' => \A17\Blast\Components\DocsPages\DocsPage::class,
    ],
];

Keep up the good work!

Hi @mrtimbrook is this supported and I am missing something? I have been so far able to pass an array to the story so it registers in the controls addon effectively but only gets passed to the components blade as a bool?

I just tried out Beyond Code's Invoker app and upon launch, I got an error that seemed to be related to this package. So I figured I'd cross-post this issue here too:

beyondcode/invoker-community#318

---

OS: darwin
Invoker Version: 2.10.0
Laravel Version: 9.34.0
Local project: true
PHP Binary: /opt/homebrew/bin/php
Route: /project/placeholder?project=local-jNgTuLwmLanmNUq8TaxKzz

Error:

ErrorException 

  mkdir(): Read-only file system

  at /Users/nathan/Code/pigworks/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:631
    627▕         if ($force) {
    628▕             return @mkdir($path, $mode, $recursive);
    629▕         }
    630▕ 
  ➜ 631▕         return mkdir($path, $mode, $recursive);
    632▕     }
    633▕ 
    634▕     /**
    635▕      * Move a directory.

      �[2m+3 vendor frames �[22m
  4   [internal]:0
      A17\Blast\DataStore::__construct(Object(Illuminate\Filesystem\Filesystem))

      �[2m+19 vendor frames �[22m
  24  phar:/Applications/Invoker.app/Contents/Resources/invoker.phar/src/Actions/GetCommandsAction.php:22
      Illuminate\Foundation\Console\Kernel::all()

This happens as soon as I open this particular project. I'm not sure what directory is failing to create. Does Invoker create a file or directory per project?

As soon as I removed this package, the project opens in Invoker without error. I wasn't really sure how to parse this. Any ideas what might be going on?

Hi Folks, Please let me know if you need more info than I provide: I have tried this package with 2 laravel 8 apps. One on a vagrant/homestead installation on windows and one on a wampserver installation on windows. I have read and re-read the docs re package installation. Both time keep getting CORS error thrown from the iFrame within blast page. I have debugged through the JS to line 46 in render.js where the error gets throws. I have tried disabling CORS protection in laravel by commenting CORS line in App\HTTP\Kernal.php, I have also tried adding custom CORS class to laravel to allow all.

I have also debugged through the php call stack - am I correct in thinking you cannot use the url generated in blast.php to access the page as it doesn't contain the necessary parameters e.g. myapp.local/storybook_preview/{because this bit is missing which access the template directory}. I am thinking you have coded this to be NOT accessed in this way but rather through the automated page loading from the 'artisan blast:launch' command with the localhost:6006 url? Therefore, I am starting to think along the lines of Laravel getting it's knickers in a twist over port 6006? or localhost having a fit over who is listening to what?

It is worth noting that I have noticed that the artisan command will boot the storybook server without a webserver running at all and open the browser window (Chrome) with the same errorbut the rest of the page loading ok.
Help resolving this issue would be amazing please as I am looking forward to trying out this package. The only component within the stories directory is the demo one from this package. Cheers, Rob.

STACK TRACE FROM DEV CONSOLE:
DevTools failed to load source map: Could not load content for http://localhost:6006/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:6006/react-popper-tooltip.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
iframe.html:1 Access to fetch at 'http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after' from origin 'http://localhost:6006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
render.js:46 GET http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after net::ERR_FAILED 200
_callee$ @ render.js:46
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
defaultFetchStoryHtml @ render.js:61
_callee2$ @ render.js:118
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ render.js:7
_next @ render.js:9
(anonymous) @ render.js:9
(anonymous) @ render.js:9
_renderMain @ render.js:167
renderMain @ render.js:99
_callee3$ @ StoryRenderer.js:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
Promise.then (async)
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStory @ StoryRenderer.js:429
_callee2$ @ StoryRenderer.js:266
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderStoryIfChanged @ StoryRenderer.js:290
_callee$ @ StoryRenderer.js:160
tryCatch @ runtime.js:63
invoke @ runtime.js:294
(anonymous) @ runtime.js:119
asyncGeneratorStep @ StoryRenderer.js:18
_next @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
(anonymous) @ StoryRenderer.js:20
renderCurrentStory @ StoryRenderer.js:174
(anonymous) @ StoryRenderer.js:87
(anonymous) @ index.js:168
handleEvent @ index.js:167
handler @ index.js:93
emit @ index.js:100
setSelection @ story_store.js:961
finishConfiguring @ story_store.js:424
ConfigApi.configure @ config_api.js:26
(anonymous) @ loadCsf.js:223
configure @ index.js:17
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:6
webpack_require @ bootstrap:24
webpack_exec @ util.inspect:1
(anonymous) @ util.inspect:1
webpack_require.O @ chunk loaded:23
(anonymous) @ util.inspect:1
webpackJsonpCallback @ jsonp chunk loading:558
(anonymous) @ main.iframe.bundle.js:1
Show 36 more frames
index.js:56 TypeError: Failed to fetch
at _callee$ (render.js:46)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:294)
at Generator.next (runtime.js:119)
at asyncGeneratorStep (render.js:7)
at _next (render.js:9)
at render.js:9
at new Promise ()
at render.js:9
at defaultFetchStoryHtml (render.js:61)

VAR DUMP of fetchUrl - passed into fetch(fetchURL) at which point the error is thrown:
fetchUrl: URL
hash: ""
host: "moneyscout.local"
hostname: "moneyscout.local"
href: "http://moneyscout.local/storybook_preview/blast-demo/button?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
origin: "http://moneyscout.local"
password: ""
pathname: "/storybook_preview/blast-demo/button"
port: ""
protocol: "http:"
search: "?measureEnabled=false&outline=false&label=Button&href=http%3A%2F%2Farea17.com&icon=plus-24&iconPosition=after"
searchParams: URLSearchParams {}
username: ""

COMPOSER.JSON:
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"area17/blast": "^1.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.54",
"laravel/sanctum": "^2.11",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.3",
"livewire/livewire": "^2.6",
"silviolleite/laravelpwa": "^2.0"
},
"require-dev": {
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.2",
"nunomaduro/collision": "^5.0",
"phpunit/phpunit": "^9.3.3"
},
"autoload": {
"psr-4": {
"App\": "app/",
"Database\Factories\": "database/factories/",
"Database\Seeders\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\Foundation\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi"
],
"post-root-package-install": [
"@php -r "file_exists('.env') || copy('.env.example', '.env');""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}

PACKAGE.JSON:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
}

}

Hi. I am not pretty sure about is it a Storybook or Blast bug, but when I am trying to use dot (.) in args name it throw an error:

You may need an additional loader to handle the result of these loaders.

[0] File was processed with these loaders:
[0]  * ./node_modules/@storybook/server/dist/cjs/server/loader.js
[0] You may need an additional loader to handle the result of these loaders.
[0] |     ],
[0] |     translations: {
[0] >       prefix.key1: "Text1",
[0] |       prefix.key2: "Text2",
[0] |       prefix.key3: "Text3",
[0]     at handleParseError (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:941:19)
[0]     at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:1045:5
[0]     at processResult (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:763:11)
[0]     at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0]     at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:406:3
[0]     at iterateNormalLoaders (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:232:10)

In a data folder, it's represented as:

return [
    'translations' => [
        'args' => [
            "prefix.key1" => "Text1",
            "prefix.key2" => "Text2",
            "prefix.key3" => "Text3",
        ]
    ]
];

Hi,

I install a fresh Laravel 10 with Laravel Herd. I install this package, and I try to launch it, but there are much errors in terminal
I followed the doc, twice, but without result.

[storybook] info => Serving static files from ./../../../public at /
[storybook] info => Starting manager..
[storybook] WARN unable to find package.json for @prettier/plugin-php
[storybook] WARN unable to find package.json for eslint
[storybook] WARN unable to find package.json for eslint-config-prettier
WARN unable to find package.json for eslint-plugin-prettier
[storybook] WARN unable to find package.json for husky
[storybook] WARN unable to find package.json for lint-staged
WARN unable to find package.json for prettier
[storybook] WARN unable to find package.json for stylelint
[storybook] WARN unable to find package.json for stylelint-config-recommended
[storybook] WARN unable to find package.json for stylelint-order
[storybook] WARN unable to find package.json for stylelint-prettier
[storybook] info Addon-docs: using MDX2
[storybook] info => Using implicit CSS loaders
[storybook] info => Using default Webpack5 setup

And when I start the website :
Too few arguments to function A17\Blast\Controllers\StoryController::__invoke(), 1 passed

When I launch the button demo, I have this :
Undefined variable $href

First of love the work!

we are using wp acorn which is WordPress with Laravel
it generates the manifest file to public/dist instead.

So we would like to be able to config the path of the manifest files

refs:

• https://roots.io/acorn/
• https://bud.js.org/
• https://roots.io/radicle/

Running the blast:launch command doesn't produce the expected result which would be to access either localhost:6006 or freshl9.test/storybook_preview and see StoryBook.

Blast: 1.6
Laravel: 9.9.0
PHP: 8.1.4
Node: 17.8.0

Also to node, the process keeps running until I ^C which you can notice in the log below.

Here's the console output.

[0] info @storybook/server v6.4.9
[0] info 
[0] (node:63163) DeprecationWarning: --static-dir CLI flag is deprecated, see:
[0] 
[0] https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] info => Loading presets
[0] info => Serving static files from /freshl9/public at /
[0] info => Loading custom manager config
[0] info => Using PostCSS preset with [email protected]
[0] info => Using default Webpack5 setup
[0] info => Loading custom manager config
[0] <i> [webpack-dev-middleware] wait until bundle finished
[0] <i> [webpack-dev-middleware] wait until bundle finished
[0] node:internal/crypto/hash:67
[0]   this[kHandle] = new _Hash(algorithm, xofLen);
[0]                   ^
[0] 
[0] Error: error:0308010C:digital envelope routines::unsupported
[0]     at new Hash (node:internal/crypto/hash:67:19)
[0]     at Object.createHash (node:crypto:135:10)
[0]     at BulkUpdateDecorator.hashFactory (/freshl9/vendor/area17/blast/node_modules/webpack/lib/util/createHash.js:145:18)
[0]     at BulkUpdateDecorator.update (/freshl9/vendor/area17/blast/node_modules/webpack/lib/util/createHash.js:46:50)
[0]     at OriginalSource.updateHash (/freshl9/vendor/area17/blast/node_modules/webpack/node_modules/webpack-sources/lib/OriginalSource.js:131:8)
[0]     at NormalModule._initBuildHash (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:888:17)
[0]     at handleParseResult (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:954:10)
[0]     at /freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:1048:4
[0]     at processResult (/freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:763:11)
[0]     at /freshl9/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0]     at /freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:406:3
[0]     at iterateNormalLoaders (/freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:232:10)
[0]     at /freshl9/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:223:4
[0]     at processTicksAndRejections (node:internal/process/task_queues:83:21) {
[0]   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
[0]   library: 'digital envelope routines',
[0]   reason: 'unsupported',
[0]   code: 'ERR_OSSL_EVP_UNSUPPORTED'
[0] }
[0] 
[0] Node.js v17.8.0
[0] start-storybook --quiet -s /freshl9/public -p 6006 exited with code 1
^C
[2] npm run watch-data exited with code SIGINT                                                                                                                                                                                                                          
[1] npm run watch-components exited with code SIGINT

Although accessing localhost:6006 has no response, accessing freshl9.test/storybook_preview throws a an exception.

Too few arguments to function A17\Blast\Controllers\StoryController::__invoke(), 1 passed in /Users/rui.sardinha/dev/sites/freshl9/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php on line 48 and exactly 2 expected

Let me know if I can provide more context.

As per Design addon settings pass array of designs.

https://storybookjs.github.io/addon-designs/?path=/story/docs-advanced-usage--embed-multiple-designs
https://github.com/storybookjs/addon-designs/blob/e09d21d2381752184eb9d442b9b89229d011af65/packages/examples/stories/docs/advanced/index.stories.js#L28-L39

https://storybookjs.github.io/addon-designs/?path=/story/docs-advanced-usage--set-tab-names

https://github.com/storybookjs/addon-designs/blob/e09d21d2381752184eb9d442b9b89229d011af65/packages/examples/stories/docs/advanced/index.stories.js#L43-L56

Hi, it's sure, I'm a beginner with StoryBook.
I followed the documentation of this package.

I installed a new fresh Laravel 11.

laravel new storybook
composer require area17/blast
php artisan vendor:publish --provider="A17\Blast\BlastServiceProvider" --tag="blast-config" 

I don't know how I should update the config file

If I do this :

php artisan blast:demo

The story is created

If I do :

php artisan blast:launch

or

php artisan blast:launch --install

I have this :

and

Hello, i just installed this package and i fail..

❯ npm -v
8.12.1

❯ node -v
v18.2.0

❯ php -v
PHP 8.1.6 (cli) (built: May 12 2022 23:30:52) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.6, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.6, Copyright (c), by Zend Technologies

php artisan blast:launch

0/2 [░░░░░░░░░░░░░░░░░░░░░░░░░░░░] Reusing npm dependencies...
1/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░] Generating Stories...
2/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] Setup Complete. Booting Storybook and watching stories.
> @area17/[email protected] storybook
> concurrently "start-storybook --quiet -s $STORYBOOK_STATIC_PATH -p 6006" "npm run watch-components" "npm run watch-data"

[1] 
[1] > @area17/[email protected] watch-components
[1] > chokidar "$COMPONENTPATH/**/*.blade.php" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';"
[1] 
[2] 
[2] > @area17/[email protected] watch-data
[2] > chokidar "$COMPONENTPATH/data/**/*.php" "$COMPONENTPATH/**/*.md" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories;"
[2] 
[1] Watching "/Users/jonasgustafsson/projects/app/resources/views/stories/**/*.blade.php" ..
[2] Watching "/Users/jonasgustafsson/projects/app/resources/views/stories/data/**/*.php", "/Users/jonasgustafsson/projects/app/resources/views/stories/**/*.md" ..
[0] info @storybook/server v6.4.9
[0] info 
[0] (node:40429) DeprecationWarning: --static-dir CLI flag is deprecated, see:
[0] 
[0] https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] info => Loading presets
[0] info => Serving static files from /Users/jonasgustafsson/projects/app/public at /
[0] ERR! TypeError: details.family.toLowerCase is not a function
[0] ERR!     at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:385:39
[0] ERR!     at Array.filter (<anonymous>)
[0] ERR!     at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:384:37
[0] ERR!     at Array.map (<anonymous>)
[0] ERR!     at ip.address (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:379:37)
[0] ERR!     at getServerAddresses (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/utils/server-address.js:20:55)
[0] ERR!     at storybookDevServer (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/dev-server.js:91:67)
[0] ERR!     at async buildDevStandalone (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
[0] ERR!     at async buildDev (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
[0] ERR!  TypeError: details.family.toLowerCase is not a function
[0] ERR!     at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:385:39
[0] ERR!     at Array.filter (<anonymous>)
[0] ERR!     at /Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:384:37
[0] ERR!     at Array.map (<anonymous>)
[0] ERR!     at ip.address (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/ip/lib/ip.js:379:37)
[0] ERR!     at getServerAddresses (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/utils/server-address.js:20:55)
[0] ERR!     at storybookDevServer (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/dev-server.js:91:67)
[0] ERR!     at async buildDevStandalone (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
[0] ERR!     at async buildDev (/Users/jonasgustafsson/projects/app/vendor/area17/blast/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
[0] WARN Broken build, fix the error above.
[0] WARN You may need to refresh the browser.
[0] 
[0] 
[0] start-storybook --quiet -s /Users/jonasgustafsson/projects/app/public -p 6006 exited with code 1

area17/blast 1.9.1
Laravel 10.2.0
PHP 8.2.2 
node 16.20.2
npm 8.19.4

I have this problem. Does anyone have a solution?

Since we already have the values from tailwind why not use it in storybook aswell?

refs:

• https://storybook.js.org/docs/react/essentials/viewport
• https://storybook.js.org/docs/react/essentials/viewport#add-new-devices

Right now you can't run the publish task without having run the launch task or manually installed the dependencies. Let's update it to check/install dependencies as part of this task too.

https://github.com/area17/blast/blob/36ec52b08f859a841819ae9bc1663e01888e688d/src/Commands/Launch.php#L149C21-L149C21

$this->buildTailwindViewports($this->storybookViewports),

trait TailwindViewports

should use Illuminate\Support\Arr;

I am thinking of a solution that avoids running a separate php server for the components, this could make it possible to serve the storybook on a github page.

Maybe we can just run php in the browser (via a wasm package?)

Or other ideas?

The feature

https://tailwindcss.com/blog/tailwindcss-v3-4

Use case

Dynamic viewport units: Full-height elements that actually work on mobile.
New :has() variant: Style parent elements based on their children.
Style children with the * variant: We’ll probably regret giving you this one.
New size-* utilities: Set width and height at the same time, finally.
Balanced headlines with text-wrap utilities: No more max-width tweaking or responsive line breaks.
Subgrid support: That grid feature you struggle to understand, finally in Tailwind CSS.
Extended min-width, max-width, and min-height scales: Now min-w-12 is a real class.
Extended opacity scale: For those moments when neither 60% or 70% were quite right.
Extended grid-rows-* scale: Might as well make it match the column scale.
New forced-colors variant: Easily fine-tune your site for forced colors mode.
New forced-color-adjust utilities: For even more forced colors fine-tuning.

Hi. I found 1 issue related to the preset (presetArgs).

If we are looking for an example of presetArgs: https://github.com/area17/blast#presetting-data all type of values are strings, and works well.
If in the example (in file stories/data/card.php) we change a title value to null, we get an error, like:

[0] info => Using cached manager
[0] webpack built preview d42a76af114de80996eb in 7378ms
[0] ModuleBuildError: Module build failed (from ./node_modules/@storybook/server/dist/cjs/server/loader.js):
[0] TypeError: Cannot convert undefined or null to object
[0]     at Function.keys (<anonymous>)
[0]     at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:108:16)
[0]     at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0]     at Array.map (<anonymous>)
[0]     at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0]     at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:98:14
[0]     at Array.map (<anonymous>)
[0]     at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:97:31)
[0]     at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0]     at Array.map (<anonymous>)
[0]     at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0]     at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:110:21
[0]     at Array.map (<anonymous>)
[0]     at stringifyObject (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:109:47)
[0]     at stringifyStory (/var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:159:69)
[0]     at /var/www/html/vendor/area17/blast/node_modules/@storybook/server/dist/cjs/lib/compiler/stringifier.js:165:12
[0]     at processResult (/var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:721:19)
[0]     at /var/www/html/vendor/area17/blast/node_modules/webpack/lib/NormalModule.js:827:5
[0]     at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:399:11
[0]     at /var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:251:18
[0]     at runSyncOrAsync (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
[0]     at iterateNormalLoaders (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
[0]     at Array.<anonymous> (/var/www/html/vendor/area17/blast/node_modules/loader-runner/lib/LoaderRunner.js:223:4)
[0]     at runCallbacks (/var/www/html/vendor/area17/blast/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
[0]     at /var/www/html/vendor/area17/blast/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
[0]     at /var/www/html/vendor/area17/blast/node_modules/graceful-fs/graceful-fs.js:123:16
[0]     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
[0]
[0]
[0] WARN Broken build, fix the error above.
[0] WARN You may need to refresh the browser.
[0] start-storybook --quiet -s /var/www/html/public -p 6006 exited with code 1

The key phrase is:
TypeError: Cannot convert undefined or null to object

Is it possible to add a support for null values to Blast?
Thanks

Looks like https://github.com/area17/blast/blob/main/.storybook/preview.js#L1 imports https://github.com/area17/blast/blob/main/resources/frontend/css/main.css and therefore tailwind by default. This makes it very hard to use Blast for anything that does not use it. Tailwind has it's own set of default styles and resets (i.e. sets <svg> to display:block) that changes styling of components we build in storybook. Either requires overriding tailwind styles or produces unexpected results once the component is rendered outside of Blast. Neither is the ideal workflow.

Is that by design to only support tailwind projects or is possible to fix?

I discovered an issue with the command blast:launch --install when ssh'ing into vagrant box/homestead. The same babel parser error that gets thrown sometimes when trying to run npm run dev in the same environment. It seems to be caused by simlinks set up between the repos on the windows host and the directories hosting the site in the vagrant box. When running the command from a terminal on the windows host it works fine (using npm installation on windows), after which running blast:launch (without --install) works from within the vagrant box. The usual work around is the --no-bin-links argument with the npm command. Will investigate further...

@mrtimbrook Will do, I had a dive into the Storybook docs about this topic earlier,. Will do more digging. Looks like the dependency is already there.

Relevant doc entry: https://www.php.net/manual/en/migration81.deprecated.php#migration81.deprecated.core.static-trait

The default config causes the following notice:

Deprecated: Calling static trait method A17\Blast\Traits\StorybookLogo::defaultLogo is deprecated, it should only be called on a class using the trait in /var/www/html/config/blast.php on line 80

Suggested fix:

Make A17\Blast\Traits\StorybookLogo a class instead of a trait. However this could count as a BC break.

An alternative suggestion is to mark that trait as deprecated to be in line with PHP 8.1's deprecations and create a new class that does the exact same.

I can provide a PR if you'd like.

In my recent Laravel + Tailwind installation, tailwind.config.js is included as an ES Module. This causes the following error on blast:launch and blast:publish:

php artisan blast:launch
0/2 [░░░░░░░░░░░░░░░░░░░░░░░░░░░░] Reusing npm dependencies...
1/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░] Generating Stories...Error [ERR_REQUIRE_ESM]: require() of ES Module /e/server/gigsalad-laravel/laravel/tailwind.config.js 
from /e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js not supported.
Instead change the require of tailwind.config.js in /e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js to a dynamic import() 
which is available in all CommonJS modules.
    at Object.<anonymous> (/e/server/gigsalad-laravel/laravel/vendor/area17/blast/src/resolveTailwindConfig.js:6:18) {
  code: 'ERR_REQUIRE_ESM'
}

It appears Tailwind generates an ESM config file by default depending on other settings in your project: https://tailwindcss.com/docs/configuration#using-esm-or-type-script

And it looks like Laravel has configured package.json as type: module since version 10.2: https://github.com/laravel/laravel/blob/25070a3ffb175c15b59cd7f12289a9648165bba3/CHANGELOG.md?plain=1#L34

By supporting both ESM and CommonJS formats, Blast will be more able to provide documentation "out of the box" going forward.

I would like to be able to choose on which port Storybook runs. Currently, it seems to be hard coded (-p 6006). Adding a --PORT option to the blast:launch command would be useful.

I use Laravel Sail to run my project locally. Initial launch with blast:launch works fine, but as soon as some code is changed the node process throws an error.

[1] /var/www/html/vendor/area17/blast/node_modules/chokidar-cli/utils.js:16
[1]         throw new Error('$SHELL environment variable is not set.');
[1]               ^
[1] 
[1] Error: $SHELL environment variable is not set.
[1]     at Object.run (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/utils.js:16:15)
[1]     at run (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/index.js:225:18)
[1]     at FSWatcher.<anonymous> (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/index.js:164:13)
[1]     at FSWatcher.emit (node:events:378:20)
[1]     at FSWatcher.emitWithAll (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/index.js:541:32)
[1]     at FSWatcher._emit (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/index.js:632:8)
[1]     at listener (/var/www/html/vendor/area17/blast/node_modules/chokidar-cli/node_modules/chokidar/lib/nodefs-handler.js:370:20)
[1] npm ERR! code 1
[1] npm ERR! path /var/www/html/vendor/area17/blast
[1] npm ERR! command failed
[1] npm ERR! command sh -c chokidar "$COMPONENTPATH/**/*.blade.php" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';"
[1] 
npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/sail/.npm/_logs/2021-11-09T14_02_55_395Z-debug.log
[1] npm run watch-components exited with code 1

Looks like chokidar is exiting because env var $SHELL is not present. I echoed $SHELL in the Sail shell, and its defined as /bin/bash.

https://flareapp.io/share/A7E9pky7

I would like to use the same app.js (with my Vue setup) in Blast as in my project (with Vite), but when I add app.js to the config, it doesn't work because the type of the <script> is text/javascript instead of module.