Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ESM, Yarn 2, Typescript - Storybook cannot resolve modules when the (mandatory) extension is provided #15633

Open
kosciolek opened this issue Jul 20, 2021 · 3 comments · May be fixed by #27090
Open

ESM, Yarn 2, Typescript - Storybook cannot resolve modules when the (mandatory) extension is provided #15633

kosciolek opened this issue Jul 20, 2021 · 3 comments · May be fixed by #27090
Labels
bug configuration babel / webpack has workaround sev:S3

Comments

@kosciolek
Copy link

kosciolek commented Jul 20, 2021 •
edited

Describe the bug
I've got a project that uses ESM, Yarn 2 and Typescript. Link.

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, also some popular gist describing ESM here). 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

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
@kosciolek kosciolek changed the title ESM, Yarn 2, Typescript - Cannot resolve './index.js' ESM, Yarn 2, Typescript - Storybook cannot resolve modules when the (mandatory) extension is provided Jul 20, 2021
@sr258
Copy link

sr258 commented Jan 28, 2023

@kosciolek I'm having the same problem. Did you find a solution? I currently import my source from the build directory as a workaround.

@kosciolek
Copy link
Author

I didnt @sr258

@ernestostifano
Copy link

ernestostifano commented Nov 8, 2023 •
edited

Hello guys, just encountered this issue today. Add the following to your main file:

    webpackFinal: (config) => {
        if (!config.resolve) {
            config.resolve = {};
        }

        config.resolve.extensionAlias = {
            '.js': ['.js', '.ts', '.jsx', '.tsx']
        };

        return config;
    }

@ernestostifano ernestostifano mentioned this issue Nov 9, 2023
Closed
@ernestostifano ernestostifano mentioned this issue Nov 21, 2023
Closed
8 tasks
@valentinpalkovic valentinpalkovic linked a pull request May 10, 2024 that will close this issue
Draft
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug configuration babel / webpack has workaround sev:S3
Projects
None yet
Milestone
No milestone
4 participants
@vanessayuenn @sr258 @ernestostifano @kosciolek