Trying to replicate an example of configuring an environment to work with React and Node , I get an error, implying as if it were not the loader respective to load and transpilar the files.
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting 'babel-node src/server.js'
Live Reload listening on port 35729
app start over the port 3000
× ｢wdm｣: Hash: 523d77cec06d570174bb
Version: webpack 4.1.1
Time: 1211ms
Built at: 2018-3-17 10:37:04
Asset Size Chunks Chunk Names
bundle.js 752 bytes 0 main
Entrypoint main = bundle.js
[0] ./src/client/index.jsx 208 bytes {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in ./src/client/index.jsx
Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type.
|
| const App = () => {
| return <h1>Hola Mundo</h1>;
| };
|
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 531 KiB 0
Entrypoint undefined = index.html
[0] (webpack)/buildin/module.js 519 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./node_modules/lodash/lodash.js 527 KiB {0} [built]
[3] ./node_modules/html-webpack-plugin/lib/loader.js!./src/client/index.html 558 bytes {0} [built]
i ｢wdm｣: Failed to compile.
index.jsx
import React from 'react';
import {render} from 'react-dom';
const App = () => {
return <h1>Hola Mundo</h1>;
};
render(
<App/>,
document.getElementById('app')
)
webpack.config.js
import webpack from 'webpack';
import htmlWebpackPlugin from 'html-webpack-plugin';
import LiveReloadPlugin from 'webpack-livereload-plugin';
export default {
entry: './src/client/index.jsx',
output: {
path: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: '/\.jsx$/',
use:{
loader:'babel-loader'
},
exclude: /node_modules/
},
{
use: ['style-loader','css-loader'],
test: '/\.css$/'
},
{
test: '/\.scss$/',
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options:
{
sourceMap: true
}
},
{
loader: 'sass-loader',
options:
{
sourceMap: true
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: './src/client/index.html'
}),
new LiveReloadPlugin()
]
};
package.json
{
"name": "reactnode",
"version": "1.0.0",
"description": "scaffoldproject",
"main": "index.js",
"scripts": {
"dev": "nodemon --exec babel-node src/server.js"
},
"author": "PterPmntaM",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.10",
"html-webpack-plugin": "^3.0.6",
"node-sass": "^4.7.2",
"nodemon": "^1.17.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.1.1",
"webpack-dev-middleware": "^3.0.1",
"webpack-livereload-plugin": "^2.0.0"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
server.js
import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config';
const app = express();
app.get('/', (req, res) => {
res.send("Hola Mundo React - Node");
});
app.get('/api', (rep, res) => {
res.json({api: 'works'});
});
app.set('port', process.env.PORT || 3000);
app.use(webpackDevMiddleware(webpack(webpackConfig)));
app.listen(app.get('port'), () =>{
console.log('app start over the port', app.get('port'));
});
Structure
