2017-12-30 42 views
13

ich mit dieser Bibliothek diesen Fehler bekam https://github.com/react-native-web-community/react-native-web-linear-gradient/, wie dieser Fehler lösen können Sie einen geeigneten Lader müssen diesen Dateityp behandeln

der Fehler Link https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1 Details Fehler: Modul fehlgeschlagen analysieren: unerwartetes Token (5 : 22) Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten.

mein 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, 
    }, 
}; 

die Klasse, die das Problem machen:

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

export default class LinearGradient extends PureComponent { 
    static defaultProps = { 
    start: { 
     x: 0.5, 
     y: 0, 
    }, 
    end: { 
     x: 0.5, 
     y: 1, 
    }, 
    locations: [], 
    colors: [], 
    }; 

    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()},${this.getColors()})` }, 
     ]} 
     onLayout={this.measure} 
     > 
     {this.props.children} 
     </View> 
    ); 
    } 
} 

statischer defaultProps und() => die Fehler machen, so etwas könnte falsch sein?

+0

Können Sie klar den Text aus Ihrer Webpack-Konfiguration, könnte es das Lesen erleichtern? –

+0

@JasonAllshorn Ich entferne alle kommentierten Zeilen – amorenew

Antwort

7

Teil fix >>

Schritte:

1- npm install babel babel-cli --save-dev auf der Bibliothek

2-I hinzufügen "transpile": "babel src/index.js --out-file src/index-transpiled.js" in package.json Skripte

3- yarn transpile

4-I bewegt, um die ES5-Datei in meinem Code und es funktionierte

Update - Volle Fix

I Ordner meine src enthalten und die Bibliotheken auch babel

// Process JS with Babel. 
      { 
      test: /\.(js|jsx|mjs)$/, 
      include: [ 
       /src\/*/, 
       /node_modules\/react-native-/, 
      ], 
      loader: require.resolve('babel-loader'), 
      options: { 
       babelrc: false, 
       presets: [require.resolve('babel-preset-react-native')], 
       cacheDirectory: true 
      } 
      }, 
3

Ich denke, das ist wegen ES7 Funktion. Haben Sie stage-0 installiert & zu Ihrer .babelrc oder webpack.config.js Datei hinzugefügt?

Hier ist, wie Sie es tun können:

npm i --save-dev babel-preset-stage-0 Und dann sollten Sie es in webpack.config.js Datei wie unten enthalten:

loader: "babel-loader", // or just "babel" 
query: { 
    presets: [ <other presets>, 'stage-0'] 
} 

Oder fügen Sie es .babelrc Datei:

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

UPDATE

Wie ich früher traurig das Problem gehört ES7 Feature. Scheint wie webpack kann static Schlüsselwort innerhalb react-native-web-linear-gradient Modul nicht auflösen. Also, was ich tat, um dieses Problem zu beheben:

  1. Ich kopierte den Quellcode von react-native-web-linear-gradient in meine eigene Komponente LinearGradient genannt. Ich habe daran nichts geändert.
  2. Ich installierte stage-0 und fügte es zu .babelrc wie ich oben beschrieben.
  3. Später anstelle von react-native-web-linear-gradient verwende ich meine LinearGradient Komponente.

Als Ergebnis habe ich Gradienten auf meiner Seite. git Projektlink.

Hoffe, es wird helfen!

+0

Ich schob eine Probe meines Problems hier https://github.com/amorenew/Seite – amorenew

+0

Wenn Sie mir geholfen haben, gebe ich Ihnen 50 Punkte von stackoverflow bounty – amorenew

+0

Reson Ich ersetzte Ihren Import von ' react-native-web-linear-gradient ', und immer noch nicht beheben – amorenew

Verwandte Themen