CODEWITHSUNDEEP
create-react-appstorybook
Yan Aung Hein
Yan Aung Hein

Reputation: 31

Storybook Failed in Very First Try in New Create-React-App

I'm a junior front-end, and trying to learn Storybook for work. I just created new react app with create-react-app and run npm start. And it failed just in the screenshot below. npm start failed error

But I just solved it after seeing an answer from stack-overflow just like in the screenshot below. solved error of [email protected]

And I initiated storybook in my new react project with npx sb init just like the documentation says. It is succeed by creating .storybook folder and some example stories under src folder. Then, I run npm run storybook, and so many error appears in the console.

$ npm run storybook

> [email protected] storybook
> start-storybook -p 6006 -s public

info @storybook/react v6.4.9
info
(node:15528) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info Found existing addon "@storybook/addon-docs", skipping.   
info Found existing addon "@storybook/addon-actions", skipping.
info => Serving static files from ./public at /
info => Loading Webpack configuration from `node_modules\react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack4 setup     
10% building 1/1 modules 0 activeWARN Expected '@storybook/addon-docs' (or '@storybook/addon-essentials') to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials') in main Storybook config.
13% building 27/33 modules 6 active D:\311's learning\learn-storybook-5\node_modules\@pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js       
info => Using cached manager
webpack built preview d035dbd78ee6247b1305 in 9381ms
× ｢wdm｣: Hash: d035dbd78ee6247b1305
Version: webpack 4.44.2
Time: 9381ms
Built at: 12/10/2021 3:29:06 PM
                                  Asset      Size        Chunks                                Chunk Names
                     0.iframe.bundle.js   226 KiB             0  [emitted]
                 0.iframe.bundle.js.map   215 KiB             0  [emitted] [dev]
                     1.iframe.bundle.js   206 KiB             1  [emitted]
                 1.iframe.bundle.js.map   145 KiB             1  [emitted] [dev]
                     2.iframe.bundle.js  9.15 KiB             2  [emitted]
                 2.iframe.bundle.js.map  6.47 KiB             2  [emitted] [dev]
                     3.iframe.bundle.js  92.4 KiB             3  [emitted]
                 3.iframe.bundle.js.map  84.3 KiB             3  [emitted] [dev]
                     4.iframe.bundle.js   372 KiB             4  [emitted]              [big]
                 4.iframe.bundle.js.map   412 KiB             4  [emitted] [dev]
                     5.iframe.bundle.js  15.7 KiB             5  [emitted]
                 5.iframe.bundle.js.map  16.6 KiB             5  [emitted] [dev]
                    asset-manifest.json  1.67 KiB                [emitted]
                            iframe.html  11.4 KiB                [emitted]
                  main.iframe.bundle.js   111 KiB          main  [emitted]                     main
              main.iframe.bundle.js.map    43 KiB          main  [emitted] [dev]               main
          runtime~main.iframe.bundle.js  37.9 KiB  runtime~main  [emitted]                     runtime~main
      runtime~main.iframe.bundle.js.map  39.2 KiB  runtime~main  [emitted] [dev]               runtime~main
static/media/code-brackets.2e1112d7.svg  1.42 KiB                [emitted] [immutable]
       static/media/colors.a4bd0486.svg  8.31 KiB                [emitted] [immutable]
     static/media/comments.a3859089.svg  1.49 KiB                [emitted] [immutable]
    static/media/direction.b770f9af.svg  1.25 KiB                [emitted] [immutable]
         static/media/flow.edad2ac1.svg  1.36 KiB                [emitted] [immutable]
       static/media/plugin.d494b228.svg  2.12 KiB                [emitted] [immutable]
         static/media/repo.6d496322.svg   1.6 KiB                [emitted] [immutable]
     static/media/stackalt.dba9fbb3.svg  2.49 KiB                [emitted] [immutable]
          vendors~main.iframe.bundle.js  4.64 MiB  vendors~main  [emitted]              [big]  vendors~main
      vendors~main.iframe.bundle.js.map  4.16 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js 232 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.91 KiB {main} [built] [failed] [1 error]
[./generated-stories-entry.js] 2.95 KiB {main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js] 2.38 KiB {vendors~main} [built]
[./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js] 500 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js] 699 bytes {vendors~main} [built] [failed] [1 error]       
[./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]  
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js] 708 bytes {vendors~main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js] 706 bytes {vendors~main} [built] [failed] [1 error][./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js] 705 bytes {vendors~main} [built] [failed] [1 error] 
[./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js] 702 bytes {vendors~main} [built] [failed] [1 error]    
[./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]  
[./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js] 704 bytes {vendors~main} [built] [failed] [1 error]  
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
    + 1184 hidden modules

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)

   6 |
   7 | /* eslint-disable import/no-unresolved */
>  8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
     |                                                                                                                       ^
   9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
  10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
  11 | Object.keys(config).forEach(function (key) {
    at Object._raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:541:17)
    at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:534:17)
    at Object.raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:495:17)
    at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:3550:10)
    at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:14831:10)
    at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13454:27)
    at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13352:17)
    at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:5307:24)
    at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13941:25)
    at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13932:10)
    at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13272:10)
    at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13263:25)
    at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:6273:28)
    at Object.parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15037:10)
    at parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15089:38)
    at parser (D:\311's learning\learn-storybook-5\node_modules\@babel\core\lib\parser\index.js:52:34)
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[16]

ERROR in ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js 8:118
Module parse failed: Unexpected token (8:118)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js';
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-config-entry.js ./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js main[15]
 
 Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.28 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} 
[built]
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\311's learning\learn-storybook-5\.storybook\preview.js-generated-config-entry.js: Missing semicolon. (8:118)

   6 |
   7 | /* eslint-disable import/no-unresolved */
>  8 | import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
     |                                                                                                                       ^
   9 | import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
  10 | import * as config from 'D:/311's learning/learn-storybook-5/.storybook/preview.js';
  11 | Object.keys(config).forEach(function (key) {
    at Object._raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:541:17)
    at Object.raiseWithData (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:534:17)
    at Object.raise (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:495:17)
    at Object.semicolon (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:3550:10)
    at Object.parseImport (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:14831:10)
    at Object.parseStatementContent (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13454:27)
    at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13352:17)
    at Object.parseStatement (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:5307:24)
    at Object.parseBlockOrModuleBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13941:25)
    at Object.parseBlockBody (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13932:10)
    at Object.parseProgram (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13272:10)
    at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:13263:25)
    at Object.parseTopLevel (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:6273:28)
    at Object.parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15037:10)
    at parse (D:\311's learning\learn-storybook-5\node_modules\@babel\parser\lib\index.js:15089:38)
    at parser (D:\311's learning\learn-storybook-5\node_modules\@babel\core\lib\parser\index.js:52:34)
    at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:316:20
    at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\311's learning\learn-storybook-5\node_modules\babel-loader\lib\index.js:59:103
ModuleParseError: Module parse failed: Unexpected token (8:118)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| /* eslint-disable import/no-unresolved */
> import { addDecorator, addParameters, addLoader, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-api';
| import { logger } from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/client-logger';
| import * as config from 'D:/311's learning/learn-storybook-5/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js';
    at handleParseError (D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:469:19)
    at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\311's learning\learn-storybook-5\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at D:\311's learning\learn-storybook-5\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at D:\311's learning\learn-storybook-5\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
    
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I searched with possible keywords from the error on google and in-and-out stack-overflow links. I installed some addon in .storybook/main.js file. But nothing works. Below are my package.json file and two config file of storybook.

//package.json

{
  "name": "learn-storybook-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.4.9",
    "@storybook/addon-docs": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.4.9",
    "@storybook/node-logger": "^6.4.9",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.4.9"
  }
}

//.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/node-logger',
    '@storybook/addon-docs',
  ],
  framework: '@storybook/react',
}

//.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

It has been two days that I can't even boost up stroybook :)) I hope someone could guide me.

Upvotes: 1

Views: 2686

Answers (1)

Yan Aung Hein
Yan Aung Hein

Reputation: 31

The problem was my folder name 3ll's learning. The single quote from my folder name conflicts with paths used in Stroybook's modules. That's it. Admin from Storybook discord server pointed out that to me.

Upvotes: 2

Related Questions