Repository: storybook
Issue: ESM, Yarn 2, Typescript - Storybook cannot resolve modules when the (mandatory) extension is provided
Labels: bug,configuration babel / webpack,has workaround,sev:S3

**Describe the bug**
I've got a project that uses ESM, Yarn 2 and Typescript. [Link.](https://github.com/kosciolek/system/tree/storybook-bug)

Storybook was installed via `yarn dlx sb init && yarn unplug open -AR`.

There is a component in an `index.tsx` file. In `Checkbox.stories.tsx`, right next to it, we've got:
```
import { Checkbox } from "./index.js";
```

Having the `.js` extension (even if you're working with TS) seems to be the standard for ESM ([Link to node docs](https://nodejs.org/api/esm.html#esm_mandatory_file_extensions), also some popular gist describing ESM [here](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)). Storybook seems to be having a problem with that. Changing the import to `./index` makes Storybook work (it breaks some other tools though), however launching storybook with `./index.js` crashes with

```
ERROR in ./src/components/Checkbox/Checkbox.stories.tsx
Module not found: Error: Can't resolve './index.js' in '/home/rijndael/projects/system/src/components/Checkbox'
 @ ./src/components/Checkbox/Checkbox.stories.tsx 29:0-38 35:27-35
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi ./.yarn/$$virtual/@storybook-core-client-virtual-9608be35d3/0/cache/@storybook-core-client-npm-6.3.4-0184905bed-9516e5fb22.zip/node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./.yarn/$$virtual/@storybook-core-client-virtual-9608be35d3/0/cache/@storybook-core-client-npm-6.3.4-0184905bed-9516e5fb22.zip/node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./.yarn/$$virtual/@storybook-addon-docs-virtual-3e2a1dc509/0/cache/@storybook-addon-docs-npm-6.3.4-de7996f475-2feda604e9.zip/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-docs-virtual-3e2a1dc509/0/cache/@storybook-addon-docs-npm-6.3.4-de7996f475-2feda604e9.zip/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-links-virtual-c21e635147/0/cache/@storybook-addon-links-npm-6.3.4-c5eb073213-f8111ae683.zip/node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-actions-virtual-10479395fe/0/cache/@storybook-addon-actions-npm-6.3.4-26219042b2-d1d50eb9ee.zip/node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-actions-virtual-10479395fe/0/cache/@storybook-addon-actions-npm-6.3.4-26219042b2-d1d50eb9ee.zip/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-backgrounds-virtual-5a984e0897/0/cache/@storybook-addon-backgrounds-npm-6.3.4-c6dab8c6c4-cb69879215.zip/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-backgrounds-virtual-5a984e0897/0/cache/@storybook-addon-backgrounds-npm-6.3.4-c6dab8c6c4-cb69879215.zip/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./.yarn/$$virtual/@storybook-addon-measure-virtual-48d0f272c1/0/cache/@storybook-addon-measure-npm-2.0.0-e9fae59781-63c238fe85.zip/node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./.yarn/$$virtual/storybook-addon-outline-virtual-6a441d6922/0/cache/storybook-addon-outline-npm-1.4.1-1917a3c21b-8cdd168a9d.zip/node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-83de4f89e7.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  7.47 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./.yarn/$$virtual/html-webpack-plugin-virtual-aa2b622ea0/0/cache/html-webpack-plugin-npm-4.5.2-ad6a757dbb-5896c2ac5c.zip/node_modules/html-webpack-plugin/lib/loader.js!./.yarn/$$virtual/@storybook-core-common-virtual-9d1cabd1e9/0/cache/@storybook-core-common-npm-6.3.4-07e332ca1d-b9baa4a470.zip/node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
ModuleNotFoundError: Module not found: Error: Can't resolve './index.js' in '/home/rijndael/projects/system/src/components/Checkbox'
    at /home/rijndael/projects/system/.yarn/$$virtual/webpack-virtual-685de62d59/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/Compilation.js:925:10
    at /home/rijndael/projects/system/.yarn/$$virtual/webpack-virtual-685de62d59/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /home/rijndael/projects/system/.yarn/$$virtual/webpack-virtual-685de62d59/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /home/rijndael/projects/system/.yarn/$$virtual/webpack-virtual-685de62d59/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /home/rijndael/projects/system/.yarn/cache/neo-async-npm-2.6.2-75d6902586-34a8f53091.zip/node_modules/neo-async/async.js:2830:7
    at /home/rijndael/projects/system/.yarn/cache/neo-async-npm-2.6.2-75d6902586-34a8f53091.zip/node_modules/neo-async/async.js:6877:13
    at /home/rijndael/projects/system/.yarn/$$virtual/webpack-virtual-685de62d59/0/cache/webpack-npm-4.46.0-a8158cfa7f-1e3bc97c01.zip/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/rijndael/projects/system/.yarn/cache/tapable-npm-1.1.3-f1c2843426-b2c2ab2026.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/rijndael/projects/system/.yarn/cache/tapable-npm-1.1.3-f1c2843426-b2c2ab2026.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/rijndael/projects/system/.yarn/cache/tapable-npm-1.1.3-f1c2843426-b2c2ab2026.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/rijndael/projects/system/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-72e679343f.zip/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
resolve './index.js' in '/home/rijndael/projects/system/src/components/Checkbox'
  using description file: /home/rijndael/projects/system/package.json (relative path: ./src/components/Checkbox)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/rijndael/projects/system/package.json (relative path: ./src/components/Checkbox/index.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.jsx doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.tsx doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.json doesn't exist
      .cjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/rijndael/projects/system/src/components/Checkbox/index.js.cjs doesn't exist
      as directory
        /home/rijndael/projects/system/src/components/Checkbox/index.js doesn't exist

```

**To Reproduce**
[Repo link](https://github.com/kosciolek/system/tree/storybook-bug)

```
git clone https://github.com/kosciolek/system -b storybook-bug && cd system && yarn storybook
```

**System**

```
Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
  Binaries:
    Node: 16.5.0 - /tmp/xfs-21230825/node
    Yarn: 2.4.2 - /tmp/xfs-21230825/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.5.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 90.0
```