首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react中出现缩略图组件问题

react中出现缩略图组件问题
EN

Stack Overflow用户
提问于 2018-06-07 21:24:22
回答 1查看 125关注 0票数 0

我已经将缩略图组件添加到我的项目中。在添加项目后,我在项目中看到了以下错误。错误如下图所示。

这是我的webpack.config.js文件代码,它可能会帮助您理解这个问题。那里有一个要指定的加载器。我不知道为这个指定的加载程序是什么。有没有人遇到过同样的问题?

有什么帮助吗?

代码语言:javascript
运行
复制
**/*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
}

下面是我调用组件的代码:

代码语言:javascript
运行
复制
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;
EN

回答 1

Stack Overflow用户

发布于 2018-06-07 21:28:23

您有一个仅适用于jsx的规则。也尝试在webpack中添加js扩展

代码语言:javascript
运行
复制
 {
   test: /\.(js|jsx)$/,
   use: 'babel-loader',
   exclude: /node_modules/,
 }

我还看到了es6同步,所以尝试用下面的命令在项目根目录中添加.babelrc

代码语言:javascript
运行
复制
{
  "presets": ["stage-0"]
}

并安装babel-preset-env (npm install --save babel-preset-env)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50742426

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档