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

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

Closed
bogdancss opened this issue Jun 7, 2018 · 29 comments
Closed

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

bogdancss opened this issue Jun 7, 2018 · 29 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@bogdancss
Copy link
Contributor

  • 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
Copy link
Contributor

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

@m-allanson m-allanson added the type: question or discussion Issue discussing or asking a question about Gatsby label Jun 7, 2018
@bogdancss
Copy link
Contributor Author

bogdancss commented Jun 8, 2018

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
Copy link
Contributor

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
Copy link
Contributor

valse commented Jun 8, 2018

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
Copy link

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
Copy link

tiendq commented Jun 18, 2018

Got same error :(

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

@KyleAMathews
Copy link
Contributor

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

@tiendq
Copy link

tiendq commented Jun 18, 2018

@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
Copy link

tiendq commented Jun 18, 2018

@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
Copy link
Contributor

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: #5778 (comment)

@valse
Copy link
Contributor

valse commented Jun 19, 2018

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
Copy link

tiendq commented Jun 20, 2018

@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
Copy link
Contributor

anantoghosh commented Jun 20, 2018

@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
Copy link

tiendq commented Jun 20, 2018

@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.

screen shot 2018-06-20 at 9 31 38 pm

@chaseadamsio
Copy link

chaseadamsio commented Jun 28, 2018

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
Copy link

jazmon commented Jun 29, 2018

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
Copy link

milliephanillie commented Jul 12, 2018

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
Copy link
Contributor

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
Copy link

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

@NorikDavtian
Copy link

@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
Copy link

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
Copy link
Contributor

@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
Copy link

Thanks @anantoghosh. Switched to gatsby-plugin-sass

@szimek
Copy link
Contributor

szimek commented Aug 13, 2018

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
Copy link

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
Copy link

ghost commented Sep 5, 2018

@AntonyMayer , thanks it does work :)

@DSchau
Copy link
Contributor

DSchau commented Sep 5, 2018

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
Copy link

devuxer commented Apr 15, 2020

@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
Copy link

kimmy commented Sep 5, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests