Storybook: 웹팩 4 지원?

Storybook은 webpack을 직접 종속성으로 사용합니다. 따라서 해당 버전을 사용자 측에서 교체할 수 없습니다. 대신 저장소를 분기하고 해당 패키지를 베타 버전으로 업데이트할 수 있습니다. 일이 잘되면 안정화되는 대로 업그레이드를 할 수 있을 것입니다.

아직 하고 있는 사람이 있나요?

그렇게 하면 스토리북의 획기적인 변화가 될 것입니다. 문제는 사용자 정의 웹팩 구성에 플러그인이 포함될 수 있고 웹팩 4를 대상으로 하는 플러그인이 대부분의 경우(항상 그런 것은 아니지만) 웹팩 3과 역호환되지 않는다는 것입니다.

정말 감사합니다!

현재 스토리북이 명시적으로 webpack==3.11.0 를 요구하고 node_modules 서브디렉토리에 Webpack 3의 개인 사본을 가져오지만 dotenv-webpack 도 필요하기 때문에 현재 문제가 있습니다.

이제 dotenv-webpack 는 webpack==^1 || ^2 || ^3 || ^4 의 피어 종속성을 나열하므로 npm 는 다음 대신 Webpack 4 옆에 있는 기본 node_modules 에 설치하는 것이 좋습니다. @storybook/react/node_modules 아래의 Webpack 3으로.

이제 스토리북이 dotenv-webpack 를 로드하자마자 차례로 Webpack 4가 호출됩니다.

위의 내용이 npm 의 버그로 인해 발생했다고 생각합니다. https://github.com/npm/npm/issues/19944

현재 저희 쪽에서 마이그레이션을 차단하는 체크리스트가 https://github.com/storybooks/storybook/pull/3148 로 이동했습니다.

Webpack 4를 사용하는 프로젝트에서 Storybook을 실행할 때 아래 오류가 발생합니다.

