Question

使用webpack编译React应用程序时出现错误：

import loader.queries as queries import loader.redshift as redshift def write_csv_into_redshift(s3_file): commands = [ queries.DROP_TEMP_TABLE.format(TEMP_TABLE_NAME), queries.CREATE_TEMP_TABLE, queries.COPY_CSV_INTO_TEMP.format( TEMP_TABLE_NAME, s3_file, os.environ['REDSHIFT_CREDENTIALS'], ','), queries.INSERT_INTO_TABLE ] return redshift.execute_queries(commands)

乍一看，这似乎是一个容易解决的问题，但是我的问题是我找不到与用例匹配的答案。我不是从扩展名为You may need an appropriate loader to handle this file type. <svg的文件中导入svg

相反，我的.svg位于React组件中：

示例：

svg

图标：

import React from 'react';
import PropTypes from 'prop-types';

const SvgIcon = ({ icon: Icon, ...rest }) => (
  <span>
    <Icon { ...rest } />
  </span>
);

像这样使用：

import React from 'react';

const TickIcon = (props) => (
  <svg { ...props }>
    <path
      d="M7.8,15.5c-0.3,0-0.7-0.1-0.9-0.3l-5-4.6c-0.5-0.5-0.5-1.2,0-1.7c0.5-0.5,1.3-0.5,1.8,0l4.1,3.8l8.5-7.8  c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.2,0,1.7l-9.4,8.6C8.5,15.4,8.2,15.5,7.8,15.5"
    />
  </svg>
);

export default TickIcon;

我找不到任何方法可以完成这项工作，我安装了许多不同的svg加载程序，并在我的webpack配置中实现了它们，但是由于没有实际的<SvgIcon icon={ TickIcon } />文件，它们都无法正常工作？

这是我的svg

webpack.config

谢谢

Answer 1

您显示的代码不会导入public class FaultConsumer<T> : IConsumer<Fault<T>> { private INotificationsClient _notificationsClient; private NotificationsOptions _notificationsOptions; private ILogger _logger; public FaultConsumer(ILogger<T> logger, IOptionsSnapshot<NotificationsOptions> notificationsOptions, INotificationsClient notificationClient ) { _notificationsClient = notificationClient; _notificationsOptions = notificationsOptions.Value; _logger = logger; } public async Task Consume(ConsumeContext<Fault<T>> context) { string exceptions = ""; foreach (var ex in context.Message.Exceptions) { exceptions += $"{ex.StackTrace.ToString()};" + "\n=================>>>>>>>>====================>>>>>>>>==========================\n" + "====================== *END OF STACKTRACE* =========================\n" + "===================>>>>>>>>====================>>>>>>>>==========================\n"; } string message = $"Rabbit MQ Error:\n*Destination Address:* {context.DestinationAddress}\n*Original Message:* {context.Message.Message}\n*Exceptions:* {exceptions}"; await _notificationsClient.Slack(message); } }：

ReactDOM

如果您使用的是JSX语法，那肯定是必需的。

此外，没有为import ReactDOM from 'react-dom'指定选项。您至少需要将babel-loader声明为预设来进行编译：

@babel/preset-react

module: { rules: [ { test: /\.js$|\.jsx$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] }并不是必需的，但是会进行下编译，因此您不必担心浏览器的兼容性。

如何在带有Webpack的React应用程序中使用内嵌<svg>标签

1 个答案: