對.NET核心2.0陣營VS模板導入組件無效渲染

我創建使用默認.Net Core 2.0React網頁模板在Visual Studio 2017的web項目，然後使用npm install -save react-table @types/react-table安裝ReactTable。一切正常。對.NET核心2.0陣營VS模板導入組件無效渲染

然後我想使用該組件。所以裏面ClientApp/components/FetchData.tsx文件，在頂部

import { ReactTable } from 'react-table';

然後我換成renderForecastsTable與

const columns = [ 
    { 
     Header: 'Date formatted', 
     accessor: 'dateFormatted' 
    }, { 
     Header: 'Summary', 
     accessor: 'summary' 
    } 
]; 

return <ReactTable data={forecasts} columns={columns} />;

當我在Chrome上運行，以下錯誤發生：vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of FetchData.

我想這是因爲在網絡包或項目中的某些設置缺失，以便在運行時無法找到組件。任何想法？

編輯Webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 
const bundleOutputDir = './wwwroot/dist'; 

module.exports = (env) => { 
    const isDevBuild = !(env && env.prod); 
    return [{ 
     stats: { modules: false }, 
     entry: { 'main': './ClientApp/boot.tsx' }, 
     resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] }, 
     output: { 
      path: path.join(__dirname, bundleOutputDir), 
      filename: '[name].js', 
      publicPath: 'dist/' 
     }, 
     module: { 
      rules: [ 
       { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, 
       { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [ 
      new CheckerPlugin(), 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
      // Plugins that apply in production builds only 
      new webpack.optimize.UglifyJsPlugin(), 
      new ExtractTextPlugin('site.css') 
     ]) 
    }]; 
};

來源

2017-10-10 zcui93

你能試試這個。請記住，如果它適合你，這不是一個最好的解決方案.'var ReactTable = require（「react-table」）。default;' –

不，'react-table'沒有默認的定義。 – zcui93

而沒有默認？ –

嘗試使用進口從ReactTable '反應表'

來源

2017-10-10 09:17:09 Dakota

沒有默認導出，所以'TS1192：模塊「node_modules/@ types/react-table/index」'沒有默認export.'錯誤。 – zcui93

對.NET核心2.0陣營VS模板導入組件無效渲染

回答

相關問題