Babel 7和preset-es2015无法一起使用

Question

Following this tutorial about how to do server-side rendering from a create-react-app , I want to run this piece of code:

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');

I got an error:

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

Googling around I found this SO answer and installed babel-preset-es2015 .

Now, running NODE_ENV=development node bootstrap.js gives me another error:

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 [...]

Now googling some more, I find this Github thread stating I should use babel upgrade .

But running it sends me back to the first error... And so does running yarn add babel-loader babel-core@next as suggested by others in the thread.

---

Extract of 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 is deprecated and also does not work with 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'
    ]
});

You'll need to install npm install --save-dev @babel/plugin-syntax-dynamic-import @babel/register