Проблемы с импортом react и react-dom
Пытаюсь собрать сборку gulp+webpack+react. Возникли проблемы с последним. Почему-то при импорте в common.jsx react и react-dom ничего не происходит. Будто зависает так, что даже в консоль ничего не выводит. При этом, если в файле убрать всё, но оставить лишь вывод в консоль, то работать будет корректно. В чём может быть проблема? Спасибо за ответы
common.jsx
import React from "react";
import ReactDOM from "react-dom";
console.log(1);
const Help = (props) => {
<div>
Проверка
</div>
}
ReactDOM.render(
<Help />,
document.getElementById('root')
);
package.json
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"browser-sync": "^2.27.4",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-imagemin": "^7.1.0",
"gulp-sass": "^5.0.0",
"sass": "^1.35.2",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2",
"webpack-stream": "^6.1.2"
},
"dependencies": {
"core-js": "^3.15.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
webpack.config.js
var glob = require("glob")
module.exports = {
mode: 'development',
entry: glob.sync('./src/js/**/*.jsx').reduce((acc, path) => {
const folder = path.replace('./src/js/', '').split('/').shift()
var name
if (folder == 'pages') {
name = path.split('/').pop().replace('.jsx', '')
acc[name] = path
}
if (folder == 'common.jsx') {
name = folder.replace('.jsx', '')
acc[name] = path
}
return acc
}, {}),
output: {
filename: '[name].bundle.js',
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
}
]
},
};
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/preset-react"
]
}
Ответы (1 шт):
Автор решения: Евгений
→ Ссылка
Потому что компонент Help ничего не возвращает, почитайте о стрелочных функциях
const Help = (props) => (
<div>
Проверка
</div>
)
или
const Help = (props) => {
return (
<div>
Проверка
</div>
)
}