web-dev-qa-db-ja.com

修正方法このファイルタイプを処理するには、適切なローダーが必要な場合があります。現在、Webpack 4でこのファイルを処理するように設定されているローダーはありません。

プラグインを修正しようとしていますが、そのままではWebpackできないようです。もともとはwebpack v2とbabel 6を使用していたので、wepack 4とbabel 7に更新することにしました。私が得るエラーは

ERROR in ./src/index.js 42:8
Module parse failed: Unexpected token (42:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     if (this.props.image && this.props.imageClass){
|       return(
>         <img
|           src={this.props.image}
|           className={this.props.imageClass}
 @ multi @babel/polyfill ./src/index.js main[1]

私のwebpackファイルは

    var path = require('path');
module.exports = {
    mode: 'development',
  entry: ['@babel/polyfill','./src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: ['babel-loader'] 
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use:['style-loader','css-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react' 
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

リポジトリはここにあります https://github.com/shorif2000/react-js-banner

webpackbabelbabel-loader
1
shorif2000

問題はwebpackですわからない ReactのJSX構文なので、このファイルタイプを適切に処理できません。これを修正するには、JSXをネイティブJavaScriptに変換するようにWebpackローダーを設定する必要があります。これを行うには、babelの_babel-loader_を利用して、適切なbabelプリセット、つまり_"@babel/preset-react"_プリセットをインストールする必要があります。

プリセットは、特定の言語機能をサポートするために使用されるプラグインのセットです。プリセットを使用して、ブラウザーにまだ実装されていない最新のJavaScript機能を利用します。

プリセットは、ブラウザーが理解できるネイティブJavaScriptと互換性を持つようにソースコードと構文を変換します。たとえば、_@babel/preset-react_を使用すると、Reactコンポーネントを定義するために一般的に使用されるJSX（JavaScript as XML）スタイルコードを記述できますが、JSXはそうではありませんブラウザによって自然に理解されます。

次の方法を試して、これらの手順で問題が解決するかどうか確認してください。

  1. Babelの反応プリセットをインストールします。

    _npm install --save-dev @babel/preset-react_

  2. _.babelrc_（または_package.json_）ファイルに、プリセットとプラグインのBabel構成がある場所に応じて、reactのJSX固有の構文を処理する新しいプリセットを追加します。

注：_.babelrc_ファイルがない場合は、プロジェクトのルートディレクトリにファイルを追加して、次の内容を指定します。

。babelrc：

_{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
_

  1. _webpack.config.js_ファイルのrulesセクションを更新して、適切なローダーを使用します。

    { test: /\.(js|jsx)$/, include: path.resolve(__dirname, 'src'), exclude: /(node_modules|bower_components|build)/, use: ['babel-loader'] }

注：_webpack.config.js_にresolveセクションを追加して、プロジェクトでのモジュールの解決方法を構成します。以下に沿ったもの：

_ resolve: {
    extensions: ['*', '.js', '.jsx']
  },
_

完全を期すために、Reactを使用して単純なWebアプリケーションを作成し、webpack-dev-serverから提供しました。以下に貼り付けたのは、私の_webpack.config.js_コンテンツ全体です。

_module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development'
};
_

うまくいけば、それが役立ちます！

3
Nathan