Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

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

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*

Draft saved

Draft discarded

Edit Summary*

Cancel

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. python-3.x), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

default

CollectivesTM on Stack Overflow

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

Answer*