Проблема с компонентом эскиза в React

Я добавил в свой проект компонент эскиза. После добавления я увидел в своем проекте следующую ошибку. Ошибка показана на следующем изображении. Проблема с компонентом эскиза в React

Вот мой код файла 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.info('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.info('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://thewikihow.com/video_lgj3D5-jJ74" />
       </div>
     );
   }
}

export default VideoThumnail;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
117
1

Ответы 1

У вас есть правило только для jsx. Попробуйте также добавить расширение js в webpack

 {
   test: /\.(js|jsx)$/,
   use: 'babel-loader',
   exclude: /node_modules/,
 }

Также я вижу синтаксис es6, поэтому попробуйте добавить .babelrc в корень проекта с помощью этого

{
  "presets": ["stage-0"]
}

и установите babel-preset-env (npm install --save babel-preset-env)

Я также вижу эту ошибку в node_modules, но вы ее исключили. Так что попробуйте удалить и эту строчку exclude: /node_modules/

Sasha Kos 07.06.2018 16:02

хорошо .. после добавления этой штуки он показывает это сейчас - Неверный объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, не соответствующего схеме API. - configuration.module.rules [3] имеет неизвестное свойство presets. Эти свойства действительны: object {enforce ?, exclude ?, include ?, Issueer ?, loader ?, loaders ?, oneOf ?, options ?, parser ?, query ?, resource?, ResourceQuery ?, compiler ?, rules?, Test ?, использовать? }

Subhojit 07.06.2018 16:07

вам следует добавить presets в файл .babelrc. Пожалуйста, создайте его и поместите туда этот код

Sasha Kos 07.06.2018 16:10

в файле .babelrc у меня уже есть {"пресеты": ["es2015", "этап-2", "реагировать"]}

Subhojit 07.06.2018 16:12

чем пытаться изменить "стадия-2" на "стадия-0"

Sasha Kos 07.06.2018 16:20

да, я изменился. Теперь он показывает это - Ошибка сборки модуля: Ошибка: не удалось найти предустановку «stage-0» относительно каталога «/ home / subhojit / rails-application / client» в / home / subhojit / rails-application / client / node_modules / babel-c‌ ore / lib / transformati в / file / options / opti on-manager.js: 293: 19

Subhojit 08.06.2018 08:07

установить babel-preset-env (npm install --save babel-preset-env)

Sasha Kos 08.06.2018 09:10

И удалите exclude: / node_modules / в конфигурации webpack. Это должно работать

Sasha Kos 08.06.2018 09:12

Пробовал только что мужик. Это не работает. Теперь я получаю целую кучу ошибок компонентов.

Subhojit 08.06.2018 10:21

Другие вопросы по теме