search

atlassian-labs / storybook-addon-performance

🚧 A storybook addon to help better understand and debug performance for React components.
https://storybook-addon-performance.netlify.com
Other
652 stars 32 forks source link

Issue with version 0.17.0 and Storybook 6 and react.js 18 #132

Closed silversonicaxel closed 1 year ago

silversonicaxel commented 1 year ago

With these configuration

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

    "@storybook/addon-a11y": "^6.5.14",
    "@storybook/addon-actions": "^6.5.14",
    "@storybook/addon-essentials": "^6.5.14",
    "@storybook/addon-interactions": "^6.5.14",
    "@storybook/addon-links": "^6.5.14",
    "@storybook/addons": "^6.5.14",
    "@storybook/builder-webpack5": "^6.5.14",
    "@storybook/manager-webpack5": "^6.5.14",
    "@storybook/react": "^6.5.14",
    "@storybook/theming": "^6.5.14",
    "storybook-addon-performance": "^0.17.0",

the error that occurs is the following 

ModuleNotFoundError: Module not found: Error: Can't resolve 'xstate/lib/utils' in '/Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/dist'
Did you mean 'utils.js'?
BREAKING CHANGE: The request 'xstate/lib/utils' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/Compilation.js:2016:28
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:798:13
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:270:22
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:434:22
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:116:11
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:670:25
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:855:8
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:975:5
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/neo-async/async.js:6883:13
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/NormalModuleFactory.js:892:17
    at finishResolved (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:294:11)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:362:25
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at done (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/cache/ResolverCachePlugin.js:271:14)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/cache/ResolverCachePlugin.js:177:36
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/Cache.js:107:20)
    at ItemCacheFacade.store (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/CacheFacade.js:137:15)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/cache/ResolverCachePlugin.js:173:18
    at jobDone (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/FileSystemInfo.js:1995:5)
    at FileSystemInfo.createSnapshot (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/FileSystemInfo.js:2330:3)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/webpack/lib/cache/ResolverCachePlugin.js:157:21
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:88:10
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:57:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/ConditionalPlugin.js:54:9
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/forEachBail.js:16:12
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:88:10
    at /Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/lib/Resolver.js:434:24
    at eval (eval at create (/Users/MYUSER/Dev/MYAPPLICATION/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
resolve 'xstate/lib/utils' in '/Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/dist'
  Parsed request is a module
  using description file: /Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/dist/node_modules doesn't exist or is not a directory
      looking for modules in /Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/node_modules
        /Users/MYUSER/Dev/MYAPPLICATION/node_modules/storybook-addon-performance/node_modules/xstate doesn't exist
      /Users/MYUSER/Dev/MYAPPLICATION/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/MYUSER/Dev/MYAPPLICATION/node_modules
        existing directory /Users/MYUSER/Dev/MYAPPLICATION/node_modules/xstate
          using description file: /Users/MYUSER/Dev/MYAPPLICATION/node_modules/xstate/package.json (relative path: .)
            using description file: /Users/MYUSER/Dev/MYAPPLICATION/node_modules/xstate/package.json (relative path: ./lib/utils)
              Field 'browser' doesn't contain a valid alias configuration
              /Users/MYUSER/Dev/MYAPPLICATION/node_modules/xstate/lib/utils doesn't exist
      /Users/MYUSER/Dev/node_modules doesn't exist or is not a directory
      /Users/MYUSER/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
silversonicaxel commented 1 year ago

could be related to this? https://github.com/atlassian-labs/storybook-addon-performance/pull/117

DarkPurple141 commented 1 year ago

This is related to #113 which also introduced ESM exports. It appears this is not working correctly with the xstate which should be resolved as xstate/lib/utils.js.

I have a fix on branch.