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