fix: move package.json import to client side

try `with` and `assert`

README.md

@@ -3,7 +3,7 @@
 [![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg?sanitize=true)](https://storybook.js.org)
 [![npm](https://img.shields.io/npm/v/storybook-addon-remix-react-router?color=blue)](https://www.npmjs.com/package/storybook-addon-remix-react-router)
 [![Release](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml/badge.svg)](https://github.com/JesusTheHun/storybook-addon-remix-react-router/actions/workflows/release.yml)
-![npm](https://img.shields.io/npm/dm/storybook-addon-react-router-v6)
+![npm](https://img.shields.io/npm/dm/storybook-addon-remix-react-router)
 
 > Use Remix React Router in your stories.
 

src/constants.ts

@@ -1,6 +1,3 @@
-// @ts-ignore
-import packageJson from '../package.json' assert { type: 'json' };
-
 export const ADDON_ID = 'storybook/react-router-v6';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `reactRouter`;
@@ -15,5 +12,3 @@ export const EVENTS = {
  LOADER_INVOKED: `${ADDON_ID}/loader_invoked`,
  LOADER_SETTLED: `${ADDON_ID}/loader_settled`,
 } as const;
-
-export const ADDON_VERSION = packageJson.version;

src/features/decorator/withRouter.tsx

@@ -4,7 +4,7 @@ import { PARAM_KEY } from '../../constants';
 import { ReactRouterDecorator, ReactRouterDecoratorProps } from './components/ReactRouterDecorator';
 import { castParametersV2 } from './utils/castParametersV2';
 
-export const withRouter = makeDecorator({
+export const withRouter: () => any = makeDecorator({
  name: 'withRouter',
  parameterName: PARAM_KEY,
  wrapper: (getStory, context, { parameters }) => {

src/features/panel/hooks/useAddonVersions.ts

@@ -1,28 +1,51 @@
 import { compareVersions } from 'compare-versions';
 import { useEffect, useState } from 'react';
-import { ADDON_VERSION } from '../../../constants';
 
 export function useAddonVersions() {
- const [version, setVersion] = useState<string>();
+ const [currentVersion, setCurrentVersion] = useState<string>();
+ const [latestVersion, setLatestVersion] = useState<string>();
 
  useEffect(() => {
- if (version !== undefined) return;
-
  const abortController = new AbortController();
  fetch(`https://registry.npmjs.org/storybook-addon-remix-react-router/latest`, { signal: abortController.signal })
  .then((b) => b.json())
- .then((json) => setVersion(json.version))
+ .then((json) => setLatestVersion(json.version))
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  .catch(() => {});
 
  return () => abortController.abort();
- }, [version]);
+ }, []);
+
+ useEffect(() => {
+ getAddonVersion().then((v) => setCurrentVersion(v));
+ }, []);
 
- const newVersionAvailable = version === undefined ? undefined : compareVersions(version, ADDON_VERSION) === 1;
+ const newVersionAvailable =
+ !latestVersion || !currentVersion ? undefined : compareVersions(latestVersion, currentVersion) === 1;
 
  return {
- currentAddonVersion: ADDON_VERSION,
- latestAddonVersion: version,
+ currentAddonVersion: currentVersion,
+ latestAddonVersion: latestVersion,
  addonUpdateAvailable: newVersionAvailable,
  };
 }
+
+async function getAddonVersion() {
+ try {
+ const packageJson = await import('../../../../package.json', {
+ with: {
+ type: 'json',
+ },
+ });
+
+ return packageJson.version;
+ } catch (error) {
+ const packageJson = await import('../../../../package.json', {
+ assert: {
+ type: 'json',
+ },
+ });
+
+ return packageJson.version;
+ }
+}