search

kickstartDS / storybook-addon-jsonschema

Displays associated JSON Schema documentation using a rich schema explorer interface, and adds a validating JSON Code Editor with semantic auto-complete to interact with your components, and copy configurations with ease.
https://www.kickstartDS.com/docs/integration/storybook/schema
MIT License
12 stars 1 forks source link

Module not found: Error: Can't resolve 'crypto' in ".../node_modules/@kickstartds/json-schema-viewer/dist" #18

Closed its-miller-time closed 9 months ago

its-miller-time commented 1 year ago

When trying to install this add-on to storybook, I am getting this error when running up or building Module not found: Error: Can't resolve 'crypto' in ".../node_modules/@kickstartds/json-schema-viewer/dist"

There were actually several packages but by installing them in my project node_modules I was able to resolve most of them. However, it looks like this one needs to be polyfilled according to webpack

I am using webpack5, i have installed crypto-browserify and my storybook main looks like this:

const path = require('path');
const rootMain = require('../../../.storybook/main');
const toPath = (filePath) => path.join(process.cwd(), filePath);

module.exports = {
  ...rootMain,
  typescript:{
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      }
      // propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  core: {
    ...rootMain.core,
    builder: 'webpack5',
    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
  },

  stories: [
    ...rootMain.stories,
    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
    '../src/app/**/*.stories.mdx',
  ],

  staticDirs: [
    "../src/assets",
    "../src/public"
  ],

  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook', '@kickstartds/storybook-addon-jsonschema'],
  webpackFinal: async (config, { configType }) => {
    console.log('THIS IS THE STORYBOOK WEBPACK FINAL')
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal)
      config = await rootMain.webpackFinal(config, { configType });
    // add your own webpack tweaks if needed

    //added for material-ui theme font
    config.module.rules.push({
      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/'
          }
        }
      ]
    });

    const value = {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          crypto: require.resolve('crypto-browserify')
        },
        alias: {
          ...config.resolve.alias,
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
      },
    };
    console.log('THIS IS THE WEBPACK FINAL VALUE')
    console.log(JSON.stringify(value, null, 2))
    return value
  },
};

The logs show that the fallback is added to the config.

Im wondering 1) Why is this complaining about crypto, i dont even see it in the node modules of the project? 2) Is this something that needs to be resolved in this project or is there a work around that anyone has found?

julrich commented 1 year ago

Interesting. Just quickly double-checked... we're currently using the addon without further webpack / compiler configuration as part of the Storybook setup (no webpackFinal or such).

My guess as to where crypto comes from would be the json-schema-viewer dependency: https://github.com/kickstartDS/storybook-addon-jsonschema/blob/main/package.json#L99

I needed to fork that, to make adjustments in a bunch of places to be able to import some stuff for the addon use: https://github.com/kickstartDS/json-schema-viewer

Do you remember what other dependencies were failing for you? Because you shouldn't have to install anything additionally yourself.

Btw., what Storybook version are you actually on?

its-miller-time commented 1 year ago

Thanks for the quick reply. There were 4 dependency errors in total, logs and package.json dependencies at the bottom

I am using storybook 6 and webpack5.

Entrypoint main [big] 11.9 MiB = runtime~main.manager.bundle.js 14.2 KiB 213.manager.bundle.js 11.9 MiB main.manager.bundle.js 2.24 KiB
5050 modules

ERROR in ./node_modules/@kickstartds/json-schema-viewer/dist/index.js 12:0-32
Module not found: Error: Can't resolve 'path' in '/Users/<UserName>/Documents/Dev/<ApplicationName>/node_modules/@kickstartds/json-schema-viewer/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaView.js 8:0-58 14:249-256 14:300-307
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/Panel.js 9:0-53 16:38-48
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/preset/manager.js 3:0-33 12:12-17

ERROR in ./node_modules/@kickstartds/json-schema-viewer/dist/index.js 13:0-34
Module not found: Error: Can't resolve 'crypto' in '/Users/<UserName>/Documents/Dev/<ApplicationName>/node_modules/@kickstartds/json-schema-viewer/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaView.js 8:0-58 14:249-256 14:300-307
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/Panel.js 9:0-53 16:38-48
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/preset/manager.js 3:0-33 12:12-17

ERROR in ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaEditor.js 15:0-71
Module not found: Error: Can't resolve '@kickstartds/core/lib/storybook/helpers' in '/Users/<UserName>/Documents/Dev/<ApplicationName>/node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components'
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaView.js 11:0-46 20:102-114
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/Panel.js 9:0-53 16:38-48
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/preset/manager.js 3:0-33 12:12-17

