Webpack не может создавать рабочие модуль

Question

У меня есть компонент:

import React from 'react'; 
import _ from 'lodash'; 


class NotWorking extends React.Component { 
    render() { 
     console.info('notworking'); 
     return <div>js sucks</div>; 
    } 
} 

module.exports = { 
    NotWorking 
}; 

Построить его:

var path = require('path'); 

module.exports = { 
    entry: path.resolve(__dirname, 'src/NotWorking.jsx'), 
    output: { 
     path: path.resolve(__dirname, 'build'), 
     filename: 'notworking.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      } 
     ] 
    } 
}; 

Идея заключается в том, чтобы это как модуль НПМ; поэтому я хочу, чтобы включить сборку в другом проекте (надеюсь через node_modules тогда, сейчас я просто требую его следующим образом):

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import NotWorking from './../build/notworking.js'; 


class MustWork extends React.Component { 

    render() { 
     console.info('mustwork'); 
     return <div> 
      must work 
      <NotWorking /> 
     </div>; 
    } 
} 

ReactDOM.render(<MustWork />, document.getElementById('kitchen_sink')); 

Я построить его с точной же WebPack конфигурацией, как описан выше, за исключением изменения имени файла.

Я получаю эту ошибку при его использовании:

Предупреждение: React.createElement: тип не должен быть пустым, не определено, логическое, или номер. Он должен быть строкой (для элементов DOM) или ReactClass (для составных компонентов). Проверьте метод рендеринга MustWork.

Это значит, что файл обрабатывающей промышленности не работает корректно?

Answer 1

Проблема в том, что вы экспортируете объект, но он пуст. Вы можете создать ключ и назначить ему компонент, или просто экспортировать компонент.

import React from 'react'; 
import _ from 'lodash'; 


class NotWorking extends React.Component { 
    render() { 
     console.info('notworking'); 
     return <div>js sucks</div>; 
    } 
} 

module.exports default {NotWorking: NotWorking}; 

EDIT Я думаю, что ваш код должен работать. Я просто не видел этого синтаксиса раньше. На MDN documentation it is used, как вы делаете это, но импорт:

import {NotWorking} from './../build/notworking.js'; 

Answer 2

Для изготовления его многократного использования библиотеки атрибут library должен быть указан в выходных данных WebPack:

output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'smallgrid.js', 
    library: 'SmallGrid', 
    libraryTarget: 'umd', 
    externals: { 
     react: 'react', 
     lodash: 'lodash' 
    } 
}, 

Кроме того, libraryTarget необходимо установить на umd.