search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.03k stars 9.24k forks source link

Buffer is not defined, 99% done loading #17344

Closed 0xmovses closed 2 years ago

0xmovses commented 2 years ago

Describe the bug when running story book the builder stops at 99% and in broswer console I have the error ReferenceError: Buffer is not defined

storybook version 6.4.14 nextjs version 12.0.8

Some stories load, but any with this error do not. My guess is I need to set the buffer to something in weback 5 config

The full error is:

Unexpected error while loading ./Dashboard/Carousel/Carousel.stories.tsx: Buffer is not defined
 ReferenceError: Buffer is not defined
    at Object.../../node_modules/@onflow/sdk/dist/sdk.module.js

my main.js 

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  staticDirs: ['../public'],
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@storybook/preset-scss',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    return {
      ...config,
      resolve: {
        plugins: [
          new TsconfigPathsPlugin({
            configFile: path.resolve(__dirname, '../tsconfig.json'),
          }),
        ],
        ...config.resolve,
        fallback: {
          http: false,
          https: false,
          ...config.resolve.fallback,
        },
      },
    };
  },
};

To Reproduce The repo is public, run yarn, then yarn storybook https://github.com/INFLOWMusic/inflow-app

NB. we are in the process of refactoring stories, some still use the old storiesOf method. This is not causing the issue

System Please paste the results of npx sb@next info here.

Environment Info:

System: OS: macOS 11.3.1 CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Browsers: Chrome: 97.0.4692.99 Firefox: 96.0.2 Safari: 14.1 npmPackages: @storybook/addon-actions: ^6.4.14 => 6.4.14 @storybook/addon-essentials: ^6.4.14 => 6.4.14 @storybook/addon-links: ^6.4.14 => 6.4.14 @storybook/builder-webpack5: ^6.4.14 => 6.4.14 @storybook/manager-webpack5: ^6.4.14 => 6.4.14 @storybook/preset-scss: ^1.0.3 => 1.0.3 @storybook/react: ^6.4.14 => 6.4.14

Additional context

our package.json

{
  "name": "0.2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "prepare": "husky install"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@onflow/fcl": "^0.0.77",
    "@onflow/types": "^0.0.6",
    "@ramp-network/ramp-instant-sdk": "^3.0.0",
    "@reduxjs/toolkit": "^1.6.2",
    "@sendgrid/mail": "^7.6.0",
    "@types/bcryptjs": "^2.4.2",
    "@types/formidable": "^1.2.4",
    "@types/micro": "^7.3.6",
    "@types/multer": "^1.4.7",
    "@types/react-copy-to-clipboard": "^5.0.2",
    "@types/styled-components": "^5.1.15",
    "aws-sdk": "^2.1017.0",
    "axios": "^0.24.0",
    "bcryptjs": "^2.4.3",
    "chart.js": "^3.6.1",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "formidable": "^1.2.2",
    "formik": "^2.2.9",
    "js-cookie": "^3.0.1",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "mongoose": "^6.0.12",
    "next": "12.0.8",
    "next-auth": "^4.1.2",
    "next-connect": "^0.11.0",
    "next-s3-upload": "^0.1.7",
    "node-sass": "^6.0.1",
    "overlayscrollbars-react": "^0.2.3",
    "rc-slider": "^9.7.5",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-copy-to-clipboard": "^5.0.4",
    "react-device-detect": "^2.1.2",
    "react-dom": "17.0.2",
    "react-dropzone": "^11.4.2",
    "react-easy-crop": "^4.0.1",
    "react-full-screen": "^1.1.0",
    "react-player": "^2.9.0",
    "react-redux": "^7.2.6",
    "react-spring": "^9.3.2",
    "react-toastify": "^8.1.0",
    "react-transition-group": "^4.4.2",
    "react-use": "^17.3.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
    "s3-upload-stream": "^1.0.7",
    "styled-components": "^5.3.3",
    "sweetalert2": "^11.3.0",
    "sweetalert2-react-content": "^4.2.0",
    "swiper": "^7.3.1",
    "uuid": "^8.3.2",
    "wavesurfer.js": "^5.2.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.4.14",
    "@storybook/addon-essentials": "^6.4.14",
    "@storybook/addon-links": "^6.4.14",
    "@storybook/builder-webpack5": "^6.4.14",
    "@storybook/manager-webpack5": "^6.4.14",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.4.14",
    "@types/jsonwebtoken": "^8.5.7",
    "@types/lodash": "^4.14.178",
    "@types/node": "16.11.6",
    "@types/react": "17.0.33",
    "@types/react-transition-group": "^4.4.4",
    "@types/uuid": "^8.3.3",
    "@types/wavesurfer.js": "^5.2.2",
    "babel-loader": "^8.2.3",
    "babel-preset-react-app": "^10.0.0",
    "css-loader": "^6.5.1",
    "eslint": "7",
    "eslint-config-next": "12.0.1",
    "eslint-plugin-storybook": "^0.5.6",
    "husky": "^7.0.0",
    "lint-staged": "^12.1.2",
    "prettier": "^2.5.0",
    "sass": "^1.44.0",
    "sass-loader": "^12.3.0",
    "style-loader": "^3.3.1",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
    "typescript": "4.4.4",
    "webpack": "*"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": [
      "yarn eslint",
      "yarn prettier --write"
    ]
  }
}
EvHaus commented 2 years ago

In your webpackFinal config add:

config.plugins.push(
    new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
    })
);
0xmovses commented 2 years ago

@EvHaus thanks for this, where would I import the webpack file from in a nextJS 12 project hmmm

0xmovses commented 2 years ago

fixed by importing const webpack = require("webpack"); Thanks so much.

jozef-drabik commented 1 year ago

I tried the same thing. Did not work for me. Nothing in terminal but when storybook starts i get this image

EvHaus commented 10 months ago

If you're using Vite with Storybook then the solution is this:

// vite.config.ts

// Make sure to npm install this first
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

export default defineConfig({
  ...,
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
        }),
      ],
    },
  },
BoBoooooo commented 1 week ago

I tried same thing, but new error shows:

image