CODEWITHSUNDEEP
reactjsmongodbspring-bootherokudeployment
Shelikestocode
Shelikestocode

Reputation: 33

Heroku Error: Module not found: Error: Can't resolve 'React' in '.../src/main/js/components

I am trying to deploy my springboot & React & Mongodb app to Heroku but I'm unable to do so. I'm seeing errors logged in the terminal.

When I run git push heroku main, I get the following error.

Module not found: Error: Can't resolve 'React' in '/tmp/build_565ab5c4/src/main/js/components'

I've tried npm install react & npm install react-dom and also pushed everything to remote main branch.

remote:        [INFO] WARNING in configuration
remote:        [INFO] The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
remote:        [INFO] You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
remote:        [INFO] 
remote:        [INFO] ERROR in ./src/main/js/components/recipesHub.js
remote:        [INFO] Module not found: Error: Can't resolve 'React' in '/tmp/build_565ab5c4/src/main/js/components'
remote:        [INFO]  @ ./src/main/js/components/recipesHub.js 7:13-29
remote:        [INFO]  @ ./src/main/js/components/session.js
remote:        [INFO]  @ ./src/main/js/app.js
remote:        [INFO] ------------------------------------------------------------------------
remote:        [INFO] BUILD FAILURE
remote:        [INFO] ------------------------------------------------------------------------
remote:        [INFO] Total time:  02:46 min
remote:        [INFO] Finished at: 2021-08-06T23:54:05Z
remote:        [INFO] ------------------------------------------------------------------------
remote:        [ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.9.1:webpack (webpack build) on project KitchenHelperProject: Failed to run task: 'webpack.js ' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 2 (Exit value: 2) -> [Help 1]
remote:        [ERROR] 
remote:        [ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
remote:        [ERROR] Re-run Maven using the -X switch to enable full debug logging.
remote:        [ERROR] 
remote:        [ERROR] For more information about the errors and possible solutions, please read the following articles:
remote:        [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
remote: 
remote:  !     ERROR: Failed to build app with Maven
remote:        We're sorry this build is failing! If you can't find the issue in application code,
remote:        please submit a ticket so we can help: https://help.heroku.com/
remote: 
remote:  !     Push rejected, failed to compile Java app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !       Push rejected to myApp.
remote:

My pom.xml file:

    <build>
        <plugins>
      <plugin>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-maven-plugin</artifactId>
          <configuration>
            <excludes>
              <exclude>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
              </exclude>
            </excludes>
          </configuration>
        </plugin>

      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.9.1</version>
        <configuration>
          <installDirectory>target</installDirectory>
        </configuration>
        <executions>
          <execution>
              <id>install node and npm</id>
              <goals>
                  <goal>install-node-and-npm</goal>
              </goals>
              <configuration>
                <nodeVersion>v16.5.0</nodeVersion>
                <npmVersion>7.19.1</npmVersion>
              </configuration>
          </execution>
          <execution>
              <id>npm install</id>
              <goals>
                    <goal>npm</goal>
              </goals>
              <configuration>
                <arguments>install</arguments>
              </configuration>
          </execution>
          <execution>
              <id>webpack build</id>
              <goals>
                <goal>webpack</goal>
              </goals>
          </execution>
        </executions>
      </plugin>

            <plugin>
                <groupId>org.asciidoctor</groupId>
                <artifactId>asciidoctor-maven-plugin</artifactId>
                <version>1.5.8</version>
                <executions>
                    <execution>
                        <id>generate-docs</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>process-asciidoc</goal>
                        </goals>
                        <configuration>
                            <backend>html</backend>
                            <doctype>book</doctype>
                        </configuration>
                    </execution>
                </executions>
                <dependencies>
                    <dependency>
                        <groupId>org.springframework.restdocs</groupId>
                        <artifactId>spring-restdocs-asciidoctor</artifactId>
                        <version>${spring-restdocs.version}</version>
                    </dependency>
                </dependencies>
            </plugin>
    </plugins>
    </build>

My package.json file:

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "My app project",
  "main": "index.js",
  "dependencies": {
    "@fontsource/roboto": "^4.5.0",
    "@material-ui/core": "latest",
    "@material-ui/icons": "latest",
    "@material-ui/styles": "4.11.4",
    "axios": "^0.21.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^5.0.2",
    "clsx": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "latest",
    "rest": "^2.0.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.1.1"
  },
  "devDependencies": {
    "jest": "^23.1.0"
  },
  "scripts": {
    "start": "npm run webpack",
    "webpack": "webpack -d --watch",
    "heroku-postbuild": "npm run build"
  }

My project structure: Project set-up

Upvotes: 1

Views: 1661

Answers (2)

Andrew Nessin
Andrew Nessin

Reputation: 1295

In my case, my package.json didn't have direct dependency on react! My local development went fine because I had an indirect dependency via react-hot-loader, which I wasn't aware of; I checked with below command:

$ npm list react
[email protected] ~/Learning/react/cards
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected] deduped
  └── [email protected] deduped

Heroku fails to run the application without direct react dependency (Having direct dependency is the best practice anyway!) with the same error in OP. It was successful after I installed the dependencies directly:

npm install react react-dom

Upvotes: 0

Shelikestocode
Shelikestocode

Reputation: 33

I found why I was getting the error - a silly mistake made by a teammate that I didn't realise until I looked closer at the file causing the error i.e. recipesHub.js

I had the following line in this file:

import React from 'React';

which I then changed to:

import React from 'react';

A small typo that took me 24 hours to notice :))

The deployment to Heroku was then successful. So all good :D

Upvotes: 1

Related Questions