I have a Hydrogen v2 project that’s using Remix and importing components from a storybook project.
I tried to implement this https://blog.sentiero.digital/how-to-run-remix-link-component-in-storybook and some others solutions but I’m still receiving that error.
Here’s my preview.tsx
import type { Preview } from '@storybook/react';
import React from 'react';
import { createRemixStub } from '@remix-run/testing';
import '../src/styles/tailwind.css';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on.*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
options: {
storySort: {
order: ['Test', ['Test1', ['Header']]],
},
},
},
decorators: [
(Story) => {
const RemixStub = createRemixStub([
{
path: '/*',
action: () => ({ redirect: '/' }),
loader: () => ({ redirect: '/' }),
Component() {
// <-- here
return <Story />;
},
},
]);
return <RemixStub />;
},
],
};
export default preview;
My Stories
// import { createRemixStub } from '@remix-run/testing';
import type { Meta, StoryObj } from '@storybook/react';
// import React from 'react';
import Link from './Link';
const meta: Meta<typeof Link> = {
title: 'Test/Test/Link',
component: Link,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
// decorators: [
// (Story) => {
// const RemixStub = createRemixStub([
// {
// path: '/',
// Component() {
// // <-- here
// return <Story />;
// },
// },
// ]);
// return <RemixStub />;
// },
// ],
};
export default meta;
type Story = StoryObj<typeof Link>;
export const Default: Story = {
args: {
size: 'base',
color: 'sienna',
children: 'Test',
url: '/test/',
},
argTypes: {
color: {
options: ['sienna', 'onyx', 'bone'],
control: { type: 'select' },
},
},
};
This is the complete error
Error: useHref() may be used only in the context of a component.
throw new Error(message);
^
at invariant$1 (/{path}/node_modules/@remix-run/router/dist/router.js:241:11)
at UNSAFE_invariant (/{path}/node_modules/react-router/dist/index.js:86:67)
at useHref (/{path}/node_modules/@remix-run/react/dist/esm/components.js:162:14)
I tried this https://blog.sentiero.digital/how-to-run-remix-link-component-in-storybook and others solutions related to that.