Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compile error - create-react-app with latest storybook #3444

Closed
Kizbo opened this issue Apr 18, 2018 · 31 comments
Closed

Compile error - create-react-app with latest storybook #3444

Kizbo opened this issue Apr 18, 2018 · 31 comments

Comments

@Kizbo
Copy link

Kizbo commented Apr 18, 2018

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

@2rod
Copy link

2rod commented Apr 18, 2018

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.

@danielduan
Copy link
Member

danielduan commented Apr 18, 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 /?

@Kizbo
Copy link
Author

Kizbo commented Apr 19, 2018

I'm using yarn too
i have index.js autogenerated by storybook inside src\stories

@Hypnosphi
Copy link
Member

How does your .storybook/config.js look like?

@Kizbo
Copy link
Author

Kizbo commented Apr 20, 2018

Thank you for responding
Here is my config.js:

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

@dlamoureux
Copy link

I've got the same problem, any news?

@Kizbo
Copy link
Author

Kizbo commented Apr 23, 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.

@andysimanovich
Copy link

+1

@darkylmnx
Copy link

darkylmnx commented Apr 25, 2018

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

@DaddyWarbucks
Copy link

Same here on a blank storybook install.

@rajjejosefsson
Copy link

Same here, 1+

@Hypnosphi
Copy link
Member

Can anyone please share exact reproduction steps for that, or maybe even a reproduction repo on GitHub?

@darkylmnx
Copy link

darkylmnx commented Apr 26, 2018

My steps :

  • cd my-vue-project
  • yarn global add @storybook/cli
  • getstorybook
  • yarn run storybook
  • error in console with same messages OP had

@DaddyWarbucks
Copy link

I could did a fresh CRA install with no modifications and found the error.

create-react-app myApp
cd myApp
getstorybook
yarn run storybook

@Hypnosphi
Copy link
Member

What does getstorybook -V output for you? Which versions of storybook packages get installed?

@darkylmnx
Copy link

3.4.2 for me, as we said both it was a fresh install, mine was this week.

@Hypnosphi
Copy link
Member

Still reproducing with 3.4.3? #3453 could change things a bit

@darkylmnx
Copy link

still not working after update to 3.4.3
image

@Hypnosphi
Copy link
Member

Hypnosphi commented Apr 28, 2018

yarn run v0.27.5

This looks pretty outdated. Can you please upgrade yarn and repeat all the steps?

@darkylmnx
Copy link

darkylmnx commented Apr 28, 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

@darkylmnx
Copy link

@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                                                                                                                                                                                                          

@Hypnosphi
Copy link
Member

This is fixed in #3409, but the fix did not get into stable release yet. Please try applying the corresponding change to your story

@darkylmnx
Copy link

I'll try this thanks @Hypnosphi

@saravanacu
Copy link

saravanacu commented Apr 30, 2018

Same issue with my Vue project.

@Kizbo
Copy link
Author

Kizbo commented Apr 30, 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:

  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.

@Kizbo Kizbo closed this as completed Apr 30, 2018
@J28848
Copy link

J28848 commented May 18, 2018

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!

@ryancat
Copy link

ryancat commented Sep 29, 2018

I got this error as well. After I update webpack from v3 to v4 (the recent version is v4.20.2), it works.

@eightHundreds
Copy link

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]

@freedyc
Copy link

freedyc commented May 10, 2019

upgrade yarn and updae package

@dabit3
Copy link

dabit3 commented Sep 8, 2019

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

@mohammadalipak
Copy link

Doing 2 things helped me:

Thanks guys 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests