Upgrading to v2 - Cannot find module 'webpack/lib/removeAndDo'

[bogdancss]

• I followed the v1 to v2 doc

• removed the node-modules folder and the package-lock.json file

• ran npm cache verify then npm install and finally gatsby develop

• and now getting the following error:

error UNHANDLED EXCEPTION

  Error: Cannot find module 'webpack/lib/removeAndDo'

  - v8-compile-cache.js:159 require
    [kaizen-2018]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - ExtractedModule.js:30 Object.<anonymous>
    [kaizen-2018]/[extract-text-webpack-plugin]/ExtractedModule.js:30:42

  - v8-compile-cache.js:178 Module._compile
    [kaizen-2018]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [kaizen-2018]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:7 Object.<anonymous>
    [kaizen-2018]/[extract-text-webpack-plugin]/index.js:7:23

  - v8-compile-cache.js:178 Module._compile
    [kaizen-2018]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [kaizen-2018]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:3 Object.<anonymous>
    [kaizen-2018]/[gatsby-1-config-extract-plugin]/index.js:3:33

  - v8-compile-cache.js:178 Module._compile

[m-allanson]

What does your package.json look like? Do you have a link to the repo?

[bogdancss]

Here's the package file:

  "name": "*",
  "description": "*",
  "version": "1.0.0",
  "author": "*",
  "dependencies": {
    "babel-plugin-styled-components": "^1.5.1",
    "gatsby": "next",
    "gatsby-image": "next",
    "gatsby-link": "^1.6.39",
    "gatsby-plugin-canonical-urls": "^1.0.16",
    "gatsby-plugin-catch-links": "^1.0.19",
    "gatsby-plugin-favicon": "^2.1.1",
    "gatsby-plugin-mailchimp": "^2.2.3",
    "gatsby-plugin-manifest": "^1.0.20",
    "gatsby-plugin-nprogress": "^1.0.14",
    "gatsby-plugin-offline": "^1.0.15",
    "gatsby-plugin-postcss-sass": "^1.0.20",
    "gatsby-plugin-react-helmet": "^2.0.8",
    "gatsby-plugin-react-next": "^1.0.11",
    "gatsby-plugin-sass": "^1.0.25",
    "gatsby-plugin-sharp": "next",
    "gatsby-plugin-sitemap": "^1.2.21",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-plugin-webpack-bundle-analyzer": "^0.1.1",
    "gatsby-source-filesystem": "^1.5.33",
    "gatsby-source-wordpress": "^2.0.81",
    "gatsby-transformer-sharp": "^1.6.23",
    "parallax-js": "^3.1.0",
    "react": "^16.4.0",
    "react-async-script-loader": "^0.3.0",
    "react-burger-menu": "^2.4.2",
    "react-dom": "^16.4.0",
    "react-helmet": "^5.2.0",
    "react-on-visible": "^1.5.0",
    "react-scroll": "^1.7.8",
    "react-slick": "^0.23.1",
    "react-textfit": "^1.1.0",
    "react-transition-group": "^2.3.1",
    "styled-components": "^3.2.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "gatsby-plugin-remove-trailing-slashes": "^1.0.9",
    "prettier": "^1.11.1"
  }
}

Unfortunately, the repo is private and cannot share it. Please let me know what you would like to know as I can provide all the details.

[m-allanson]

Try bumping all your "gatsby-x" dependencies to version next, the same as gatsby and gatsby-image. Note that you'll need to install extra dependencies for some plugins. See https://v2--gatsbyjs.netlify.com/docs/migrating-from-v1-to-v2/#manually-install-plugins-peer-dependencies

[valse]

Hi, I have the same error too: it's maybe something about this migration point? https://v2--gatsbyjs.netlify.com/docs/migrating-from-v1-to-v2/#manually-specify-postcss-plugins because I'm using the "gatsby-plugin-postcss-sass" plugin?

Thanks Marco

[inadeqtfuturs]

Having the same problem.

package.json

  "name": "if-gatsby",
  "description": "if",
  "version": "1.0.1",
  "author": "if",
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/react-fontawesome": "0.0.19",
    "basscss": "^8.0.4",
    "gatsby": "next",
    "gatsby-cli": "next",
    "gatsby-image": "next",
    "gatsby-link": "^1.6.44",
    "gatsby-paginate": "^1.0.16",
    "gatsby-pagination": "^1.2.0",
    "gatsby-plugin-catch-links": "^1.0.24",
    "gatsby-plugin-favicon": "^2.1.1",
    "gatsby-plugin-lodash": "^1.0.11",
    "gatsby-plugin-manifest": "^1.0.27",
    "gatsby-plugin-offline": "^1.0.18",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-plugin-sharp": "next",
    "gatsby-plugin-typography": "^1.7.19",
    "gatsby-remark-copy-linked-files": "^1.5.37",
    "gatsby-remark-images": "^1.5.67",
    "gatsby-remark-relative-images": "^0.1.2",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-transformer-sharp": "^1.6.27",
    "node-sass": "^4.9.0",
    "react": "^16.4.1",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "typography-theme-fairy-gates": "^0.15.11"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@andrew-codes/gatsby-plugin-elasticlunr-search": "^1.0.4",
    "gh-pages": "^1.2.0",
    "prettier": "^1.13.5"
  }
}

Terminal:

success open and validate gatsby-config — 0.017 s
success copy gatsby files — 0.238 s
error UNHANDLED EXCEPTION

  Error: Cannot find module 'webpack/lib/removeAndDo'

  - loader.js:594 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:594:15

  - loader.js:520 Function.Module._load
    internal/modules/cjs/loader.js:520:25
...

[tiendq]

Got same error :(

Followed the migration guide, changed all gatsby-x packages to version next, run yarn install, then yarn develop.

[KyleAMathews]

Make sure to remove any lock files you have before running install again.

[tiendq]

@KyleAMathews I removed all yarn.lock, package-lock.json, node_modules before run yarn install. The migration guide doesn't say much about plugins, should I change all plugins version to next? what if gatsby-plugin-react-helmet and gatsby-plugin-react-helmet for example, don't say anything about their next version?

[tiendq]

@m-allanson I believe change all gatsby-x to version next don't fix this issue. How to know what extra dependencies for some plugins are?

"dependencies": {
    "gatsby": "next",
    "gatsby-plugin-google-analytics": "next",
    "gatsby-plugin-postcss-sass": "next",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-react-next": "next",
    "gatsby-plugin-sharp": "next",
    "gatsby-remark-copy-linked-files": "next",
    "gatsby-remark-images": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-transformer-remark": "next",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0"
  },

[anantoghosh]

I believe Gatsby 2 has removed postcss plugins for now. So the plugin gatsby-plugin-postcss-sass is not compatible with Gatsby 2. Currently you can use https://next.gatsbyjs.org/docs/add-custom-webpack-config to define your webpack config to use postcss plugins. More info: https://github.com/gatsbyjs/gatsby/issues/5778#issuecomment-395711865

[valse]

Hi, you're right @anantoghosh, gatsby-plugin-postcss-sass is not available for the v2.

In my case I switched to gatsby-plugin-sass and I installed the gatsby-plugin-lodash plugin too (instead of add it manually in the gatsby-node file config) to solve this error.

Every gatsby-x plugin point to his "next" version and I checked for each of them if install peer dependencies too; for example the gatsby-plugin-styled-components plugin command line is like:

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

you can see three packages:

• gatsby-plugin-styled-components :-P
• styled-components
• babel-plugin-styled-components

[tiendq]

@anantoghosh Yeah, I just checked gatsby-plugin-postcss-sass page and saw an empty page :). Remove this plugin also fixed the issue.

Why are unsupported plugins not listed in the migration documentation? (or supported ones are listed here).

But I got another issue, I moved layout.js to the components folder, so I moved index.css too and now the site loses all styling :)

[anantoghosh]

@tiendq Did you wrap the components which will use the layout? just renaming won't work, layout is not a special thing in v2 it's just like any other component.

[tiendq]

@anantoghosh Yes, I did. I modified layout.js and relocated it as instructed. Attached image is my current code, I think it's correct. Page layout/content is correct, just no styling.

[chaseadamsio]

I think the solution is buried here:

Try bumping all your "gatsby-x" dependencies to version next, the same as gatsby and gatsby-image. Note that you'll need to install extra dependencies for some plugins. See https://v2--gatsbyjs.netlify.com/docs/migrating-from-v1-to-v2/#manually-install-plugins-peer-dependencies

@m-allanson's suggestion to bump *anything that matches the pattern /gatsby-/ to => "next"** fixed this for me. As an example, my v1 package.json deps looked like this:

   "gatsby-plugin-google-analytics": "^1.0.31",
    "gatsby-plugin-canonical-urls": "^1.0.18",
    "gatsby-plugin-typography": "^1.7.18",
    "gatsby-plugin-catch-links": "^1.0.22",
    "gatsby-remark-prismjs": "^2.0.4",
    "gatsby-plugin-netlify": "^1.0.21",
    "gatsby-source-filesystem": "^1.5.38",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-plugin-feed": "^1.3.25",

I bumped them all to:

    "gatsby-plugin-google-analytics": "next",
    "gatsby-plugin-canonical-urls": "next",
    "gatsby-plugin-typography": "next",
    "gatsby-plugin-catch-links": "next",
    "gatsby-remark-prismjs": "next",
    "gatsby-plugin-netlify": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-plugin-sass": "next",
    "gatsby-transformer-remark": "next",
    "gatsby-plugin-feed": "next",

removed my node_modules, npm i and the error was gone (but I got a new one ;) )

[jazmon]

I'm still getting this error Cannot find module 'webpack/lib/removeAndDo' with gatsby-plugin-netlify-cms@next.

Before adding yarn add extract-text-webpack-plugin@^1.0.1 I got an error stating that Cannot find module 'extract-text-webpack-plugin'.

I tried removing yarn.lock and node_modules with no luck.

Looks like the netlify-cms plugin has an update for v2 but it doesn't seem to work. Is it related this issue or should I create a new issue?

[milliephanillie]

Have the same issue. Here is my package.json

"devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "6.6.0",
    "babelify": "7.2.0",
    "browser-sync": "^2.14.0",
    "browser-sync-webpack-plugin": "^1.1.3",
    "browserify": "13.0.0",
    "browserify-shim": "^3.8.12",
    "css-loader": "^0.25.0",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-util": "3.0.7",
    "jquery-ui-browserify": "^1.11.0-pre-seelio",
    "json-parse-better-errors": "^1.0.2",
    "node-sass": "^4.9.2",
    "node-underscorify": "0.0.14",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "underscore-template-loader": "^0.7.3",
    "vinyl-source-stream": "1.1.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "autosize": "^3.0.17",
    "foundation-sites": "^6.2.3",
    "jquery-ui": "^1.12.0",
    "jquery-ui-browserify": "^1.11.0-pre-seelio",
    "lodash": "^4.16.4",
    "motion-ui": "^1.2.2",
    "slick-carousel": "^1.6.0",
    "slick-carousel-browserify": "^1.6.12",
    "what-input": "^3.0.0",
    "youtube-player": "^3.0.4"
  }

[shansmith01]

I am getting the same error as well. Deleted all NPM file Deleted Lock files Changed all dependencies to "next" Installed NPM

Still getting errors

[chaseadamsio]

@shansmish01 can you share your dependency list from your package.json?

[NorikDavtian]

@shansmith01 after upgrading to next was still getting the following errors.

success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 9.534 s

 ERROR  Failed to compile with 1 errors                               7:43:41 PM

 error  in ./src/components/layout.scss

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)

npm i -D node-sass fixed the error. Or just paste the error logs if you don't mind.

[muhammad-ammar]

I am also getting this error even after bumping the dependencies to next. My package.json is

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "autoprefixer": "^9.1.1",
    "gatsby": "next",
    "gatsby-plugin-manifest": "next",
    "gatsby-plugin-offline": "next",
    "gatsby-plugin-postcss-sass": "next",
    "gatsby-plugin-react-helmet": "next",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

Error log on gastby develop

gatsby develop
success open and validate gatsby-config — 0.155 s
⠁
Your plugins must export known APIs from their gatsby-node.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby Node APIs

