React storybook: issue importing from other libraries

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;
};

[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;
};