node_modules/webpack/lib/DefinePlugin.js:42
        compiler.hooks.compilation.tap(
                       ^

TypeError: Cannot read property 'compilation' of undefined

이것은 Webpack 4를 진행하는 것을 방해합니다.

https://github.com/storybooks/storybook/pull/3148 업데이트를 구독할 수 있습니다.

@TomFoyster 나도 같은 문제가 있었는데 npm install yarn 를 사용하여 임시로 해결했습니다. 제 경우에는 해결될 것 같습니다.

v4.0.0-alpha.0 로 출시됨

@Hypnosphi v4.0.0-alpha.0 로 업데이트한 후 내 스토리북 컴파일이 중단되고 compat 플러그인에서 멈춥니다. 95%를 넘지 않습니다.

⚡️ frontend@feature/data-integration ~ npm run storybook

> [email protected] storybook /Users/will/projects/frontend
> start-storybook -p 6006 -s ./assets

info @storybook/react v4.0.0-alpha.0
info
info => Loading static files from: /Users/will/projects/frontend/assets .
info => Loading custom .babelrc
info => Loading custom webpack config (extending mode).
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
(node:85321) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 95% emitting unnamed compat plugin

알파 빌드로 업그레이드하기 전에 @TomFoyster 문제가 발생했습니다.

npm yarn 를 사용하여 지금 컴파일할 수 있지만 최신 빌드로 문제가 해결되지 않은 것 같습니다.

v4.0.0-alpha.0 이 손상되었습니다. 이후 알파를 사용하세요(예: v4.0.0-alpha.3 ).

rm -rf node_modules 하고 yarn install 를 사용하십시오. storybook v3.4.1 및 webpack v4.6.0 와 함께 작동

특히 yarn은 스토리북 종속성을 별도로 설치하여 문제를 해결합니다.

v4.0.0-alpha.3 도 시도했지만 @storybook/[email protected] 가 작동하지 않는 것 같습니다.

@ankibalyan 어떤 오류가 발생합니까? 이 애드온은 공식 예제 에서 제대로 작동하는 것 같습니다.

@danmakenoise 의 솔루션은 저에게 효과적이며 npm 대신 원사를 사용하는 것이 좋은 것 같습니다.

참고로 다른 사람이 yarn npm 로 설치하려고 하면 v4.0.0-alpha.3 가 지금 작동하는 것 같습니다 👍

4.6.0 및 원사 작업 공간에서 TomFoyster와 동일한 오류 발생

@AlastairTaft 귀하의 경우 어떤 스토리북 버전입니까?

죄송합니다. 저는 Story 책에 없습니다. 이것이 오류에 대한 유일한 Google 조회수였습니다.

업데이트: 제 경우에는 콘솔에서 webpack 를 실행할 때 TomFoyster의 오류가 발생했습니다. 대신 npx webpack 를 실행하면 해결됩니다.

yarn 가 이것에 대한 종속성이라는 것은 아주 어리석은 일입니다.

편집: npm i -g @storybook/cli@alpha 이 이 문제를 수정합니다 👍

@storybook/cli@alpha 및 @storybook/react@alpha (React를 사용하는 경우)를 사용하는 것이 스토리북 로드 문제를 해결하는 데 도움이 되는지 확인합니다.

@Hypnosphi v4.0.0-alpha.3 webpack ^4.8.1 $ 와 함께 사용하려고 합니다.
아래에 언급된 오류가 발생합니다.
Error: Cannot find module '@storybook/react/dist/server/config/defaults/webpack.config.js'
어떤 포인터?

@anujparikh 내가 틀릴 수 있지만 지금은 다음으로 대체되었다고 생각합니다.

const { createDefaultWebpackConfig } 
 = require('@storybook/core/dist/server/config/defaults/webpack.config.js');

@storybook/react는 이제 @storybook/core 때문에 더 이상 사용되지 않습니까? @pollen8

Storybook용 Webpack 구성에서 webpack.DefinePlugin() 를 사용하려고 할 때 @TomFoyster가 https://github.com/storybooks/storybook/issues/3044#issuecomment -371071093 에서 언급한 것과 동일한 문제가 발생했지만 v4.0.0-alpha.14 로 업그레이드할 때 해결할 수 없었던 많은 새로운 문제.

다소 못생긴 해결책은 Webpack 4 종속성 대신 .storybook/webpack.config.js 에 Storybook의 Webpack 3 종속성을 요구하는 것이었습니다.

// .storybook/webpack.config.js

const webpack = require('webpack');
// ^ Causes the TypeError: Cannot read property 'compilation' of undefined

const webpack = require('../node_modules/@storybook/core/node_modules/webpack');
// ^ Works (for us...)

@hanshenrik -- 완전한 webpack.config.js 파일의 예를 보여 주시겠습니까? 귀하의 라인이 내 구성에 어떻게 맞는지 잘 모르겠습니다.

const path = require("path");

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test:  /\.(ts|tsx)$/,
    use: [
      require.resolve("awesome-typescript-loader"),
      require.resolve("react-docgen-typescript-loader"),
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "style-loader", "css-loader", "sass-loader"
    ]
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

@adyz 그래!

const path = require('path');
const webpack = require('../node_modules/@storybook/core/node_modules/webpack');

module.exports = {
  module: {
    rules: [
      // ...
    ],
  },

  plugins: [
    new webpack.DefinePlugin({ // <-- Uses DefinePlugin from the imported webpack library
      HELLO: 'world',
    }),
  ],

  resolve: {
    // ...
  },
};

하지만 webpack 라이브러리의 플러그인을 사용해야 하는 경우에만 필요합니다. 우리는 DefinePlugin 을 사용하기 위해 필요했습니다.

DefinePlugin과 관련하여 동일한 문제가 발생하고 있지만 내 .storybook/webpack.config.js 파일에는 DefinePlugin에 대한 참조가 전혀 없으며 해당 참조는 내 주 프로젝트의 webpack.config.js에만 있습니다. Storybook이 .storybook 폴더 안에 자체 파일이 있을 때 메인 파일에 액세스하는 이유가 확실하지 않습니다.

@storybook/ react@alpha 패키지로 업그레이드를 시도했는데 서버를 시작하려고 할 때 다른 문제의 방대한 목록이 표시됩니다. 더 흥미로운 것 중 하나:

ERROR in ./node_modules/@company/styled-theme/build/index.js Module build failed (from ../node_modules/babel-loader/lib/index.js): TypeError: Plugin 2 specified in "C:\\sources\\demoapp\\node_modules\\@company\\styled-theme\\.babelrc" was expected to return a function but returned "undefined" at Function.normalisePlugin (C:\sources\demoapp\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:15)

동일한 프로젝트를 Yarn으로 교체하면 모든 것이 문제 없이 작동함을 확인했습니다.

이 수정 사항을 Vue-CLI 3 프로젝트에 적용하는 방법은 무엇입니까?

@davek1979 npm install @storybook/vue@alpha 이 트릭을 수행합니다!

어제 Yarn 수정 사항을 다시 확인한 다음 node_modules 폴더를 지우고 npm install 시도했습니다. DefinePlugin에 대한 오류가 반환되었습니다. 내 node_modules 폴더를 다시 지우고 버전을 @storybook/ react@alpha 로 변경한 다음 npm install 다시 작성했습니다. 그것은 트릭을 수행합니다. 저에게 효과가 있었던 것 같은 알파 버전은 v4.0.0-alpha.16이었습니다.

기본 구성을 직접 필요로 하는 @anujparikh @pollen8 은 더 이상 사용되지 않습니다. 사용할 때 사용 중지 메시지가 표시되어야 합니다. 올바른 방법은 세 번째 인수를 사용하는 것입니다. https://storybook.js.org/configurations/custom-webpack-config/#full -control-mode--default

@Melocaster no, @storybook/core 는 다양한 프레임워크의 스토리북에서 공유하는 내부 라이브러리입니다. 여전히 @storybook/react 를 사용해야 합니다.

@hanshenrik

v4.0.0-alpha.14로 업그레이드할 때 해결할 수 없었던 많은 새로운 문제에 부딪쳤습니다.

4.0.0-alpha.20 로 다시 시도하고 문제가 있으면 공유해 주시겠습니까?

4.0.0-alpha.20 및 webpack4.10.2 으로 시도하면 DefinePlugin이 작동하지 않습니다.

@nerdmax 재생산 예제를 제공해 주시겠습니까? 우리는 이 플러그인을 직접 사용하며 우리를 위해 작동합니다.

@Hypnosphi 답변 감사합니다. 죄송합니다. 방금 확인했는데 4.0.0-alpha.20 에서 잘 작동합니다. 내 프로젝트는 원사의 작업 공간을 사용하고 있으며 루트 node_module에 스토리북이 설치된 것 같습니다. 해당 폴더를 삭제하고 모든 패키지를 다시 설치하면 작동합니다.

"webpack": "^4.17.2" 로 "@storybook/react": "^4.0.0-alpha.21" 로 업그레이드한 후 이 작업을 수행할 수 있었습니다.

DefinePlugin 문제에도 문제가 있습니다. 나는 운이 없이 위의 권장 알파 수정을 시도했습니다. 저는 이 튜토리얼을 기본적으로 따르고 있습니다: https://www.valentinog.com/blog/react-webpack-babel/ , 나열된 모든 종속성의 최신 버전에서는 잘 작동합니다.

getstorybook 는 잘 작동하지만 npm run storybook 는 다른 많은 사람들이 어떤 형태로든 발생한 것으로 보이는 예외를 throw합니다.

[email protected] 스토리북 C:\work\reactProject\
시작 스토리북 -p 6006

정보 @storybook/react v3.4.11
정보
exec: 치명적: git 저장소(또는 상위 디렉토리)가 아님: .git

exec: 치명적: git 저장소(또는 상위 디렉토리)가 아님: .git

정보 => 사용자 정의 .babelrc 로드 중
info => 사용자 정의 웹팩 구성 로드(확장 모드).
C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93
컴파일러.훅.컴파일.탭(
^^

TypeError: 정의되지 않은 '컴파일' 속성을 읽을 수 없습니다.
DefinePlugin.apply에서 (C:\work\reactProjectnode_moduleswebpack\lib\DefinePlugin.js:93:18)
Compiler.apply에서 (C:\work\reactProject\node_modules\@storybook\corenode_modules\tapable\lib\Tapable.js:375:16)
웹팩에서 (C:\work\reactProjectnode_modules\@storybook\corenode_moduleswebpack\libwebpack.js:33:19)
export.default (C:\work\reactProjectnode_modules\@storybook\core\dist\server\middleware.js:29:40)
buildDev에서 (C:\work\reactProjectnode_modules\@storybook\core\dist\server\build-dev.js:163:36)
개체에서.(C:\work\reactProjectnode_modules\@storybook\react\dist\server\index.js:23:22)
Module._compile에서 (module.js:652:30)
Object.Module._extensions..js에서 (module.js:663:10)
Module.load에서 (module.js:565:32)
tryModuleLoad에서(module.js:505:12)
Function.Module._load에서 (module.js:497:3)
Module.require에서 (module.js:596:17)
필요 시(internal/module.js:11:18)
개체에서.(C:\work\reactProjectnode_modules\@storybook\react\bin\index.js:3:1)
Module._compile에서 (module.js:652:30)
Object.Module._extensions..js에서 (module.js:663:10)
npm 오류! 코드 ELIFECYCLE
npm 오류! 오류 번호 1
npm 오류! [email protected] 스토리북: start-storybook -p 6006
npm 오류! 종료 상태 1
npm 오류!
npm 오류! [email protected] 스토리북 스크립트에서 실패했습니다.
npm 오류! 이것은 아마도 npm의 문제가 아닐 것입니다. 위의 추가 로깅 출력이 있을 수 있습니다.

Storybook을 사용해보고 싶지만 이 경우 html-webpack-plugin을 사용하여 방해를 받은 것 같습니다.

"webpack": "^4.17.2" 로 "@storybook/react": "^4.0.0-alpha.21" 로 업그레이드한 후 이 작업을 수행할 수 있었습니다.

@ridhoq - config.js 및 webpack.config.js 스토리북을 공유할 수 있습니까? 나는 동일한 버전을 가지고 있으며 여전히 아래 오류를 수신하고 있습니다.

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Module../node_modules/@emotion/styled/dist/styled.esm.js (styled.esm.js:1)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object../node_modules/@storybook/components/dist/navigation/MenuLink.js (MenuLink.js:12)

또한 npm 또는 yarn을 사용하고 있습니까?

물론입니다 - https://gist.github.com/ridhoq/bfeb7688994cb8fe25f481671bf4d3b4. 빌드 요구 사항이 다를 수 있으므로 이것이 얼마나 도움이 될지 모르겠습니다. 이 프로젝트에 npm을 사용하고 있습니다.

create-react-app 를 2.0.3 로 업그레이드한 후에도 동일한 문제가 발생했으며 이 문제는 @storybook/react 를 ^4.0.0-alpha.21 로 업그레이드하여 해결되었습니다.

다음(최신) 버전으로 작업 버전 을 만들었습니다.

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

일부 Addon도 추가했습니다. 이 예제가 누군가에게 도움이 되기를 바랍니다.

e../node_modules/@emotion/core/dist/core.browser.esm.js(core.browser.esm.js:15) at __webpack_require__(bootstrap:724) at fn(bootstrap:101) at Module../ node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js(styled-base.browser.esm.js:1) at __webpack_require__(bootstrap:724) at fn(bootstrap:101) at Module. ./node_modules/@emotion/styled/dist/styled.esm.js(styled.esm.js:1) at __webpack_require__(bootstrap:724) at fn(bootstrap:101) at Object../node_modules/@storybook/components

@relaxed-tomato 해결하셨나요? 같은 문제가 있습니다. 감사

다음(최신) 버전으로 작업 버전 을 만들었습니다.

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

일부 Addon도 추가했습니다. 이 예제가 누군가에게 도움이 되기를 바랍니다.

고마워, 그게 나를 위해 트릭을했다. 하지만 babel-core 및 babel-loader 도 설치해야 했습니다.

다음(최신) 버전으로 작업 버전 을 만들었습니다.

"@storybook/react": "4.0.0-alpha.24"
"ts-loader": "5.2.1"
"typescript": "3.1.1"
"webpack": "4.20.2"

일부 Addon도 추가했습니다. 이 예제가 누군가에게 도움이 되기를 바랍니다.

고마워, 그게 나를 위해 트릭을했다. 하지만 babel-core 및 babel-loader 도 설치해야 했습니다.

여기도 마찬가지입니다. 다음 babel 코어 및 로더 버전을 사용해야 했습니다.

"babel-core": "^6.26.3",
"babel-loader": "^7.0.4",

최신 웹팩으로 업그레이드할 때 실수로 이 문제가 발생했습니다. 4.20.2 버전은 잘 작동합니다.

"@babel/cli": "7.1.2", // babel 7
"webpack": "4.20.2", // webpack 4
"@storybook/react": "^3.4.11", // storybook 3

오류도 발생했습니다. 위에서 언급한 대로 webpack 4.20.2를 수동으로 설치하면 현재로서는 트릭을 수행합니다.