- The plugin "gatsby-plugin-postcss-sass@1.0.0-beta.6" is exporting a variable named "modifyWebpackConfig" which isn't an API.
success load plugins — 0.155 s
error Plugin gatsby-plugin-postcss-sass returned an error

  Error: Cannot find module 'webpack/lib/removeAndDo'

  - v8-compile-cache.js:159 require
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - ExtractedModule.js:30 Object.<anonymous>
    [ma1]/[extract-text-webpack-plugin]/ExtractedModule.js:30:42

  - v8-compile-cache.js:178 Module._compile
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:7 Object.<anonymous>
    [ma1]/[extract-text-webpack-plugin]/index.js:7:23

  - v8-compile-cache.js:178 Module._compile
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - gatsby-node.js:3 Object.<anonymous>
    [ma1]/[gatsby-plugin-postcss-sass]/gatsby-node.js:3:33

  - v8-compile-cache.js:178 Module._compile
    [ma1]/[v8-compile-cache]/v8-compile-cache.js:178:30

error UNHANDLED REJECTION

  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [ma1]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [ma1]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [ma1]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [ma1]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [ma1]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [ma1]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [ma1]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [ma1]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [ma1]/[bluebird]/js/release/async.js:17:14

[anantoghosh]

@muhammad-ammar gatsby-plugin-postcss-sass has been removed for Gatsby v2. Use gatsby-plugin-sass instead or use gatsby-plugin-postcss to use your own postcss config.

[muhammad-ammar]

Thanks @anantoghosh. Switched to gatsby-plugin-sass

[szimek]

If you're using extract-text-webpack-plugin, you should switch to mini-css-extract-plugin in Gatsby v2. This is from docs for extract-text-webpack-plugin:

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

[AntonyMayer]

Had the same issue after installing gatsby-plugin-postcss-sass, bumping the dependencies to next did the trick after I cleaned npm cache:

$ rm -rf node_modules/
$ npm cache clean --force
$ npm i

[ghost]

@AntonyMayer , thanks it does work :)

[DSchau]

Sounds like we have a consensus here :)

For posterity, looks like there were two issues here and two solutions.

Upgrading gatsby plugins to @next

bump anything that matches the pattern /gatsby-*/ to => "next"

e.g.

given

{
  "dependencies": {
    "gatsby-plugin-google-analytics": "^1.0.31",
    "gatsby-plugin-canonical-urls": "^1.0.18",
    "gatsby-plugin-typography": "^1.7.18",
    "gatsby-plugin-catch-links": "^1.0.22",
    "gatsby-remark-prismjs": "^2.0.4",
    "gatsby-plugin-netlify": "^1.0.21",
    "gatsby-source-filesystem": "^1.5.38",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-plugin-feed": "^1.3.25"
  }
}

simply change all versions for gatsby- to next and then run yarn or npm install (being sure to delete any lock files first)!

{
  "dependencies": {
    "gatsby-plugin-google-analytics": "next",
    "gatsby-plugin-canonical-urls": "next",
    "gatsby-plugin-typography": "next",
    "gatsby-plugin-catch-links": "next",
    "gatsby-remark-prismjs": "next",
    "gatsby-plugin-netlify": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-plugin-sass": "next",
    "gatsby-transformer-remark": "next",
    "gatsby-plugin-feed": "next"
  }
}

gatsby-plugin-postcss-sass not applicable for Gatsby v2

gatsby-plugin-postcss-sass has been removed for Gatsby v2. Use gatsby-plugin-sass instead or use gatsby-plugin-postcss to use your own postcss config.

Wrap-up

Closing for now, but please feel free to re-open if some related issue arises or the solutions here don't work!

[devuxer]

@DSchau,,

I just updated from gatsby 2.19.32 to 2.20.21, and suddenly I wasn't able to run gatsby develop. It would error out immediately with "cannot find module webpack".

I updated all my gatsby-x packages, deleted package-lock and node_modules, then ran npm install, but I still kept getting the same error. Finally, I just went ahead and installed webpack (which I had never needed before) as a dev dependency, and voila, it worked.

My question is, why did I suddenly start needing webpack after just a minor update of Gatsby?

[kimmy]

^ I upgraded from 1.9 (I know) to the latest version and had this problem until I installed webpack like @devuxer.