Nx: React storybook: issue importing from other libraries

[allforabit]

Expected Behavior

When used with storybook it should be possible to import from other internal libraries.

Current Behavior

Storybook doesn't allow importing from another internal library or allow code that imports from another library.

Failure Information (for bugs)

Library A has storybook configured. This will work fine if the library has no dependencies on another internal library, however it will fail if another internal library is referenced either in the story or code that the story references.

Steps to Reproduce

1. Create a react library
2. Add storybook configuration to it
3. Add a dependency on another internal lib

Context

Please provide any relevant information about your setup:

  @nrwl/angular : Not Found
  @nrwl/cli : 8.11.1
  @nrwl/cypress : 8.11.1
  @nrwl/eslint-plugin-nx : 8.11.1
  @nrwl/express : Not Found
  @nrwl/jest : 8.11.1
  @nrwl/linter : 8.11.1
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 8.11.1
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.11.1
  @nrwl/web : 8.11.1
  @nrwl/workspace : 8.11.1
  typescript : 3.5.3

Failure Logs

Output from storybook:

ERROR in ./libs/core/src/lib/core.tsx
Module not found: Error: Can't resolve '@storybook-issue/hello-world' in 'User\Documents\Github\storybook-issue\libs\core\src\lib'
 @ ./libs/core/src/lib/core.tsx 3:0-58 10:43-53
 @ ./libs/core/src/lib/core.stories.tsx
 @ ./libs/core/src/lib sync \.stories\.tsx?$
 @ ./libs/core/.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./libs/core/.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

Other

I've recreated the bug here: https://github.com/allforabit/storybook-issue

[allforabit]

Adding tsconfig-paths-webpack-plugin seems to fix it:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = async ({ config, mode }) => {

  const tsPaths = new TsconfigPathsPlugin();

  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);

  // Return the altered config
  return config;
};

[allforabit]

That's in <root>/.storybook/webpack.config.js

[wescopeland]

Unfortunately, tsconfig-paths-webpack-plugin doesn't seem to be solving the issue for me.

[FrancoisDF]

It is not working for me as well. It looks like it does not connect to the <root>/tsconfig.json that list all the paths.

[FrancoisDF]

I could fix my issue by pointing webpack to the actual build path of my library (my library needs to be built before being consumed). It's the same info I have in my tsconfig.json' paths.

In /.storybook/webpack.config.js I have

const path = require('path');
module.exports = async ({ config, mode }) => {
  config.resolve.alias['@test/core'] = path.resolve(__dirname, '../dist/libs/core')
  return config;
};

[ghost]

any news of this issue?

[Anushree-285]

I'm also facing this same issue .. need to import modules from other internal libraries in angular library structure ...

any update on this issue ?

[muhajirdev]

sama issue

[muhajirdev]

@allforabit's solutions is working for me

[muhajirdev]

here's how my webpack.config.js looks like

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const rootWebpackConfig = require('../../../.storybook/webpack.config');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  config = await rootWebpackConfig({ config, mode });

  config.resolve.extensions.push('.tsx');
  config.resolve.extensions.push('.ts');

  const tsPaths = new TsconfigPathsPlugin();

  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
    },
  });
  return config;
};

[msreekm]

i have the same issue ,what is the solution ?

[msreekm]

this worked for me- I had to add path to tsconfig to get it working.
//shared lib storybook

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
const rootWebpackConfig = require('../../../.storybook/webpack.config');
// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  config = await rootWebpackConfig({ config, mode });

  config.resolve.extensions.push('.tsx');
  config.resolve.extensions.push('.ts');

  const tsPaths = new TsconfigPathsPlugin({
    configFile: path.resolve(__dirname, '../.storybook/tsconfig.json'),
  });

  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
    },
  });
  return config;
};