Cannot find module '@babel/plugin-proposal-class-properties' – React+Spring-boot

Question

I am trying to integrate an exist project of ReactJS into a project of Spring-boot. I am using in project that have already run good by a tutorial that I’ve implemented.

The pom.xml is using with frontend-maven-plugin .

Before I have copied the files of the app I want to integrate it worked well.

Now I am getting this error :

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-proposal-class-properties' from 'C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying'
 at Function.module.exports [as sync] (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\resolve\lib\sync.js:58:15)
 at resolveStandardizedName (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
 at resolvePlugin (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\files\plugins.js:54:10)
 at loadPlugin (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\files\plugins.js:62:20)
 at createDescriptor (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
 at items.map (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
 at Array.map (<anonymous>)
 at createDescriptors (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
 at createPluginDescriptors (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
 at alias (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:63:49)
 at cachedFunction (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\caching.js:33:19)
 at plugins.plugins (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-descriptors.js:28:77)
 at mergeChainOpts (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-chain.js:319:26)
 at C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-chain.js:283:7
 at buildRootChain (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\config-chain.js:68:29)
 at loadPrivatePartialConfig (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\partial.js:85:55)
 at Object.loadPartialConfig (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\@babel\core\lib\config\partial.js:110:18)
 at Object.<anonymous> (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:140:26)
 at Generator.next (<anonymous>)
 at asyncGeneratorStep (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:3:103)
 at _next (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:5:194)
 at C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:5:364
 at new Promise (<anonymous>)
 at Object.<anonymous> (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:5:97)
 at Object._loader (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:220:18)
 at Object.loader (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:56:18)
 at Object.<anonymous> (C:\izhar\files\eclipse-workspaces\Spring-Hibernate\HibernateStudying\node_modules\babel-loader\lib\index.js:51:12)
 at Object../src/main/resources/static/js/app.js (http://localhost:8080/built/bundle.js:96:7)
 at __webpack_require__ (http://localhost:8080/built/bundle.js:20:30)
 at http://localhost:8080/built/bundle.js:84:18
 at http://localhost:8080/built/bundle.js:87:1

I tried some workaround by some searches with no success.

This is the pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.3.RELEASE</version>
 <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.lingar</groupId>
 <artifactId>SocialEventsTrying1</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>SocialEventsTrying1</name>
 <description>Demo project for Spring Boot</description>
 <properties>
 <java.version>1.8</java.version>
 </properties>
 <dependencies>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-data-jpa</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-data-rest</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <!-- Use MySQL Connector-J -->
 <dependency>
 <groupId>mysql</groupId>
 <artifactId>mysql-connector-java</artifactId>
 <version>5.1.47</version><!-- this version solve the time issue -->
 </dependency>
 <dependency>
 <groupId>org.projectlombok</groupId>
 <artifactId>lombok</artifactId>
 <optional>true</optional>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-test</artifactId>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 <optional>true</optional>
 </dependency>
 </dependencies>
 <build> 
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 <!-- tag::frontend-maven-plugin[] -->
 <plugin>
 <groupId>com.github.eirslett</groupId>
 <artifactId>frontend-maven-plugin</artifactId>
 <version>1.6</version>
 <configuration>
 <installDirectory>target</installDirectory>
 </configuration>
 <executions>
 <execution>
 <id>install node and npm</id>
 <goals>
 <goal>install-node-and-npm</goal>
 </goals>
 <configuration>
 <nodeVersion>v10.11.0</nodeVersion>
 <npmVersion>6.4.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>
 <!-- end::frontend-maven-plugin[] -->
 </plugins>
 </build>
</project>

yyy This is the webpack.config.js:

 var path = require('path');
module.exports = {
 entry: './src/main/resources/static/js/app.js',
 devtool: 'sourcemaps',
 cache: false,
 mode: 'development',
 output: {
 path: __dirname,
 filename: './src/main/resources/static/built/bundle.js'
 },
 module: {
 rules: [
 {
 test: path.join(__dirname, '.'),
 exclude: /(node_modules)/,
 use: [{
 loader: 'babel-loader',
 options: {
 presets: ["@babel/preset-env", "@babel/preset-react"]
 }
 }]
 }
 ]
 }
};

This is the webpack after some changes I have tried.

var path = require('path');
module.exports = {
 entry: './src/main/resources/static/js/app.js',
 devtool: 'sourcemaps',
 cache: false,
 mode: 'development',
 output: {
 path: __dirname,
 filename: './src/main/resources/static/built/bundle.js'
 },
 module: {
 rules: [
 {
 test: path.join(__dirname, '.'),
 exclude: /(node_modules)/,
 use: [{
 loader: 'babel-loader',
 options: {
 presets: ["@babel/preset-env", "@babel/preset-react"],
 plugins : [
 '@babel/plugin-proposal-class-properties'
 ]
 }
 }
 ]
 }
 ]
 }
};

Nothing worked.

In each change I am doing Maven-update in Eclipse and start over the Project.

I would be glad to find solutions, thanks.

Edit: package.json

{
 "name": "social-events-trying1",
 "version": "0.1.0",
 "description": "Trying to build the primary structure of the App + Spring Data REST",
 "repository": {
 "type": "git",
 "url": "[email protected]:spring-guides/tut-react-and-spring-data-rest.git"
 },
 "keywords": [
 "rest",
 "hateoas",
 "spring",
 "data",
 "react"
 ],
 "author": "Lingar",
 "license": "Apache-2.0",
 "bugs": {
 "url": "https://github.com/spring-guides/tut-react-and-spring-data-rest/issues"
 },
 "homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",
 "dependencies": {
 "react": "^16.5.2",
 "react-dom": "^16.5.2",
 "react-router": "^4.3.1",
 "react-router-dom": "^4.3.1",
 "rest": "^1.3.1"
 },
 "scripts": {
 "watch": "webpack --watch -d"
 },
 "devDependencies": {
 "@babel/core": "^7.1.0",
 "@babel/plugin-proposal-class-properties": "^7.4.4",
 "@babel/preset-env": "^7.1.0",
 "@babel/preset-react": "^7.0.0",
 "babel-loader": "^8.0.2",
 "webpack": "^4.19.1",
 "webpack-cli": "^3.1.0"
 }
}

• Will Jenkins: what does your package.json look like?
• lingar: @WillJenkins , just added that to my question. I start to understand that the project that I move the code from have created by create-react-app, and have a lot of dependencies that Not include in the current project. But I'm not sure how I can define it now.
• Will Jenkins: I haven't done what you're trying to do before but this looks like it might be helpful: medium.com/@itzgeoff/…

Answer 1

Had a similar issue. After the package version numbers were in sync

 "devDependencies": {
 "@babel/core": "^7.10.1",
 "@babel/node": "^7.10.1",
 "@babel/plugin-proposal-class-properties": "^7.10.1",
 "@babel/polyfill": "^7.10.1",
 "@babel/preset-env": "^7.10.2",
 "@babel/preset-react": "^7.10.1",
 ...

and @ was added in front of the plugin name (babel.config.js)

const plugins = [
 // transforms static class properties as well as properties declared
 // with the property initializer syntax
 '@babel/plugin-proposal-class-properties'
 // 'babel/plugin-proposal-class-properties' doesn't work:
 // ERROR in ./server/index.js
 // Module build failed (from ./node_modules/babel-loader/lib/index.js):
 // Error: Cannot find module 'babel/plugin-proposal-class-properties' from 
];

it was working fine.

• Tigerrrrr: Since the ^ in your example takes the latest version, making sure the version numbers are "in sync" doesn't matter (also "preset-env" doesn't match). I suspect the solution was solely adding @ in the babel.config.js file.

Answer 2

In your React root project just do:

yarn add @babel/plugin-proposal-class-properties --dev

Answer 3

Sorry For the Late reply, but may this will help you,

• its is self-created simple webpack file so you can take reference

package.json

{
 "name": "practice",
 "main": "index.js",
 "devDependencies": {
 "@babel/core": "^7.22.8",
 "@babel/plugin-proposal-class-properties": "^7.18.6",
 "@babel/preset-env": "^7.22.7",
 "babel-loader": "^9.1.3",
 "webpack": "^5.86.0",
 "webpack-cli": "^5.1.4"
 },
 "dependencies": {
 "css-loader": "^6.8.1",
 "sass": "^1.63.6",
 "sass-loader": "^13.3.2",
 "style-loader": "^3.3.3"
 }
}

webpack.config.js

const path = require('path');
module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, './dist'),
 },
 mode: 'none',
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/env'],
 plugins: ['@babel/plugin-proposal-class-properties']
 }
 }
 }
 ]
 }
}