Gatsby: Upgrading to v2 - Cannot find module error

Created on 26 Nov 2018  路  1Comment  路  Source: gatsbyjs/gatsby

I followed the v1 to v2 doc

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

ran npm install and finally gatsby develop

I am getting following error.

here ./.cache/develop-static-entry.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: Cannot find module 'babel-preset-react' from 'C:\contentful-gatsby-blog'

  • If you want to resolve "react", use "module:react"
  • Did you mean "@babel/react"?
    at Function.module.exports [as sync] (C:\contentful-gatsby-blog\node_modules\resolve\lib\sync.js:43:15)
    at resolveStandardizedName (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map ()
    at createDescriptors (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at presets (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-descriptors.js:47:19)
    at mergeChainOpts (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-chain.js:320:26)
    at C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\config-chain.js:120:22)
    at loadPrivatePartialConfig (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\partial.js:85:55)
    at Object.loadPartialConfig (C:\contentful-gatsby-blog\node_modules\@babel\core\lib\config\partial.js:110:18)
    at Object. (C:\contentful-gatsby-blog\node_modules\babel-loader\lib\index.js:82:26)
    at Generator.next ()
    at step (C:\contentful-gatsby-blog\node_modules\babel-loader\lib\index.js:3:221)
    at _next (C:\contentful-gatsby-blog\node_modules\babel-loader\lib\index.js:3:409)
    at tryCatcher (C:\Users\Sagar Prajapati\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\Sagar Prajapati\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\Users\Sagar Prajapati\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\bluebird\js\release\promise.js:569:18)
    error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

30 | __webpack_require__.m = modules;
31 |

32 | // expose the module cache
| ^
33 | __webpack_require__.c = installedModules;
34 |
35 | // define getter function for harmony exports

WebpackError: ./.cache/develop-static-entry.js

Here is the package.json file

{
"name": "contentful-starter-gatsby-blog",
"description": "Contentful Gatsby Starter Blog",
"private": true,
"version": "0.0.1",
"author": "Contentful opensource@contentful.com",
"bugs": {
"url": "https://github.com/contentful/starter-gatsby-blog/issues"
},
"dependencies": {
"babel-preset-gatsby-package": "^0.1.2",
"emotion": "^9.2.12",
"emotion-server": "^9.2.12",
"emotion-theming": "^9.2.9",
"gatsby": "^2.0.23",
"gatsby-image": "^2.0.15",
"gatsby-link": "^2.0.6",
"gatsby-plugin-catch-links": "^2.0.4",
"gatsby-plugin-emotion": "^2.0.5",
"gatsby-plugin-google-analytics": "^2.0.6",
"gatsby-plugin-lodash": "^3.0.1",
"gatsby-plugin-manifest": "^2.0.5",
"gatsby-plugin-netlify": "^2.0.1",
"gatsby-plugin-nprogress": "^2.0.5",
"gatsby-plugin-offline": "^2.0.6",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-sharp": "^2.0.6",
"gatsby-plugin-sitemap": "^2.0.1",
"gatsby-plugin-typography": "^2.2.0",
"gatsby-remark-external-links": "^0.0.4",
"gatsby-remark-images": "^2.0.4",
"gatsby-remark-responsive-iframe": "^2.0.5",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^2.0.4",
"gatsby-transformer-remark": "^2.1.7",
"gatsby-transformer-sharp": "^2.1.3",
"history": "^4.7.2",
"lodash": "^4.17.11",
"polished": "^2.2.0",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-emotion": "^9.2.12",
"react-ga": "^2.5.5",
"react-helmet": "^5.2.0",
"react-icons": "^3.2.0",
"react-router-dom": "^4.3.1",
"react-typography": "^0.16.13",
"typography": "^0.16.17"
},
"homepage": "https://github.com/contentful/starter-gatsby-blog#readme",
"keywords": [
"gatsby",
"contentful",
"starter"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/contentful/starter-gatsby-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"build": "gatsby build",
"heroku-postbuild": "gatsby build",
"serve": "gatsby serve",
"setup": "npm install --no-save contentful-import yargs-parser axios chalk && node ./setup.js"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"chalk": "^2.4.1",
"eslint": "^5.7.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.0.0",
"eslint-plugin-react": "^7.11.1",
"prettier": "^1.14.3"
}
}

Here is the .babelrc file

{
"presets": ['react', 'es2015', 'stage-1'],
"plugins": ['add-module-exports']
}

Most helpful comment

The best course of action here is to remove the .babelrc that appears to be in the root of your repository.

It's configured for Babel 6, whereas Gatsby v2 uses Babel 7. There are a number of deprecations there, e.g. packages are now scoped, e.g. babel-preset-react -> @babel/preset-react, staged presets have been eliminated, it's recommended to use @babel/preset-env, etc.

As such - I'd recommend just deleting that file and trying to build again. Let us know if that doesn't work, but for now, going to close out as answered. If you need additional help, always feel free to re-open or continue the discussion.

Thanks for using Gatsby!

>All comments

The best course of action here is to remove the .babelrc that appears to be in the root of your repository.

It's configured for Babel 6, whereas Gatsby v2 uses Babel 7. There are a number of deprecations there, e.g. packages are now scoped, e.g. babel-preset-react -> @babel/preset-react, staged presets have been eliminated, it's recommended to use @babel/preset-env, etc.

As such - I'd recommend just deleting that file and trying to build again. Let us know if that doesn't work, but for now, going to close out as answered. If you need additional help, always feel free to re-open or continue the discussion.

Thanks for using Gatsby!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hobochild picture hobochild  路  3Comments

dustinhorton picture dustinhorton  路  3Comments

theduke picture theduke  路  3Comments

ferMartz picture ferMartz  路  3Comments

kalinchernev picture kalinchernev  路  3Comments