web-dev-qa-db-ja.com

このエラーを解決する方法このファイルタイプを処理するには、適切なローダーが必要な場合があります

このライブラリでこのエラーが発生しました https://github.com/react-native-web-community/react-native-web-linear-gradient/

エラーリンク https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1 エラーの詳細：モジュールの解析に失敗しました：予期しないトークン（ 5:22）このファイルタイプを処理するには、適切なローダーが必要な場合があります。

私のウェブパック：

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

問題を起こすクラス：

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

static defaultPropsおよび（）=>バグを作成して、何が間違っている可能性がありますか？

reactjsreact-nativewebpackbabelreact-native-web
14
amorenew

部分修正 >>

手順：

1 -npm install babel babel-cli --save-devライブラリー

2-Iを追加"transpile": "babel src/index.js --out-file src/index-transpiled.js" in package.jsonスクリプト

3 -yarn transpile

4-ES5ファイルを自分のコードに移動し、動作しました

更新-完全修正

I 含まれている srcフォルダーと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
            }
          },
9
amorenew

これはES7機能のためだと思います。 stage-0がインストールされ、.babelrcまたはwebpack.config.jsファイルに追加されていますか？

ここでそれを行う方法：

npm i --save-dev babel-preset-stage-0そして、以下のようにwebpack.config.jsファイルに含める必要があります。

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

または、.babelrcファイルに追加します。

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

[〜＃〜] update [〜＃〜]

前にも言ったように、この問題はES7機能に属します。 webpackはreact-native-web-linear-gradientモジュール内のstaticキーワードを解決できないようです。この問題を解決するために私がしたこと：

  1. ソースコードをreact-native-web-linear-gradientからLinearGradientという独自のコンポーネントにコピーしました。私はその中の何も変更しませんでした。
  2. 上記のようにstage-0をインストールし、.babelrcに追加しました。
  3. 後でreact-native-web-linear-gradientを使用する代わりに、LinearGradientコンポーネントを使用します。

その結果、ページに勾配ができました。 git プロジェクトリンク。

それが役立つことを願っています！

3
The Reason

これは、画像（pngs、svgs、jpgsなど）のように load asset にwebpackを設定する方法です：

  1. npm install --save-dev file-loader
  2. これをwebpack.config.jsの下のmodule.exports.rulesの下に追加します。
{
  test: /\.(png|svg|jpg|gif)$/,
  use: ["file-loader"]
}

ここで、'./my-image.png'からMyImageをインポートすると、その画像が処理されて出力ディレクトリに追加され、MyImage変数には処理後のその画像の最終URLが含まれます。

2
Menelaos Kotsollaris