jsxという名前のファイルの場合、webpackはモジュールを見つけることができません


107

このようにwebpack.config.jsを書くと

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

そしてindex.jsx私はreactモジュールをインポートしますApp

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

でモジュールアプリに名前を付けた場合App.jsx、webpackは「index.jsxモジュールAppが見つかりません」と表示しますが、名前付きモジュールアプリに名前を付けた場合App.js、このモジュールが見つかり、適切に機能します。

だから、私はそれについて混乱しています。私のではwebpack.config.jstest: /\.jsx?$/チェックファイルに書き込みましたが、なぜnamed *.jsxが見つからないのですか?

ここに画像の説明を入力してください

回答:


214

Webpackは.jsxファイルを暗黙的に解決することを知りません。アプリでファイル拡張子を指定できます(import App from './containers/App.jsx';)。現在のローダーテストでは、jsx拡張子を持つファイルを明示的にインポートするときにbabelローダーを使用するように指示されています。

または、.jsx明示的な宣言なしでwebpackが解決する必要がある拡張機能に含めることができます。

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

Webpack 2の場合は、空の拡張機能を省略します。

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

63
WebPACKの4のために、私は私がの一つでこれを置くために必要なことがわかったruleの下にリストされていたのmodule...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
ミスターロジャース

1
@mrrogers私はこれをどこでも検索しました!私はあなたに私の帽子を傾けます!
Frederik Petersen

1
どうもありがとうございました!何時間も探していました!
KevinH 2018年

1
@mrrogers回答へのコメントの宣伝を検討してください:)
Alexander Varwijk

@AlexanderVarwijkに感謝します。良いアイデア。私自身、これらのコメントに戻って、私がしなければならなかったことを思い出しました:)
mr rogers '10

24

上記の答えに加えて、

解決あなたがあなたのアプリケーションで使用しているすべてのファイルタイプを追加する必要がどこ特性があります。

.jsxまたは.es6ファイルを使用するとします。ここにそれらを含めると、webpackが解決します。

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

resolveプロパティに拡張機能を追加する場合は、それらをimportステートメントから削除できます。

import Hello from './hello'; // Extensions removed
import World from './world';

コーヒースクリプトが検出されるようにする場合など、他のシナリオでは、次のようにテストプロパティを構成する必要があります。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

7
WebPack 3.4では、値が空のresolve.extensionは使用できません。これにより、コンパイルで例外が発生します。「無効な構成オブジェクト。APIスキーマと一致しない構成オブジェクトを使用してWebpackが初期化されました。configuration.resolve.extensions[0]は空にできません。」
Julio Spader

19

読みやすさとコピーペーストのコーディングのために。これは、このスレッドでのmr rogers コメントからのwebpack 4回答です。

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}


10

@maxからの回答に関するコメントで述べたように、webpack 4の場合、次のように、これをモジュールの下にリストされているルールの1つに含める必要があることがわかりました。

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

1

私は同様の問題に直面しており、解決プロパティを使用して解決することができました。

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

ご覧のとおり、そこで.jsxを使用して、次のエラーを解決しました

./src/app.jsxモジュールのエラーが見つかりません:エラー:解決できません

参照用:https : //webpack.js.org/configuration/resolve/#resolve-extensions


0

bundle.jsがエラーなしで生成されていることを確認します(タスクランナーログを確認します)。

コンポーネントレンダー関数のHTMLの構文エラーが原因で、「jsxという名前のファイルの場合、モジュールが見つかりません」というメッセージが表示されました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.