仅WebPack:不变违反:ReactKonva目前不支持文本组件。您输入的文字是:“”

时间:2019-09-09 15:36:10

标签: javascript reactjs webpack

  

不变违反: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
};

0 个答案:

没有答案