Reactjs 需要适当的加载程序来处理此文件类型

我将使用服务器端渲染实现代码拆分。为此，我使用react loadable

但是，我在使用导入时遇到以下错误

我展示了其他的帖子，但对我来说没什么用

您可能需要适当的加载程序来处理此文件类型。 |var Content=（0，_reactLoadable.default）({ |加载器：函数加载器（）{ 返回导入（'./组件/内容'）； |}

我的代码如下所示：

import Loadable from 'react-loadable';

const Content = Loadable({
  loader: () => import('./components/Content'),
  loading: Loading
});

package.json

"dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "acorn-dynamic-import": "^4.0.0",
    "express": "^4.16.4",
    "isomorphic-fetch": "^2.2.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-loadable": "^5.5.0",
    "react-redux": "^5.1.1",
    "react-router": "^4.3.1",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.0.0",
    "babel-loader": "^7.1.5",
    "css-loader": "^1.0.1",
    "cypress": "^3.1.3",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1",
    "enzyme-to-json": "^3.3.5",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "fetch-mock": "^7.2.5",
    "jest": "^24.0.0",
    "jest-fetch-mock": "^2.0.1",
    "json-loader": "^0.5.7",
    "nodemon": "^1.18.9",
    "npm-run-all": "^4.1.5",
    "open": "0.0.5",
    "redux-devtools": "^3.4.2",
    "redux-mock-store": "^1.5.3",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-node-externals": "^1.7.2"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties",
      "react-loadable/babel",
      "@babel/plugin-syntax-dynamic-import"
    ]
  }

webpack.config.js

return {
        context: path.join(__dirname, "src"),
        entry: './index.js',
        mode: isProduction ? "production" : "development",
        devtool: isProduction ? "none" : "source-map",

        resolve: {
            extensions: [".js", ".jsx"]
        },

        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    loader: "babel-loader",
                    exclude: /node_modules/,
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'] 
                    }
                },
                {
                    test: /\.(ttf|eot|svg|woff|png|jpg)$/,
                    loader: "file-loader",
                    options: {
                        name: "[path][name].[ext]?[hash]"
                    }
                },
                {
                    test: /\.css$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
                }
            ]
        },

        optimization: isProduction ? {
            minimizer: [
              new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true
              }),
              new OptimizeCSSAssetsPlugin({})
            ]
          } : {},

        devServer: {
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: true,
        },

        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, "dist"),
            publicPath: "/",
        }
    };

---

我在谷歌上搜索了

react-loadable-babel 7

，我发现了这个拉取请求，它仍然是开放的：。 很可能图书馆目前没有积极的支持

---

好消息是，您使用的是已经支持延迟加载的

React v16.7

。签出文档：。它不需要任何额外的

babel

预设或插件-您应该可以在已有设置的情况下使用它。

您可以提供

网页包

配置吗？@ReasonX7我编辑了我的问题。

import（）

在Node.js上不受支持。yetI可以看到您已安装了

@babel/preset env

&

@babel/preset react

预设，但它们未在您的配置中使用。请尝试添加：

{options:{presets:['@babel/preset env'，'@babel/preset react']}

您是否看到了

babel loader

的基本用法示例？但它不支持服务器端渲染，对吗？

React.lazy和suspent还不可用于服务器端渲染。

是的，它还不支持服务器端渲染。如果您确实需要服务器端渲染，可以搜索其他库来执行此操作，如

react通用组件

或将

babel

降级至版本6，以便运行

react loadable

。好的。谢谢您的帮助