ES6インポート/エクスポートモジュール

Question

I次のファイルの構造を有する：

src 
    ... 
    ListBox 
    index.js 
    ListBox.jsx 
    ListBoxItem.jsx 
    ... 
    index.js 

のsrc /リストボックス/ ListBox.jsx

class ListBox extends React.Component { 
    ... 
} 

export default ListBox 

のsrc /リストボックス/ ListBoxItem.jsx

を

class ListBoxItem extends React.Component { 
    ... 
} 

export default ListBoxItem 

src/ListBox/index.js

export { default as ListBox } from './ListBox' 
export { default as ListBoxItem } from './ListBoxItem' 

のsrc/index.js

import ... from '...' 
import { ListBox, ListBoxItem } from './ListBox' 

export { 
    ... 
    ListBox, 
    ListBoxItem 
} 

私はバンドラとしてWebPACKのを使用して、ここであなたはWebPACKのは、検索しようとしている見ることができるようにエラー

ですよsrc/ListBox/listBox.jsxではなく、src/ListBox/index.jsxのListBoxモジュール。私がexport { default as ListBox } from './ListBox'をexport { default as ListBox } from './ListBox.jsx'に変更すると動作します。 ListBoxItemと同じです。ここで

は私のwebpack.config.js

module.exports = (env) => { 
const config = { 
    devServer: { 
     contentBase: path.join(__dirname, 'docs'), 
     historyApiFallback: true, 
     hot: true 
    }, 
    devtool: env.development ? 'cheap-module-eval-source-map' : false, 
    entry: { 
     bundle: [ 
      'babel-polyfill', 
      './docs/index.jsx' 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'docs'), 
     filename: '[name].min.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.less$/, 
       exclude: [ 
        path.resolve(__dirname, 'node_modules') 
       ], 
       use: [ 
        'style-loader', 
        { 
         loader: 'css-loader', 
         options: { 
          minimize: env.production, 
          sourceMap: env.development 
         } 
        }, { 
         loader: 'postcss-loader', 
         options: { 
          plugins: [ 
           autoprefixer({ 
            browsers: ['last 2 versions'] 
           }) 
          ], 
          sourceMap: env.development ? 'inline' : false 
         } 
        }, { 
         loader: 'less-loader', 
         options: { 
          sourceMap: env.development, 
          sourceMapContents: env.development 
         } 
        } 
       ] 
      }, 
      { 
       test: /\.(?:jsx?)$/, 
       use: 'babel-loader', 
       exclude: [ 
        path.resolve(__dirname, 'node_modules'), 
        /.*example\.jsx$/ 
       ] 
      }, 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: (module) => { 
       return module.context && module.context.indexOf('node_modules') !== -1; 
      } 
     }), 
     new HtmlWebpackPlugin({ 
      template: 'docs/index.html' 
     }), 
    ], 
    resolve: { 
     alias: { 
      ui: path.resolve(__dirname, './src') 
     }, 
     extensions: ['.js', '.jsx'] 
    } 
}; 

return config 

}です。

Answer 1

エラーメッセージをよく見れば、ListBox\index.jsと呼んでいる間に、そのWebpackはListBox\index.jsxを期待していると読むことができます。ファイルの名前を変更するか、.jsを受け入れるようにWebpackの設定を調整することで修正できます。解決策の指示を調整することで修正できます。

resolve: {... extensions: ['.js','.jsx'] } 

Answer 2

src/ListBox/index.jsの構文でエラーが発生しているようですが、そのエラーはビルドに失敗したことを示しています。あなたの例を見ると、あなたは間違ってエクスポートすることができる。

// src/ListBox/index.js 

export { default as ListBox } from './ListBox' 
export { default as ListBoxItem } from './ListBoxItem' 

は

// src/ListBox/index.js 

import ListBox from './ListBox' 
import ListBoxItem from './ListBoxItem' 

export { ListBox, ListBoxItem } 

に変更してみてください、私は輸出...構文からはありますけど、私からそれを行う例を見つけることができませんでした複数のソース。あなたは単にあなたの行から 'デフォルト'を削除しようとすることができますが、少し冗長であれば私の例もうまくいくでしょう。