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
Kizbo
All 31 comments
I just got a similar set of error messages trying to run storybook on a new react app!
*note: I used yarn to install and run rather than npm.
2rod
on 18 Apr 2018
Is this a valid file?
C:\xampp\htdocs\react\stories\index.js
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
might be a windows problem and how the directories use \ instead of /?
danielduan
on 18 Apr 2018
I'm using yarn too
i have index.js autogenerated by storybook inside src\stories
Kizbo
on 19 Apr 2018
How does your .storybook/config.js look like?
Hypnosphi
on 20 Apr 2018
Thank you for responding
Here is my config.js:
import { configure } from '@storybook/react';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
I've got the same problem, any news?
dlamoureux
on 23 Apr 2018
I run my project on another pc, so my guess is that my global dependencies are old or broken. My shot is on babel or webpack version, but i haven't tested that.
Kizbo
on 23 Apr 2018
+1
asktosimon
on 25 Apr 2018
same issue here on a Vue project
ERROR in TypeError: compilation.templatesPlugin is not a function
darkylmnx
on 25 Apr 2018
👍1
Same here on a blank storybook install.
DaddyWarbucks
on 26 Apr 2018
Same here, 1+
rajjejosefsson
on 26 Apr 2018
Can anyone please share exact reproduction steps for that, or maybe even a reproduction repo on GitHub?
Hypnosphi
on 26 Apr 2018
My steps :
cd my-vue-projectyarn global add @storybook/cligetstorybookyarn run storybook- error in console with same messages OP had
darkylmnx
on 26 Apr 2018
I could did a fresh CRA install with no modifications and found the error.
create-react-app myApp
cd myApp
getstorybook
yarn run storybook
What does getstorybook -V output for you? Which versions of storybook packages get installed?
Hypnosphi
on 27 Apr 2018
3.4.2 for me, as we said both it was a fresh install, mine was this week.
darkylmnx
on 27 Apr 2018
Still reproducing with 3.4.3? #3453 could change things a bit
Hypnosphi
on 27 Apr 2018
still not working after update to 3.4.3
darkylmnx
on 28 Apr 2018
yarn run v0.27.5
This looks pretty outdated. Can you please upgrade yarn and repeat all the steps?
Hypnosphi
on 28 Apr 2018
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/core/dist/client/manager/index.js
@ multi ./.storybook/addons.js ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js
ERROR in ./node_modules/velocity-react/velocity-component.js
Module not found: Error: Can't resolve 'react-dom' in '\node_modules\velocity-react'
@ ./node_modules/velocity-react/velocity-component.js 59:15-35
@ ./node_modules/velocity-react/index.js
@ ./node_modules/react-treebeard/lib/components/decorators.js
@ ./node_modules/react-treebeard/lib/index.js
@ ./node_modules/react-treebeard/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/components/stories_panel/stories_tree/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/components/stories_panel/index.js
@ ./node_modules/@storybook/ui/dist/modules/ui/containers/stories_panel.js
@ ./node_modules/@storybook/ui/dist/modules/ui/routes.js
@ ./node_modules/@storybook/ui/dist/modules/ui/index.js
@ ./node_modules/@storybook/ui/dist/index.js
@ ./node_modules/@storybook/core/dist/client/manager/index.js
@ multi ./.storybook/addons.js ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js
ERROR in TypeError: compilation.templatesPlugin is not a function
- SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
[Frontend]/[webpack]/lib/SetVarMainTemplatePlugin.js:17:15
- Tapable.js:71 Compilation.apply
[Frontend]/[tapable]/lib/Tapable.js:71:16
- util.js:53 Compilation.deprecated [as apply]
internal/util.js:53:15
- LibraryTemplatePlugin.js:45 compiler.plugin
[Frontend]/[webpack]/lib/LibraryTemplatePlugin.js:45:18
- Hook.js:35 SyncHook.lazyCompileHook [as _call]
[Frontend]/[tapable]/lib/Hook.js:35:21
- Compiler.js:437 Compiler.newCompilation
[Frontend]/[core]/[webpack]/lib/Compiler.js:437:30
- Compiler.js:474 hooks.beforeCompile.callAsync.err
[Frontend]/[core]/[webpack]/lib/Compiler.js:474:29
- Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
[Frontend]/[tapable]/lib/Hook.js:35:21
@Hypnosphi still some errors, though they are not the same as before
位 yarn run storybook
yarn run v1.6.0
$ start-storybook -p 6006
info @storybook/vue v3.4.3
info
=> Loading custom .babelrc
=> Loading custom addons config.
=> Using default webpack setup based on "vue-cli".
webpack built 98c5c92d317093d13d50 in 8907ms
Hash: 98c5c92d317093d13d50
Version: webpack 3.11.0
Time: 8907ms
Asset Size Chunks Chunk Names
static/manager.bundle.js 2.81 MB 0 [emitted] [big] manager
static/preview.bundle.js 1.11 MB 1 [emitted] [big] preview
static/manager.bundle.js.map 3.44 MB 0 [emitted] manager
static/preview.bundle.js.map 1.32 MB 1 [emitted] preview
index.html 1.21 kB [emitted]
iframe.html 839 bytes [emitted]
[37] ./node_modules/global/window.js 232 bytes {0} {1} [built]
[121] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
[197] ./node_modules/@storybook/vue/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
[477] multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {0} [built]
[478] ./.storybook/addons.js 85 bytes {0} [built]
[575] ./node_modules/@storybook/core/dist/client/manager/index.js 423 bytes {0} [built]
[853] multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js 6
es {1} [built]
[854] ./node_modules/@storybook/vue/dist/server/config/globals.js 103 bytes {1} [built]
[855] (webpack)-hot-middleware/client.js?reload=true 7.72 kB {1} [built]
[856] ./node_modules/querystring-es3/index.js 127 bytes {1} [built]
[866] (webpack)-hot-middleware/process-update.js 4.33 kB {1} [built]
[867] ./.storybook/config.js 345 bytes {1} [built]
[868] ./node_modules/core-js/modules/es6.array.for-each.js 404 bytes {1} [built]
[873] ./node_modules/@storybook/vue/dist/client/index.js 773 bytes {1} [built]
[953] ./stories .stories.js$ 183 bytes {1} [built]
+ 940 hidden modules
WARNING in ./stories/index.stories.js
Module build failed: TypeError: \stories\index.stories.js: Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.)
at File.buildCodeFrameError (\node_modules\@babel\core\lib\transformation\file\file.js:241:12)
at Scope.checkBlockScopedCollisions (\node_modules\@babel\traverse\lib\scope\index.js:337:27)
at Scope.registerBinding (\node_modules\@babel\traverse\lib\scope\index.js:521:16)
at Scope.registerDeclaration (\node_modules\@babel\traverse\lib\scope\index.js:440:14)
at Object.BlockScoped (\node_modules\@babel\traverse\lib\scope\index.js:188:28)
at Object.newFn (\node_modules\@babel\traverse\lib\visitors.js:286:17)
at NodePath._call (\node_modules\@babel\traverse\lib\path\context.js:65:18)
at NodePath.call (\node_modules\@babel\traverse\lib\path\context.js:36:14)
at NodePath.visit (\node_modules\@babel\traverse\lib\path\context.js:100:12)
at TraversalContext.visitQueue (\node_modules\@babel\traverse\lib\context.js:144:16)
at TraversalContext.visitMultiple (\node_modules\@babel\traverse\lib\context.js:99:17)
at TraversalContext.visit (\node_modules\@babel\traverse\lib\context.js:183:19)
at Function.traverse.node (\node_modules\@babel\traverse\lib\index.js:106:17)
at NodePath.visit (\node_modules\@babel\traverse\lib\path\context.js:107:18)
at TraversalContext.visitQueue (\node_modules\@babel\traverse\lib\context.js:144:16)
at TraversalContext.visitSingle (\node_modules\@babel\traverse\lib\context.js:104:19)
@ ./stories .stories.js$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js
Child html-webpack-plugin for "iframe.html":
Asset Size Chunks Chunk Names
iframe.html 568 kB 0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/vue/dist/server/iframe.html.ejs 1.23 kB {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 569 kB 0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/vue/dist/server/index.html.ejs 1.7 kB {0} [built]
[1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
info Storybook started on => http://localhost:6006/
info
This is fixed in https://github.com/storybooks/storybook/pull/3409, but the fix did not get into stable release yet. Please try applying the corresponding change to your story
Hypnosphi
on 28 Apr 2018
I'll try this thanks @Hypnosphi
darkylmnx
on 28 Apr 2018
Same issue with my Vue project.
saravanacu
on 30 Apr 2018
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:
- Install latest version of Yarn/Npm (for me it was Yarn 1.6 as for 2018-04-30)
- 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.
Kizbo
on 30 Apr 2018
👍3
Thanks @Kizbo, I change the node version with 8.0+ and re-install webpack, yarn, storybook-cli, and re-create the app again.
It works well!
J28848
on 18 May 2018
I got this error as well. After I update webpack from v3 to v4 (the recent version is v4.20.2), it works.
ryancat
on 30 Sep 2018
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 [email protected]
eightHundreds
on 5 May 2019
👍5
upgrade yarn and updae package
freedyc
on 10 May 2019
For anyone here with the same issue, upgrading to webpack to 4.39.3 fixed it for me.
dabit3
on 8 Sep 2019
❤3
🎉2
Doing 2 things helped me:
- upgrading
html-webpack-pluginto3.2.0(I was on an older2.30.1) as suggested by eightHundreds above - downgrading
babel-loaderto7.1.5as suggested by andyford
Thanks guys 馃憤
mohammadalipak
on 3 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
shilman
路
3Comments
MrOrz
路
3Comments
wahengchang
路
3Comments
tomitrescak
路
3Comments
tlrobinson
路
3Comments
Most helpful comment
For anyone here with the same issue, upgrading to webpack to
4.39.3fixed it for me.