不变违反:ReactKonva目前不支持文本组件。您输入的文字是:“”
此错误仅在打包后发生。 (在没有webpack的情况下正常运行代码是可以的)。我看到确切的错误通常意味着我不小心在jsx的某些标签中的某个地方键入了一些文本。1
但是,如果我的文本是空字符串“”,那又意味着什么呢?那里没有多余的东西了吗?为什么Web Pack如果通常将其最小化,会在我的代码中插入任何多余的字符?
我的react为16.6,我的react-konva为16.6,我的konva为2.6.0。
我的webpack配置如下:
const webpack = require('webpack');
const path = require('path');
const {
paths,
outputFiles,
rules,
plugins,
resolve,
stats,
IS_PRODUCTION,
IS_DEVELOPMENT,
} = require('./webpack/config');
const devServer = require('./webpack/dev-server').devServer;
const { determineEntryPoint } = require('./webpack/utils')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = env => {
const { outputFilePath, outputFileName } = determineEntryPoint(env)
const entry = [
path.join(paths.javascript, outputFileName),
];
plugins.push(
// NOTE dont do this because we want one file
// Creates vendor chunk from modules coming from node_modules folder
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// filename: outputFiles.vendor,
// minChunks(module) {
// const context = module.context;
// return context && context.indexOf('node_modules') >= 0;
// },
// }),
// Builds index.html from template
new HtmlWebpackPlugin({
template: path.join(paths.source, 'index.html'),
path: paths.build,
filename: 'index.html',
minify: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeComments: true,
useShortDoctype: true,
},
})
);
if (IS_DEVELOPMENT) {
// Development plugins
plugins.push(
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: outputFiles.vendor,
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
// Enables HMR
new webpack.HotModuleReplacementPlugin(),
// Don't emmit build when there was an error while compiling
// No assets are emitted that include errors
new webpack.NoEmitOnErrorsPlugin()
);
// For IE babel-polyfill has to be loaded before react-hot-loader
entry.unshift('babel-polyfill');
}
// Webpack config
let webpackConfig = {
devtool: IS_PRODUCTION ? false : 'eval-source-map',
context: paths.javascript,
watch: !IS_PRODUCTION,
entry,
output: {
path: paths.build,
publicPath: '/',
filename: outputFilePath,
},
module: {
rules,
},
plugins,
resolve,
stats,
devServer,
}
if (IS_PRODUCTION) {
// build it into a lib if it's production, yo
webpackConfig.output.library = 'seatingManager'
webpackConfig.output.libraryTarget = 'window'
}
return webpackConfig
};