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

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.

Answer 2

As @DraganS mentioned. I set all the plugins with the same version now It works fine again!

"@babel/core": "^7.10.1"