ERROR in ./node_modules/decomment/lib/utils.js 4:11-24
Module not found: Error: Can't resolve 'os' in '/Users/<UserName>/Documents/Dev/<ApplicationName>/node_modules/decomment/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }
 @ ./node_modules/decomment/lib/index.js 4:14-32
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaEditor.js 17:0-34 40:33-42
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/components/SchemaView.js 11:0-46 20:102-114
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/Panel.js 9:0-53 16:38-48
 @ ./node_modules/@kickstartds/storybook-addon-jsonschema/dist/esm/preset/manager.js 3:0-33 12:12-17

4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

package.json dependancies

"dependencies": {
    "@azure/msal-browser": "^2.24.0",
    "@azure/msal-react": "^1.4.0",
    "@elastic/apm-rum": "5.11.1",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@kickstartds/core": "^1.5.0",
    "@kickstartds/storybook-addon-jsonschema": "^1.0.5",
    "@microsoft/microsoft-graph-client": "^3.0.2",
    "@mui/icons-material": "^5.8.0",
    "@mui/lab": "^5.0.0-alpha.75",
    "@mui/material": "5.8.1",
    "@mui/styled-engine-sc": "^5.8.0",
    "@mui/styles": "5.8.0",
    "@mui/system": "5.8.1",
    "@mui/x-data-grid": "5.11.1",
    "@reduxjs/toolkit": "^1.8.1",
    "@ts-morph/bootstrap": "^0.16.0",
    "ag-grid-community": "27.3.0",
    "ag-grid-enterprise": "27.3.0",
    "ag-grid-react": "27.3.0",
    "apexcharts": "^3.35.0",
    "axios": "0.27.2",
    "clsx": "^1.1.1",
    "core-js": "3.22.6",
    "crypto-browserify": "^3.12.0",
    "date-fns": "^2.28.0",
    "flexlayout-react": "0.7.3",
    "formik": "^2.2.9",
    "fuse.js": "6.6.2",
    "global": "^4.4.0",
    "graphql-request": "^4.2.0",
    "i18next": "21.8.4",
    "i18next-browser-languagedetector": "^6.1.4",
    "i18next-http-backend": "^1.4.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "mdx-embed": "^1.0.0",
    "minimist": "^1.2.6",
    "moment": "^2.29.2",
    "notistack": "2.0.3",
    "os": "^0.1.2",
    "os-browserify": "^0.3.0",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "react": "18.1.0",
    "react-apexcharts": "^1.4.0",
    "react-dom": "18.1.0",
    "react-error-boundary": "^3.1.4",
    "react-flags-select": "2.2.3",
    "react-ga": "^3.3.0",
    "react-helmet-async": "1.3.0",
    "react-i18next": "11.16.9",
    "react-query": "3.39.0",
    "react-recipes": "^1.4.0",
    "react-redux": "8.0.2",
    "react-router-dom": "6.3.0",
    "react-syntax-highlighter": "^15.5.0",
    "react-use": "^17.3.2",
    "regenerator-runtime": "0.13.9",
    "tslib": "2.4.0",
    "typescript-json-schema": "^0.54.0",
    "urlcat": "^2.0.4",
    "victory": "36.4.0",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/preset-typescript": "^7.17.12",
    "@craco/craco": "^6.4.3",
    "@formatjs/cli": "^4.8.4",
    "@jscutlery/semver": "^2.23.3",
    "@mswjs/data": "^0.10.0",
    "@nrwl/cli": "13.10.3",
    "@nrwl/cypress": "13.10.3",
    "@nrwl/devkit": "13.10.3",
    "@nrwl/eslint-plugin-nx": "13.10.3",
    "@nrwl/jest": "13.10.3",
    "@nrwl/js": "13.10.3",
    "@nrwl/linter": "13.10.3",
    "@nrwl/nx-plugin": "13.10.3",
    "@nrwl/react": "13.10.3",
    "@nrwl/storybook": "13.10.3",
    "@nrwl/web": "13.10.3",
    "@nrwl/workspace": "13.10.3",
    "@storybook/addon-actions": "^6.5.3",
    "@storybook/addon-docs": "^6.5.3",
    "@storybook/addon-essentials": "^6.5.3",
    "@storybook/addon-interactions": "^6.5.3",
    "@storybook/addon-jest": "^6.5.3",
    "@storybook/addon-links": "^6.5.3",
    "@storybook/addon-storyshots": "^6.5.3",
    "@storybook/builder-webpack5": "^6.5.3",
    "@storybook/manager-webpack5": "^6.5.3",
    "@storybook/node-logger": "^6.5.3",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.5.3",
    "@storybook/testing-library": "^0.0.11",
    "@storybook/testing-react": "^1.3.0",
    "@svgr/webpack": "^6.2.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "13.2.0",
    "@testing-library/react-hooks": "8.0.0",
    "@testing-library/user-event": "14.2.0",
    "@types/jest": "27.5.1",
    "@types/node": "^18.0.1",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "@typescript-eslint/eslint-plugin": "5.26.0",
    "@typescript-eslint/parser": "5.26.0",
    "alasql": "^1.7.3",
    "babel-jest": "28.1.0",
    "babel-loader": "^8.2.5",
    "cypress": "^9.6.0",
    "eslint": "8.16.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-config-react-app": "7.0.1",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-react": "7.30.0",
    "eslint-plugin-react-hooks": "4.5.0",
    "http-server": "^14.1.0",
    "jest": "28.1.0",
    "jest-environment-jsdom": "^28.1.0",
    "jest-watch-typeahead": "1.1.0",
    "mocker-data-generator": "^2.12.0",
    "msw": "0.41.0",
    "msw-storybook-addon": "^1.6.3",
    "ngx-deploy-npm": "3.1.9",
    "npm-run-all": "^4.1.5",
    "nx": "13.10.3",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.6.2",
    "react-scripts": "5.0.1",
    "react-test-renderer": "18.1.0",
    "storybook-addon-material-ui5": "^1.0.0",
    "ts-jest": "28.0.2",
    "typedoc": "^0.22.15",
    "typescript": "^4.7.4",
    "url-loader": "^4.1.1"
  },
