Не удается импортировать модули ES6 из пакета веб-пакетов

Question

У меня есть 2 местных проекта.Одна из них - библиотека пользовательского интерфейса для второй, но они должны быть отдельными.Второй проект - это приложение, которое должно загружать библиотеку пользовательского интерфейса из одного файла - пакета, который генерирует библиотека пользовательского интерфейса - index.js

Я закончил библиотеку пользовательского интерфейса с рабочей конфигурацией webpack 4, как показано ниже:

const path = require('path')

const webpackConfig = {
  entry: {
    index: './src/styleguide/main.js',
  },
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      { test: /\.js/, use: 'babel-loader' },
    ],
  },
  mode: 'production',
}

module.exports = webpackConfig;

Чтобы понять это, давайте использовать следующее как мой index.js

export default function Text () { return <p>Hello world</p> }

Это дает мне файл "dist / index.js", который также является моей точкой входа в package.json

---

В другом проекте, который должен использовать библиотеку пользовательского интерфейса, я пытаюсь сделать просто import UI from '../ui/dist/index.js'

Но UI это либо пустой объект {}либо не определено, либо выдает Uncaught Error: Minified React error # 200;посетите https://reactjs.org/docs/error-decoder.html?invariant=200 для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.

---

Я попытался установить library и libraryTarget, упрощая мои сценарии до одних строк без зависимостей, и я очень беспокоюсь о том, что мне не хватает.Я буду благодарен за любую помощь!

Answer 1

Установка output.libraryTarget в commonjs2 в библиотеке пользовательского интерфейса должна решить вашу проблему.

Кроме того, вы также можете установить реакцию как peerDependency в библиотеке пользовательского интерфейса и в конфигурационном веб-пакете:

externals: {      
    // Don't bundle react      
    react: {          
        commonjs: "react",          
        commonjs2: "react",          
        amd: "React",          
        root: "React"      
    }  
},

это может привести к гораздо меньшему расслоению.