storybook: Compile error - create-react-app with latest storybook

i ?wdm?: Compiling...
webpack building...
 10% building modules 0/1 modules 1 active xampp\htdocs\react\.storybook\config.
 10% building modules 0/2 modules 2 active tdocs\react\node_modules\react\index.
 10% building modules 0/3 modules 3 active s\react\node_modules\react-dom\index.
 10% building modules 1/3 modules 2 active tdocs\react\node_modules\react\index.
 10% building modules 2/3 modules 1 active xampp\htdocs\react\.storybook\config.
 10% building modules 2/4 modules 2 active \react-dom\cjs\react-dom.development.
 10% building modules 2/5 modules 3 active _modules\react\cjs\react.development.
 10% building modules 3/5 modules 2 active \react-dom\cjs\react-dom.development.
 10% building modules 4/5 modules 1 active xampp\htdocs\react\.storybook\config.
 92% after chunk asset optimization SourceMapDevToolPlugin static/manager.bundle
 92% after chunk asset optimization SourceMapDevToolPlugin static/preview.bundle
 92% after chunk asset optimization SourceMapDevToolPlugin view.cfa74f26d4f73c4f
 92% after chunk asset optimization SourceMapDevToolPlugin static/manager.bundle
 92% after chunk asset optimization SourceMapDevToolPlugin static/preview.bundle
 92% after chunk asset optimization SourceMapDevToolPlugin view.cfa74f26d4f73c4f
webpack built 053170718edd8bc857e1 in 995ms
× ?wdm?: Hash: 053170718edd8bc857e1
Version: webpack 4.6.0
Time: 995ms
Built at: 2018-04-18 18:19:31
                                         Asset       Size   Chunks
      Chunk Names
                      static/manager.bundle.js   3.17 MiB  manager  [emitted]  [
big]  manager
                      static/preview.bundle.js    1.6 MiB  preview  [emitted]  [
big]  preview
    preview.cfa74f26d4f73c4ff17f.hot-update.js   11.3 KiB  preview  [emitted]
      preview
          cfa74f26d4f73c4ff17f.hot-update.json   49 bytes           [emitted]

                  static/manager.bundle.js.map   3.25 MiB  manager  [emitted]
      manager
                  static/preview.bundle.js.map   1.62 MiB  preview  [emitted]
      preview
preview.cfa74f26d4f73c4ff17f.hot-update.js.map  799 bytes  preview  [emitted]
      preview
                                    index.html   1.02 KiB           [emitted]

                                   iframe.html   1.02 KiB           [emitted]

Entrypoint manager [big] = static/manager.bundle.js static/manager.bundle.js.map

Entrypoint preview [big] = static/preview.bundle.js preview.cfa74f26d4f73c4ff17f
.hot-update.js static/preview.bundle.js.map preview.cfa74f26d4f73c4ff17f.hot-upd
ate.js.map
[./.storybook/addons.js] 85 bytes {manager}
[./.storybook/config.js] 194 bytes {preview} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 423 bytes {manager
}
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack
)/buildin/module.js 497 bytes {preview} {manager}
[./node_modules/@storybook/react/dist/server/config/globals.js] 105 bytes {previ
ew}
[./node_modules/@storybook/react/dist/server/config/polyfills.js] 113 bytes {pre
view} {manager}
[./node_modules/airbnb-js-shims/index.js] 40 bytes {preview} {manager}
[./node_modules/core-js/es6/symbol.js] 131 bytes {preview} {manager}
[./node_modules/core-js/fn/array/iterator.js] 107 bytes {preview} {manager}
[0] multi ./.storybook/addons.js ./node_modules/@storybook/react/dist/server/con
fig/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js 52
bytes {manager}
[1] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node
_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-h
ot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {preview}
[./node_modules/global/window.js] 232 bytes {preview} {manager}
[./node_modules/strip-ansi/index.js] 161 bytes {preview}
[./node_modules/webpack-hot-middleware/client-overlay.js] 2.16 KiB {preview}
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.54 KiB {preview}

    + 1079 hidden modules

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve '../stories/index.js' in 'C:\xampp\htdocs
\react\.storybook'
 @ ./.storybook/config.js 4:4-34
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_
modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-ho
t-middleware/client.js?reload=true ./.storybook/config.js

ERROR in   TypeError: compilation.templatesPlugin is not a function

  - SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
    [react]/[react]/[html-webpack-plugin]/[webpack]/lib/SetVarMainTemplatePlugin
    .js:17:15

  - Tapable.js:71 Compilation.apply
    [react]/[tapable]/lib/Tapable.js:71:16

  - util.js:47 Compilation.deprecated [as apply]
    internal/util.js:47:15

  - LibraryTemplatePlugin.js:45 compiler.plugin
    [react]/[react]/[html-webpack-plugin]/[webpack]/lib/LibraryTemplatePlugin.js
    :45:18


  - Hook.js:35 SyncHook.lazyCompileHook [as _call]
    [react]/[tapable]/lib/Hook.js:35:21

  - Compiler.js:437 Compiler.newCompilation
    [react]/[core]/[webpack]/lib/Compiler.js:437:30

  - Compiler.js:474 hooks.beforeCompile.callAsync.err
    [react]/[core]/[webpack]/lib/Compiler.js:474:29


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [react]/[tapable]/lib/Hook.js:35:21



ERROR in   TypeError: compilation.templatesPlugin is not a function

  - SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
    [react]/[react]/[html-webpack-plugin]/[webpack]/lib/SetVarMainTemplatePlugin
    .js:17:15

  - Tapable.js:71 Compilation.apply
    [react]/[tapable]/lib/Tapable.js:71:16

  - util.js:47 Compilation.deprecated [as apply]
    internal/util.js:47:15

  - LibraryTemplatePlugin.js:45 compiler.plugin
    [react]/[react]/[html-webpack-plugin]/[webpack]/lib/LibraryTemplatePlugin.js
    :45:18


  - Hook.js:35 SyncHook.lazyCompileHook [as _call]
    [react]/[tapable]/lib/Hook.js:35:21

  - Compiler.js:437 Compiler.newCompilation
    [react]/[core]/[webpack]/lib/Compiler.js:437:30

  - Compiler.js:474 hooks.beforeCompile.callAsync.err
    [react]/[core]/[webpack]/lib/Compiler.js:474:29


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [react]/[tapable]/lib/Hook.js:35:21


i ?wdm?: Failed to compile.

Running react 16.3.2 with latest create-react-app

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 31 (7 by maintainers)

Most upvoted comments

For anyone here with the same issue, upgrading to webpack to 4.39.3 fixed it for me.

+5
dabit3 on Sep 8, 2019

Share my experience

My project use webpack 2 and storybook 5

I got TypeError: compilation.templatesPlugin is not a function when i npm run storybook The reason is that webpack2 is used at startup.

After comparing another project(work well)

I solved this problem by installing html-webpack-plugin@3.2

+5
eightHundreds on May 5, 2019

Hi guys.

I dug a little inside my Yarn directory, and here is answer for me, at least, hope someone else will find it too in here:

  1. Install latest version of Yarn/Npm (for me it was Yarn 1.6 as for 2018-04-30)
  2. Install inside your directory latest webpack (important) . This what caused my error, as for my webpack version (installed by create-react-app) did not have methods that storybook required.

Hope i helped.

+3
Kizbo on Apr 30, 2018

same issue here on a Vue project ERROR in TypeError: compilation.templatesPlugin is not a function

+1
darkylmnx on Apr 25, 2018
Read more comments on GitHub
← storybook: Cant use enum's in template
storybook: Component is not re-rendered when its iternal state is updated. →