Thumbnail component issue in react

Question

I have added the thumbnail component into my project. I got to see the following error in my project after adding it. The error is shown in the following image.

Here's my webpack.config.js file code which might help you on understanding the issue. There's a loader to be specified there. I don't know what's the specified loader for this. Anyone faced the same issue?

Any help?

**/*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
}

And Here's the code where I called the component:

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;

Sasha Kos · Accepted Answer · 2018-06-07 14:01:11Z

1

You have a rule only for jsx. Try to add js extension in webpack also

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

Also i see es6 synax, so try to add .babelrc in project root with this

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

and install babel-preset-env (npm install --save babel-preset-env)

edited Jun 7, 2018 at 14:01

answered Jun 7, 2018 at 13:28

Sasha Kos

2,6182 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sasha Kos Over a year ago

i also see that error in node_modules, but you have exclude it. So try to remove this line also exclude: /node_modules/

Subhojit Over a year ago

okk.. after adding this thing it's showing this now - Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module.rules[3] has an unknown property 'presets'. These properties are valid: object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }

Sasha Kos Over a year ago

you should add presets in .babelrc file. Please create it and put that code there

Subhojit Over a year ago

in the .babelrc file I'm already having { "presets": ["es2015", "stage-2", "react"] }

Sasha Kos Over a year ago

than try to change "stage-2" to "stage-0"

|

Collectives™ on Stack Overflow

Thumbnail component issue in react

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related