You may need an appropriate loader to handle this file type

[amorenew]

I got this error and I can't find a solution

[amorenew]

my webpack

'use strict';
    
    const autoprefixer = require('autoprefixer');
    const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
    const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
    const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
    const eslintFormatter = require('react-dev-utils/eslintFormatter');
    const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
    const getClientEnvironment = require('./env');
    const paths = require('./paths');
    
    const publicPath = '/';
    const publicUrl = '';
    const env = getClientEnvironment(publicUrl);
    
    module.exports = {
      devtool: 'cheap-module-source-map',
      entry: [
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs,
      ],
      output: {
        pathinfo: true,
        filename: 'static/js/bundle.js',
        chunkFilename: 'static/js/[name].chunk.js',
        publicPath: publicPath,
        devtoolModuleFilenameTemplate: info =>
          path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
      },
      resolve: {
        modules: ['node_modules', paths.appNodeModules].concat(
          process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
        ),
        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
        alias: {
          'babel-runtime': path.dirname(
            require.resolve('babel-runtime/package.json')
          ),
          'react-native': 'react-native-web',
    	  'react-native-linear-gradient': 'react-native-web-linear-gradient'
        },
        plugins: [
          new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
        ],
      },
      module: {
        strictExportPresence: true,
        rules: [
          {
            test: /\.(js|jsx|mjs)$/,
            enforce: 'pre',
            use: [
              {
                options: {
                  formatter: eslintFormatter,
                  eslintPath: require.resolve('eslint'),
                  baseConfig: {
                    extends: [require.resolve('eslint-config-react-app')],
                  },
                  ignore: false,
                  useEslintrc: false,
                },
                loader: require.resolve('eslint-loader'),
              },
            ],
            include: paths.appSrc,
          },
          {
            oneOf: [
              {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: 10000,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              {
                test: /\.(js|jsx|mjs)$/,
                include: paths.appSrc,
                loader: require.resolve('babel-loader'),
                options: {
                  babelrc: false,
                  presets: [require.resolve('babel-preset-react-app')],
                  cacheDirectory: true,
                },
              },
              {
                test: /\.css$/,
                use: [
                  require.resolve('style-loader'),
                  {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                    },
                  },
                  {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  },
                ],
              },
              {
                exclude: [/\.js$/, /\.html$/, /\.json$/],
                loader: require.resolve('file-loader'),
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new InterpolateHtmlPlugin(env.raw),
        new HtmlWebpackPlugin({
          inject: true,
          template: paths.appHtml,
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.DefinePlugin(env.stringified),
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      ],
      node: {
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty',
      },
      performance: {
        hints: false,
      },
    };

[amorenew]

on stackoverflow
https://stackoverflow.com/questions/48034538/how-to-solve-this-error-you-may-need-an-appropriate-loader-to-handle-this-file-t

[amorenew]

I changed in your class like this

import React, {PureComponent} from 'react';
import {View} from 'react-native';

export default class LinearGradient extends PureComponent {
  static get defaultProps() {
    return {
      start: {
        x: 0.5,
        y: 0
      },
      end: {
        x: 0.5,
        y: 1
      },
      locations: [],
      colors: []
    }
  };
  constructor(params) {
    this.state = {
      width: 1,
      height: 1
    };

  }

  measure(nativeEvent) {
    this.setState({width: nativeEvent.layout.width, height: nativeEvent.layout.height})
  }

  getAngle() {
    // Math.atan2 handles Infinity
    const angle = Math.atan2(this.state.width * (this.props.end.y - this.props.start.y), this.state.height * (this.props.end.x - this.props.start.x)) + Math.PI / 2;
    return angle + 'rad';
  };

  getColors() {
    this
      .props
      .colors
      .map((color, index) => {
        const location = this.props.locations[index];
        let locationStyle = '';
        if (location) {
          locationStyle = ' ' + location * 100 + '%';
        }
        return color + locationStyle;
      })
      .join(',')
  };

  render() {
    return (<View
        style={[
        this.props.style, {
          backgroundImage: `linear-gradient(${this
            .getAngle
            .bind(this)},${this
            .getColors
            .bind(this)})`
        }
      ]}
        onLayout={this
        .measure
        .bind(this)}>
        {this.props.children}
      </View>);
  }
}

and the error moved to SyntaxError: Unexpected token (53:12)

[amorenew]

it works by a different code

[amorenew]

the code which I replace and made it work
https://github.com/VinceBT/react-native-webfills/blob/master/react-native-linear-gradient/index.js

[necolas]

This package needs to compile its modules to ES5 and point the package.json entry file to a commonjs module.

[amorenew]

Yes it did solve my bug
Steps:
1-npm install babel babel-cli --save-dev on the library
2-I add "transpile": "babel src/index.js --out-file src/index-transpiled.js" in package.json scripts
3-yarn transpile
4-I moved the ES5 file to my code and it worked
Thank you @necolas
I wonder how could I make my code recognize static default props without converting the files?
And why chrome does not understand ES6?

[amorenew]

@necolas why we have to add alias manually in webpack config
'react-native-linear-gradient': 'react-native-web-linear-gradient',
Any npm script could do it automatically ?
https://stackoverflow.com/questions/48057127/add-alias-to-webpack-config-by-npm-script

[Minishlink]

@amorenew Thanks for the feedback.

You need to configure your webpack config accordingly. Currently, your config doesn't include this library. I would add a lib folder with the transpiled files if I was using very experimental Javascript features, but this library does not.

const modulesLoader = {
  test: /\.js$/,
  include: [
    /node_modules\/react-native-/,
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isDev,
      presets: ['react-native'],
    },
  },
};

(example)

As for adding the alias in the webpack config manually, see this just as the manual step of an eventual react-native link react-native-linear-gradient (this doesn't exist yet but it could be a thing)
This could be done with an npm script, but a package shouldn't mess with the user files like this, because it's not explicit.

[amorenew]

@Minishlink Confirmed... it is working
Thanks

// Process JS with Babel.
          {
            test: /\.(js|jsx|mjs)$/,
            include: [
              /src\/*/,
              /node_modules\/react-native-/,
            ],
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-native')],
              // ,'babel-preset-stage-0' 'babel-preset-es2015' @remove-on-eject-end This is a
              // feature of `babel-loader` for webpack (not Babel itself). It enables caching
              // results in ./node_modules/.cache/babel-loader/ directory for faster rebuilds.
              cacheDirectory: true
            }
          },