Question

在this tutorial about how to do server-side rendering from a create-react-app之后，我想运行这段代码：

require('ignore-styles');

require('babel-register')({
    ignore: [/(node_modules)/],
    presets: ['es2015', 'react-app'],
    plugins: [
        'syntax-dynamic-import',
        'dynamic-import-node',
        'react-loadable/babel'
    ]
});

require('./index');

我收到一个错误：

Error: Couldn't find preset "es2015" relative to directory "/Users/.../react/server"

在Google上搜索时发现this SO answer并安装了babel-preset-es2015。

现在，运行NODE_ENV=development node bootstrap.js给了我另一个错误：

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core [...]

现在进一步搜索，我发现this Github线程表明我应该使用babel upgrade。

但是运行它会使我回到第一个错误...运行yarn add babel-loader babel-core@next也是如此，正如线程中其他人所建议的那样。

提取package.json

"dependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0-beta.55",
    "@material-ui/codemod": "^1.1.0",
    "@material-ui/core": "^1.4.0",
    "@material-ui/icons": "^3.0.0",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.16.2",
    "babel-loader": "^8.0.0",
    "babel-preset-react-app": "^5.0.3",
    "cytoscape": "^3.2.4",
    "cytoscape-cxtmenu": "^3.0.1",
    "cytoscape-dagre": "^2.1.0",
    "downshift": "^1.22.5",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "fsevents": "^1.1.3",
    "history": "^4.7.2",
    "ignore-styles": "^5.0.1",
    "is_js": "^0.9.0",
    "jshint": "^2.9.5",
    "lodash": "^4.17.4",
    "material-auto-rotating-carousel": "^2.0.0",
    "material-ui-icons": "^1.0.0-beta.17",
    "md5": "^2.2.1",
    "react": "^16.0.0",
    "react-autosuggest": "^9.3.2",
    "react-dom": "^16.0.0",
    "react-helmet": "^5.2.0",
    "react-icons": "^2.2.7",
    "react-loadable": "^5.5.0",
    "react-loader-spinner": "^2.0.6",
    "react-localize-redux": "^2.13.0",
    "react-markdown": "^2.5.0",
    "react-redux": "^5.0.6",
    "react-redux-form": "^1.16.2",
    "react-resize-detector": "^3.1.2",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-scripts": "1.0.14",
    "react-scroll": "^1.6.4",
    "react-select": "^2.0.0",
    "react-share": "^2.3.1",
    "react-spinner": "^0.2.7",
    "react-swipeable-views": "^0.12.16",
    "react-visibility-sensor": "^4.1.3",
    "redux": "^3.7.2",
    "redux-form": "^7.2.0",
    "redux-persist": "4.10.2",
    "typeface-roboto": "^0.0.43",
    "validator": "^9.1.2",
    "wtf_wikipedia": "^5.0.1"
}

Answer 1

preset-es2015已过时，并且不适用于babel 7。

require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: ['@babel/preset-env', 'react-app'],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        'dynamic-import-node',
        'react-loadable/babel'
    ]
});

您需要安装npm install --save-dev @babel/plugin-syntax-dynamic-import @babel/register

Babel 7和预设-es2015不能一起使用

1 个答案: