找不到模块'@ babel / plugin-proposal-class-properties'– React + Spring-boot

时间:2019-05-29 08:47:35

标签: reactjs maven spring-boot webpack maven-frontend-plugin

我正在尝试将ReactJS的现有项目集成到Spring-boot的项目中。 我正在使用的项目已经通过我实施的教程运行良好。

pom.xml与frontend-maven-plugin一起使用。

在我复制该应用程序的文件之前,我想对其进行整合。

现在我遇到此错误

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

我通过一些搜索尝试了一些解决方法,但均未成功。

这是 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     这是 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"]
                    }
                }]
            }
        ]
    }
};

这是我尝试了一些更改后的 webpack

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

                    }
                }
                ]
            }
        ]
    }
};

没有任何效果。

在每次更改中,我都在Eclipse中进行Maven更新,并从Project开始。

我很高兴找到解决方案,谢谢。

编辑: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": "git@github.com: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"
  }
}

1 个答案:

答案 0 :(得分:1)

有类似的问题。软件包版本号同步后

  "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",
    ...
在插件名称(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 
];

一切正常。