jak rozwiązać ten błąd może trzeba odpowiednią ładowarkę do obsługi tego pliku typu

Question

Dostałem ten błąd z tej biblioteki https://github.com/react-native-web-community/react-native-web-linear-gradient/

łącza błąd https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1 szczegóły błędu: moduł analizowania nie powiodło się: Nieoczekiwany token (5 : 22) Do obsługi tego typu pliku może być potrzebny odpowiedni program ładujący.

mój 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, 
    }, 
}; 

klasa którzy sprawiają problem:

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> 
    ); 
    } 
} 

statyczne defaultProps i() => zrobić błąd, więc co może być nie tak?

Answer 1

Częściowa fix >>

Kroki:

1- npm install babel babel-cli --save-dev na bibliotece

2-dodam "transpile": "babel src/index.js --out-file src/index-transpiled.js" w package.json skrypty

3- yarn transpile

4-przeniosłem plik ES5 do mojego kodu i to działało

Aktualizacja - Pełne Fix

I zawarte mój folder src i bibliotek do Babel zbyt

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

Answer 2

Myślę, że jest to spowodowane funkcją ES7. Czy masz stage-0 zainstalowany & dodany do twojego pliku .babelrc lub webpack.config.js?

Oto w jaki sposób można to zrobić:

npm i --save-dev babel-preset-stage-0 Następnie należy umieścić go w webpack.config.js pliku jak poniżej:

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

lub dodać go do .babelrc pliku:

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

UPDATE

Jak smutno wcześniej problem należy do ES7 funkcji. Wydaje się, że webpack nie może rozwiązać słowa kluczowego static w ramach modułu react-native-web-linear-gradient. Więc co zrobiłem, aby rozwiązać ten problem:

1. I skopiowany kod źródłowy z react-native-web-linear-gradient do własnego komponentu o nazwie LinearGradient. Nic w tym nie zmieniłem.
2. Zainstalowałem stage-0 i dodałem go do .babelrc, jak opisano powyżej.
3. Później zamiast używać react-native-web-linear-gradient używam mojego komponentu LinearGradient.

W rezultacie dostałem gradient na mojej stronie. git link do projektu.

Mam nadzieję, że to pomoże!