1

当我尝试在我的 Angular 6 应用程序上运行Storybook时,我收到以下错误消息...

错误

info => Using default webpack setup based on "angular-cli".
 10% building modules 2/2 modules 0 activei 「wdmwebpack built 3460a263406a445baf4d in 15256ms
× 「wdm」: Hash: 3460a263406a445baf4d
Version: webpack 4.19.0
Time: 15256ms
Built at: 2018-09-14 23:38:13
                       Asset       Size   Chunks                    Chunk Names
     static/iframe.bundle.js   4.12 MiB   iframe  [emitted]  [big]  iframe
    static/manager.bundle.js   3.03 MiB  manager  [emitted]  [big]  manager
                 iframe.html   2.26 KiB           [emitted]
                  index.html  859 bytes           [emitted]
 static/iframe.bundle.js.map   4.14 MiB   iframe  [emitted]         iframe
static/manager.bundle.js.map   3.21 MiB  manager  [emitted]         manager
                 favicon.ico    5.3 KiB           [emitted]
Entrypoint iframe [big] = static/iframe.bundle.js static/iframe.bundle.js.map
Entrypoint manager [big] = static/manager.bundle.js static/manager.bundle.js.map
[./.storybook/addons.js] 127 bytes {manager} [built]
[./.storybook/config.js] 308 bytes {iframe} [built]
[./node_modules/@storybook/addon-links/register.js] 38 bytes {manager} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 366 bytes {manager} [built]
[./node_modules/@storybook/core/dist/server/config/globals.js] 93 bytes {iframe} [built]
[./node_modules/@storybook/core/dist/server/config/polyfills.js] 113 bytes {iframe} {manager} [built] 
.
.
.
.
    + 1076 hidden modules

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/@storybook/core/node_modules/style-loader!./node_modules/css-loader??ref--17-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??postcss!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../node_modules/css-loader/index.js??ref--17-1!../node_modules/@storybook/core/node_modules/postcss-loader/src/index.js??postcss!./styles.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ ./src/styles.css 2:14-325 21:1-42:3 22:19-330
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.css
i 「wdm」: Failed to compile.

包.json

  "scripts": {
    .
    .
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addon-notes": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/angular": "^4.0.0-alpha.16",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.2",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "webpack": "^4.19.0"
  }

回购链接: https ://bitbucket.org/ross2711/storybook-ng-app/src

**UPDATE:**
new error message after I installed Storybook @4.0.0-alpha.16, babel-core and babel-loader.
Bitbucket repo updated
4

2 回答 2

0

故事书有bug。我们正在使用 "@storybook/angular": "4.0.0-alpha.16" 代替。

于 2018-09-14T21:00:48.247 回答
0

您应该将 Storybook 升级到具有更好的多框架支持的 5.x 版本。

于 2019-11-24T15:41:23.953 回答