julrich commented 1 year ago

Thanks for the detailed input! Will have a look, pretty sure it's something to do with the Webpack 4 -> 5 transition. I believe our projects still use Webpack 4 for Storybook itself (we're not using Webpack ourselves, otherwise).

its-miller-time commented 1 year ago

Thank you! My assumption was the webpack4 to 5 as well. If i can help please let me know. I can pull down the repo and try a fix if needed, just wanted to check in before taking that step. I find it odd that the I am seemingly unable to alias/fallback to the necessary dependencies in webpack more than anything else. I wouldnt think that being nested inside this project would be an issue, but perhaps it needs to be resolved in the build by customizing the webpack in your build here? Just spitballing as this one is a bit of a head-scratcher

its-miller-time commented 1 year ago

Wrong button click apologies!

dwfee commented 1 year ago

Any news on this topic? I'm running storybook within nx with react 18.2 and I really would like to integrate this addon!

RedaHamouche commented 1 year ago

Me too ! Any news on this topic? I'm running storybook within nx with react 18.2 and I really would like to integrate this addon! +1

julrich commented 1 year ago

Oh snap... totally lost sight of this one. Sorry!

We're actually in the process of updating the plugin to Storybook 7, which includes updating all dependencies (which also means our fork of json-schema-viewer that's the culprit for all those packaging / transpilation problems.

It was working with Storybook before (at least for us) because of their Webpack 4 config doing some of the heavy lifting / shimming. This is not the way to do it for Storybook 7, though, because we can make even less assumptions of the builder config of Storybook instances consuming this addon.

I think we should be able to push a fix for this in the next 2-3 weeks (we're launching a small tool on tuesday, and will focus on the Storybook 7 migration after that: https://www.producthunt.com/products/kickstartds).

As we'll change to Vite / esbuild with that, it will be a mandatory fix for us anyways!

RedaHamouche commented 1 year ago

Thank you very much for your answer julrich !

julrich commented 1 year ago

Thanks for your patience! Now that our release is out of the door, I should find some time to get to this! :)

Shameless plug ("the release"): Design System Concierge: https://www.kickstartds.com/concierge/ Launch Blog Post: https://www.kickstartds.com/blog/launching-the-design-system-concierge/

If you like, you can support our launch on Product Hunt today here: https://www.producthunt.com/posts/design-system-concierge

julrich commented 1 year ago

You can also track the progress here:

RedaHamouche commented 1 year ago

Hey thank you for the update ! What you do is amazing. My dream goal is to have my hosted storybook linked with figma and his jsonSchema. That's why i wanna use your jsonschema addon.