代码之家 › 专栏 › 技术社区 › ted

Babel 7和preset-es2015不能一起工作

create-react-app babeljs webpack reactjs javascript

ted · 技术社区 · 6 年前

跟随 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"

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"
}

1 回复 | 直到 6 年前

PlayMa256 6 年前

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