Menu
I got some test of ReactJS and Here's my Code:
.babelrc
{
{ "presets": [ [ "es2015", { "modules": false } ] ] }
}
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return ( <div> <h1> Hello World </h1> </div> );
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src='index_bundle.js'></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render( <App/> , document.getElementById('app'));
package.json
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp-babel": "^8.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
Node.js Version: 6.4.1
babel core version: 7.2.2
The problem is, when i hit npm start it brings me an error and the page displayed empty:
ERROR in ./main.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-es2015'
Tried some solutions but the error still exists.
998
ES2015 is deprecated, change on your webpackconfig.js to
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["@babel/preset-env"]
}
}
]
},
And set .babelrc to:
{
"presets": ["@babel/preset-env"]
}
install
npm install --save babel-plugin-transform-object-rest-spread
npm install --save babel-preset-env
.babelrc
{
"presets":[
"env","es2015", "react"
],
"plugins": [
"react-hot-loader/babel", "transform-object-rest-spread"
]
}
package.json
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0"
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
