невозможно импортировать реагирующий компонент из библиотеки - PullRequest
Новая
       71

невозможно импортировать реагирующий компонент из библиотеки

2 голосов
/ 10 июня 2019

Пройдя почти все ответы, связанные с этой темой, мне не повезло, поэтому я должен создать новый вопрос.

Постановка проблемы:

У меня есть библиотека компонентов (модуль), которую я хочу импортировать в свое приложение реагирования, которое имеет синтаксис экспорта, такой как (работает в другом приложении): 

export * from 'button'; // this returns jsx component

Теперь в моем приложении я использую это как: 

import {button} from ./library; // this is the bundled module where button component exists.

Когда я делаю это Webpack выдает мне ошибку: 

(function (exports, require, module, __filename, __dirname) { export * from './button';
                                                              ^^^^^^
SyntaxError: Unexpected token export

Я использую Webpack 4 и babel 7 со следующими конфигурациями:

webpack.config.js

// это экспорт. 

module.exports = {
    entry: {
        client: ['whatwg-fetch', './client/index.js', 'webpack-hot-middleware/client']
    },
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    },
    output: {
        path: path.resolve(__dirname, `dist/client/${pkg.version}`),
        filename: '[name].js',
        publicPath: `/myApp/${pkg.version}`
    },
    devtool: ifProduction('nosources-source-map', 'source-map'),
    resolve: {
        modules: [path.resolve('./client'), path.resolve('./node_modules')]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            },
            {
                test: /\.(png|jpg|ico|svg|eot|ttf)$/,
                loader: 'url-loader'
            }
        ]
    },
    mode,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin(),
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            openAnalyzer: false,
            reportFilename: '../report.html'
        })
    ]
};

babel.config.js 

//  prettier-ignore
module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
    ],
    plugins: [
        '@babel/plugin-transform-spread',
        'react-hot-loader/babel',
        'babel-plugin-syntax-export-extensions',
        '@babel/plugin-proposal-export-namespace-from',
        '@babel/plugin-syntax-export-namespace-from',
        '@babel/plugin-syntax-export-default-from',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-proposal-class-properties',
        ['@babel/plugin-transform-runtime',
            {
                regenerator: true,
            },
        ],
    ],
    env: {
        development: {
            presets: [
                '@babel/preset-env', ['@babel/preset-react', { development: true } ],
            ],
        },
        test: {
            presets: [['@babel/preset-env'], '@babel/preset-react'],
        },
    },
};

Я не уверен, что идет не так, любая помощь будет высоко ценится.

Спасибо.

...