React storybook: Can't resolve .ts files

[leota]

Prerequisites

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed

Expected Behavior

Being able to import from .ts into .stories.tsx.

Current Behavior

It throws following error while compiling:

ERROR in ./libs/ui/src/lib/components/controls/button.stories.tsx
Module not found: Error: Can't resolve '../../themes' in '/Users/{USERNAME}/Documents/workspace/platform/apps/libs/ui/src/lib/components/controls'
 @ ./libs/ui/src/lib/components/controls/button.stories.tsx 4:0-45 10:29-42
 @ ./libs/ui/src/lib sync \.stories\.tsx?$
 @ ./libs/ui/.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./libs/ui/.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

Steps to Reproduce

This is my project structure:

- ROOT
    - .storybook
    - apps
    -libs
        -ui
            -.storybook
            -src
                -lib
                    -components
                        -controls
                            button.tsx
                            button.stories.tsx
                            index.ts
                    -themes
                        index.ts
                        provider.tsx   
                        my-theme.ts    

This is button.stories.tsx

import React from 'react';
import { action } from '@storybook/addon-actions';
import { UIButton } from './button';
import { ThemeProvider, MyTheme } from '../../themes';

export default { title: 'Button' };

export const withText = () => (
  <ThemeProvider theme={MyTheme}>
    <UIButton onClick={action('clicked')}>Button</UIButton>
  </ThemeProvider>
);

export const withEmoji = () => (
  <UIButton>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </UIButton>
);

This is provider.tsx:

import styled from 'styled-components';
import { Grommet } from 'grommet';

export const ThemeProvider = styled(Grommet)``;

Context

NX report:

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

[leota]

I fixed it pushing the.ts extension in libs/ui/.storybook/webpack config.js, which now looks like this:

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

I'm going to open a PR

[jaysoo]

@leota Thanks for the fix! It is merged.

[leota]

@jaysoo great, thank you!

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.