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

Question

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

\n\n

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

\n\n

在复制应用程序的文件之前，我想将其集成，效果很好。

\n\n

现在我收到此错误 ：

\n\n

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

\n\n

我通过一些搜索尝试了一些解决方法，但没有成功。

\n\n

这是pom.xml

\n\n

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

\n\n

yyy\n 这是webpack.config.js：

\n\n

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

\n\n

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

\n\n

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

\n\n

什么都没起作用。

\n\n

在每次更改中，我都会在 Eclipse 中进行 Maven 更新并重新启动该项目。

\n\n

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

\n\n

编辑：package.json

\n\n

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

\n

Answer 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 
];

工作正常。