0

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. enter image description here

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;
Subhojit
  • 1,389
  • 8
  • 19
  • 33

1 Answers1

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)

Sasha Kos
  • 2,480
  • 2
  • 22
  • 37
  • i also see that error in node_modules, but you have exclude it. So try to remove this line also `exclude: /node_modules/` – Sasha Kos Jun 07 '18 at 14:02
  • 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? }** – Subhojit Jun 07 '18 at 14:07
  • you should add `presets` in .babelrc file. Please create it and put that code there – Sasha Kos Jun 07 '18 at 14:10
  • in the .babelrc file I'm already having **{ "presets": ["es2015", "stage-2", "react"] }** – Subhojit Jun 07 '18 at 14:12
  • than try to change "stage-2" to "stage-0" – Sasha Kos Jun 07 '18 at 14:20
  • yes, I changed. Now it's showing this - **Module build failed: Error: Couldn't find preset "stage-0" relative to directory "/home/subhojit/rails-application/client" at /home/subhojit/rails-application/client/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19** – Subhojit Jun 08 '18 at 06:07
  • install babel-preset-env (npm install --save babel-preset-env) – Sasha Kos Jun 08 '18 at 07:10
  • And remove exclude: /node_modules/, in webpack config. This should work – Sasha Kos Jun 08 '18 at 07:12
  • Tried this just now man. It's not working. Now, I'm getting whole bunch of component errors. – Subhojit Jun 08 '18 at 08:21