javascript - 反应中的缩略图组件问题
问题描述
我已将缩略图组件添加到我的项目中。添加后我在我的项目中看到以下错误。错误如下图所示。
这是我的 webpack.config.js 文件代码,可以帮助您理解问题。那里有一个加载程序要指定。我不知道为此指定的加载程序是什么。有人遇到同样的问题吗?
有什么帮助吗?
**/*webpack.config.js*/**
/* eslint comma-dangle: ["error",
{"functions": "never", "arrays": "only-multiline", "objects":
"only-multiline"} ] */
const webpack = require('webpack');
const pathLib = require('path');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/HelloWorld/startup/registration',
],
output: {
filename: 'webpack-bundle.js',
path: pathLib.resolve(__dirname, '../app/assets/webpack'),
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
],
module: {
rules: [
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
}
},
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
这是我调用该组件的代码:
import React, { Component } from 'react';
import Thumbnail from 'react-native-thumbnail-video';
class VideoThumnail extends Component {
render() {
return(
<div>
<Thumbnail url="https://www.youtube.com/watch?v=lgj3D5-jJ74" />
</div>
);
}
}
export default VideoThumnail;
解决方案
您只有 jsx 的规则。尝试js
在 webpack 中添加扩展
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
}
我也看到了 es6 synax,所以尝试在项目根目录中添加 .babelrc
{
"presets": ["stage-0"]
}
并安装babel-preset-env
(npm install --save babel-preset-env)
推荐阅读
- php - 如何使用 Sendgrid 调用动态 html 文件中的姓名和邮件地址?
- oracle - 如何使用 sql loader 将 10k 以上的字符加载到单个 oracle 库
- c# - Xaml 岛 - 第 3 方控件
- maven - 无法使用 maven Fabric8 将 Spring Boot 应用程序部署到 openshift 集群:TLS 内部错误
- python - 从字典中随机选择变量
- reactjs - HttpMessageNotReadableException:缺少所需的请求正文
- azure - 如何将 Azure SQL 托管实例连接到 Azure 应用服务(使用 .NET Core 2.2 编写)
- multithreading - 使用 cmake 和 make 编译时出现“Boost”库问题-“未定义的引用错误”
- python - 摆脱 OpenCV 中轮廓的重叠边界框
- javascript - 未捕获的类型错误:$(...).setDate 不是函数