模块构建失败（来自../node_modules/babel-loader/lib/index.js）：错误：找不到相对于目录的预设“ react-app”

Question

所以我一直在尝试设置React Js环境。我面临babel依赖错误。我将css导入到服务器端渲染react项目中，出现了

之类的问题

  

模块构建失败（来自../ node_modules / babel-loader / lib / index.js）：

     

错误：找不到相对于目录的预设“ react-app”    而且我无法添加代理，如果我添加代理的操作不正确

这是我的webpack代码：

const dev = process.env.NODE_ENV !== "production";
const path = require( "path" );
const { BundleAnalyzerPlugin } = require( "webpack-bundle-analyzer" );
const FriendlyErrorsWebpackPlugin = require( "friendly-errors-webpack-plugin" );

const plugins = [
    new FriendlyErrorsWebpackPlugin(),
];

if ( !dev ) {
    plugins.push( new BundleAnalyzerPlugin( {
        analyzerMode: "static",
        reportFilename: "webpack-report.html",
        openAnalyzer: false,
    } ) );
}

module.exports = {
    mode: dev ? "development" : "production",
    context: path.join( __dirname, "src" ),
    devtool: dev ? "none" : "source-map",
    entry: {
        app: "./client.js",
    },
    resolve: {
        modules: [
            path.resolve( "./src" ),
            "node_modules",
        ],
    },
    module: {
    rules: [
      {
        test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: "file-loader",
        options: {
          name: "public/media/[name].[ext]",
          publicPath: url => url.replace(/public/, ""),
          emit: false
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader/locals"
          }
        ]
      },
      {
        test: /jsx?$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: { presets: ["react-app"] }
      }
    ]
    },
    output: {
        path: path.resolve( __dirname, "dist" ),
        filename: "[name].bundle.js",
    },
    plugins,
};

这是我的通天塔

{
    "presets": [
        [ "env",
            {
                "modules": false,
                "useBuiltIns": "usage"
            }
        ],
        "react",
        "jest"
    ],
    "env": {
        "test": {
            "presets": ["react"],
            "plugins": ["transform-es2015-modules-commonjs"]
        }

    }
  }

index.js file for running server side rendering

require( "babel-register" )( {
    presets: [ "env" ],
} );
require( "./src/server" );

./client.js中的错误：

  

模块构建失败（来自../ node_modules / babel-loader / lib / index.js）：

Error: Couldn't find preset "react-app" relative to directory "/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/src"
        at /home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
        at Array.map (<anonymous>)
        at OptionManager.resolvePresets (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
        at OptionManager.mergePresets (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
        at OptionManager.mergeOptions (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
        at OptionManager.init (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
        at File.initOptions (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/index.js:212:65)
        at new File (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/index.js:135:24)
        at Pipeline.transform (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
        at transpile (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-loader/lib/index.js:50:20)
        at Object.module.exports (/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-loader/lib/index.js:173:20)
    /home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/node_modules/babel-core/lib/transformation/file/index.js:558
          throw err;

  

SyntaxError：/home/joshi/impact/karthick/ssr-dlx-rout-react-new-web-pack/src/app/Home/test.css：意外令牌（1：0）   1 | .primary-header {           | ^         2 |颜色：绿色；         3 | }