Использование React только в одной части многостраничного приложения - PullRequest
Новая
       11

Использование React только в одной части многостраничного приложения

0 голосов
/ 10 июля 2020

У меня уже есть многостраничный веб-сайт, на котором в настоящее время есть два инструмента, построенные с помощью Node.js, Express, MongoDB, vanilla JS. У каждого инструмента есть собственная веб-страница. Я хочу добавить на свой сайт третий инструмент. Этот новый инструмент будет построен с использованием React.

Главный компонент «Приложение» должен иметь компоненты «Верхний», «Тело» и «Нижний». Однако, когда я пытаюсь импортировать эти компоненты в файл приложения, содержимое не отображается.

Компонент приложения: 

import React from 'react';

import Top from './Top/Top.js';
import Body from './Body/Body.js';
import Bottom from './Bottom/Bottom.js';

class App extends React.Component {
    render() {
        return (
            <div>
                <Top />
                <Body />
                <Bottom />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Верхний компонент: 

import React from 'react';

class Top extends React.Component {
    render() {
        return (
        <div>
            <div>Top goes here</div>
        </div>
        );
    }
}

export default Top;

Компоненты Body и Bottom похожи на Top.

Когда я импортирую компоненты в приложение, содержимое не отображается. Однако, если я не импортирую и не записываю все компоненты в один файл, содержимое отображается.

Я хотел бы разделить компоненты в отдельные файлы, как показано выше, для облегчения чтения и навигации.

Кроме того, когда я пытаюсь импортировать компоненты в основной компонент приложения, я также получаю эту ошибку в консоли веб-разработчика Chrome:

ошибка

Как я могу разделить мои компоненты на отдельные файлы и правильно импортировать их там, где это необходимо, без ошибок?

Спасибо!

Изменить: это моя конфигурация веб-пакета 

const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {
    entry: './public/js/birdApp/birdApp.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[id].js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    { 
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "[name]__[local]___[hash:base64:5]",
                            },                                                      
                            sourceMap: true
                        }
                     },
                     { 
                         loader: 'postcss-loader',
                         options: {
                             ident: 'postcss',
                             plugins: () => [
                                 autoprefixer({})
                             ]
                         }
                      }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader?limit=10000&name=img/[name].[ext]'
            }
        ]
    }
};

Edit2: мой пакет. json файл 

  "name": "rstools",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "env-cmd -f ./config/dev.env nodemon src/app.js --ext js,hbs,css"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2",
    "body-parser": "^1.19.0",
    "env-cmd": "^10.1.0",
    "express": "^4.17.1",
    "hbs": "^4.1.1",
    "mongodb": "^3.5.7",
    "mongoose": "^5.9.11",
    "osrs-json-api": "^1.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "autoprefixer": "^9.8.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^2.3.0"
  }
}
...