Блог

Главная - Вопросы по программированию - проблемы с импортом компонентов в react

проблемы с импортом компонентов в react

#javascript #django #reactjs #webpack #babeljs

#javascript #django #reactjs #webpack #babeljs

Вопрос:

Привет, у меня возникли проблемы с импортом компонентов из одного jsx в другой. Я использую a django framework для обслуживания своих веб-файлов, и я загрузил все необходимые инструменты (npm, webpack, webpack-bundle-tracker, загрузчик babel, загрузчик django-webpack). Webpack хорошо справляется со всеми отдельными файлами javascript и превращает их в пакет, в котором затем может отображаться мой локальный сервер django. Проблема заключается в том, когда я пытаюсь import a component from one jsx into another jsx . Я не вижу никаких ошибок, но javascript, который я пытаюсь импортировать, не загружается в django.

Пример: File:index.js 

 var React = require('react')
var ReactDOM = require('react-dom')
var Body = require('./app.js')

ReactDOM.render(<Body message="Welcome to my website"/>, document.getElementById('app1'))

Импортируйте файл (который находится в том же каталоге, что и index.js ): File:app.js 

 var React = require('react')
var Body = React.createClass({
    getInitialState: function() {
        return {
            bodymessage: this.props.message
        }
    },
    render: function() {
        return (
            <h1>
            {this.state.bodymessage}
            </h1>
        )
    }
})
module.exports = Body;

Что-то не так с моей конфигурацией?

Вот мой webpack.config.js файл :

 var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,
    entry: './assets/js/index', 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name]-[hash].js', 
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        })
    ],

    module: {
        loaders: [
            {test: /.jsx?$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader', 
                query: {
                    presets: ['react'] 
                }
            }
        ]
    },
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'] 
    }   
}

Комментарии:

1. Работает ли это при использовании webpack-dev-server?

2. Нет, но я скачаю это и попробую отрендерить js с помощью этого сервера.

3. По-прежнему не работает.

Ответ №1:

Попробуйте заменить loader: 'babel-loader', на loader: 'babel', в вашей конфигурации webpack