Roots Discourse

Resources > Assets > Images TypeError: compilation.fileDependencies.has is not a function (copy-globs-webpack-plugin) yarn not working

Whenever I add an image into

Resources > Assets > Images folder I get an error and browser sync / webpack stops working.

If I remove the image from the folder it starts working again.

I am not sure where to start to debug this one, any help?

Thanks,

/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/copy-globs-webpack-plugin/index.js:208
        Object.keys(this.files).filter(absoluteFrom => !compilation.fileDependencies.has(absoluteFrom)).forEach(absoluteFrom => compilation.fileDependencies.add(absoluteFrom));
                                                                                     ^

TypeError: compilation.fileDependencies.has is not a function
    at Object.keys.filter.absoluteFrom (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/copy-globs-webpack-plugin/index.js:208:86)
    at Array.filter (<anonymous>)
    at module.exports.afterEmitHandler (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/copy-globs-webpack-plugin/index.js:208:33)
    at Compiler.applyPluginsAsyncSeries1 (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/lib/Compiler.js:361:9)
    at require.forEach.err (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/lib/Compiler.js:350:15)
    at /Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/node_modules/async/dist/async.js:1064:13)
    at /Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/node_modules/async/dist/async.js:969:16
    at MemoryFileSystem.writeFile (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
    at writeOut (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/webpack/lib/Compiler.js:339:28)
    at Immediate._onImmediate (/Users/xxxxx/Code/xxxxx/wp-content/themes/xxxxx/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)
error Command failed with exit code 1.
  • Does this happen with a specific image, or with any image?
  • Does this only happen while yarn start is active? i.e. does it work when you run yarn build?

This happens with all images, I tried in another installation and it works fine.

This happens in both yarn start and yarn build

Notes:

  • I rolled back to node@8 from node@11 and it still happens.
  • Have you tried removing node_modules and reinstalling your dependencies?
  • Is this project folder in a filesystem location where there might be symlinks, junctions, etc (anything that messes with the filesystem)?
  • Have you tried removing node_modules and reinstalling your dependencies?

I have done the following:

  • Removed the node_modules file
  • Removed packages-lock.json
  • Is this project folder in a filesystem location where there might be symlinks, junctions, etc (anything that messes with the filesystem)?

There are no symlinks, the project is a vanilla install of roots sage.

Solved/Workaround:

The issue is with the "copy-globs-webpack-plugin: ^0.3.0"

I rolled back to version 0.2.0 in the package.json file and everything works now.

7 Likes

Thank you for sharing your solution! I created an account to let you know that you saved my day.

1 Like

Glad it helped you out!

Helped out now as well Added an Unsplash image https://unsplash.com/photos/li0iC0rjvvg and it just would not work with Sage 9 setup as I have it (4 months ago since I updated to last version…). Downgrading to

    "copy-globs-webpack-plugin": "^0.2.0",

helped!