absolute path in Storybook react-native

[alb0084]

Describe the bug There is a problem about the absolute path in project storybook for react-native. I try to figure out with babel.config.js, metro.config.js and other file configuration (i've tried to set webpack with the configure file main.js), but the problem it seems to still remain. How is possible to resolve it?

[dannyhw]

What absolute path are you referring to? Can you give an example of what you mean?

[alb0084]

i'm referring the path inside the project folder ./storybook/stories. I'm trying to import my component with import from @Components/....but vscode cannot spot it. Here what i mean,

The current version which i'm using is storybook react-native.

edit: I'm trying to configure the file main.js in this way :

const path = require('path');

module.exports = {
  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions'],
  docs: { autodocs: 'tag' },
  webpackFinal: async (config, { configType }) => {
    // Configurazione dei path assoluti
    config.resolve.alias['@root'] = path.resolve(__dirname, '../');
    // Aggiungi altri alias o configurazioni di Webpack come necessario
    config.resolve.alias['@root'] = path.resolve(__dirname, '../');
    return config;
  }
};

but webpackFinal it seems does not recognize. Further more, i've tried to put a cosole.log inside the following function but it does not display anything.

second Edit* I've tried to use this setting in file main.js

webpackFinal: async (config, { configType }) => {
    // Trova e rimuovi il vecchio plugin di resolve TypeScript
    const tsRule = config.module.rules.find(rule => rule.test && rule.test.toString().includes('tsx|ts'));
    tsRule.use[0].options.plugins = tsRule.use[0].options.plugins.filter(
      plugin => plugin.constructor.name !== 'TsconfigPathsPlugin'
    );

    // Aggiungi il nuovo plugin tsconfig-paths-webpack-plugin
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, '../tsconfig.json'),
      })
    );

    return config;
  }

it does not work, not even console.log output something inside webpackFinal (if i do console.log(config) the output is empty).

update3: I've realized now that actually in the path ./storybook/stories my absolute path works! is only a matter of vscode compiler that allert "Cannot find module '@Contexts/ThemeContext' or its corresponding type declarations.ts(2307) " this actually the problem.

[dannyhw]

@alb0084 you just need to add it to your typescript config and then it should stop complaining in vscode

[alb0084]

@dannyhw no, in vscode i've added but continue to complain.

[dannyhw]

@alb0084 Since you have your stories files in .stories you need to manually add that folder to typescript's includes to include those files in the typechecking.

[dannyhw]

no response in a while so I'm closing, please let me know if you want to reopen.