Storybook react-native error in while running on windows not able to make proper stories.require.js file

588 views Asked by At

I have implemented the storybook(v 6.5) in react-native in my root project when i run the script to run storybook on my device which is andriod and ios the file which is created IN .ondevice folder is story.require.js is have path issue in windows system it is proper in linux and mac but i am getting the error in windows

this is the file which created in windows system story.require.js

import {
  configure,
  addDecorator,
  addParameters,
  addArgsEnhancer,
  clearDecorators,
} from "@storybook/react-native";
global.STORIES = [
  {
    titlePrefix: "",
    directory: "./src/components",
    files: "**/*.stories.?(ts|tsx|js|jsx)",
    importPathMatcher:
      "^\\.[\\\\/](?:src[\\\\/]components(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
  },
];
import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-backgrounds/register";
import "@storybook/addon-ondevice-actions/register";
import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
import { decorators, parameters } from "./preview";
if (decorators) {
  if (__DEV__) {
    // stops the warning from showing on every HMR
    require("react-native").LogBox.ignoreLogs([
      "clearDecorators is deprecated and will be removed in Storybook 7.0",
    ]);
  }
  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
  clearDecorators();
  decorators.forEach((decorator) => addDecorator(decorator));
}
if (parameters) {
  addParameters(parameters);
}
try {
  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
} catch {}
const getStories = () => {
  return {
    "./srccomponentsCustomButtonCustomButton.stories.tsx": require("..srccomponentsCustomButtonCustomButton.stories.tsx"),
    "./srccomponentsCustomCheckBoxCustomCheckBox.stories.tsx": require("..srccomponentsCustomCheckBoxCustomCheckBox.stories.tsx"),
    "./srccomponentsCustomTextCustomText.stories.tsx": require("..srccomponentsCustomTextCustomText.stories.tsx"),
  };
};
configure(getStories, module, false);

the file which is correctly created in linux and mac is this

is there any solution for the forword \ backword / issue that is being created with the storybook for the .ondevice folder

I have tried the path.resolve() and replace is not working

import {
  configure,
  addDecorator,
  addParameters,
  addArgsEnhancer,
  clearDecorators,
} from "@storybook/react-native";

global.STORIES = [
  {
    titlePrefix: "",
    directory: "./src/components",
    files: "**/*.stories.?(ts|tsx|js|jsx)",
    importPathMatcher:
      "^\\.[\\\\/](?:src\\/components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
  },
];

import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-backgrounds/register";
import "@storybook/addon-ondevice-actions/register";
import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
import { decorators, parameters } from "./preview";

if (decorators) {
  if (__DEV__) {
    // stops the warning from showing on every HMR
    require("react-native").LogBox.ignoreLogs([
      "clearDecorators is deprecated and will be removed in Storybook 7.0",
    ]);
  }
  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
  clearDecorators();
  decorators.forEach((decorator) => addDecorator(decorator));
}

if (parameters) {
  addParameters(parameters);
}

try {
  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
} catch {}

const getStories = () => {
  return {
    "./src/components/CustomText/CustomText.stories.tsx": require("../src/components/CustomText/CustomText.stories.tsx"),
  };
};

configure(getStories, module, false);

please provide some idea to reolve the path issue in the windows

0

There are 0 answers