अगर jsx नाम की फाइल में वेबपैक मॉड्यूल नहीं मिल रहा है

Question

जैसा कि मैं 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, तो वेबपैक index.jsxमॉड्यूल को ढूंढने में नहीं कहेगा App, लेकिन अगर मैंने मॉड्यूल ऐप को नाम दिया है App.js, तो यह इस मॉड्यूल को ढूंढ लेगा और अच्छी तरह से काम करेगा।

तो, मैं इसके बारे में भ्रमित हूँ। मेरे में webpack.config.js, मैंने test: /\.jsx?$/फ़ाइल की जाँच करने के लिए लिखा है, लेकिन नाम क्यों *.jsxनहीं मिला?

Answer 1

वेबपैक .jsxफ़ाइलों को संक्षेप में हल करने के लिए नहीं जानता है । आप अपने एप्लिकेशन में फ़ाइल एक्सटेंशन निर्दिष्ट कर सकते हैं ( import App from './containers/App.jsx';)। जब आप स्पष्ट रूप से jsx एक्सटेंशन के साथ फ़ाइल आयात करते हैं तो आपका वर्तमान लोडर परीक्षण बेबल लोडर का उपयोग करने के लिए कहता है।

या, आप उन .jsxएक्सटेंशनों में शामिल कर सकते हैं जिन्हें वेबपैक को स्पष्ट घोषणा के बिना हल करना चाहिए:

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']
}

Comments

वेबपैक 4 के लिए, मैंने पाया कि मुझे इसे उस एक में डालने की ज़रूरत है ruleजो नीचे सूचीबद्ध थे module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }

— mr rogers

@mrrogers मैंने इसके लिए हर जगह खोज की है! मैं अपनी टोपी तुझे सौंपता हूं सर!

— फ्रेडरिक पीटरसन

बहुत बहुत धन्यवाद! मैं घंटों से उसकी तलाश कर रहा था!

— केविनH

@mrrogers एक उत्तर के लिए अपनी टिप्पणी को बढ़ावा देने पर विचार करें :)

— अलेक्जेंडर वरविज्क

धन्यवाद @AlexanderVarwijk अच्छा विचार। मैं खुद इन टिप्पणियों को याद करने के लिए वापस चला गया हूं कि मुझे क्या करना था :)

— श्री रोजर्स

Answer 2

उपरोक्त उत्तर में जोड़ना,

संकल्प संपत्ति जहां सभी फ़ाइल प्रकारों आप अपने आवेदन में उपयोग कर रहे हैं जोड़ने के लिए है।

मान लें कि आप .jsx या .es6 फ़ाइलों का उपयोग करना चाहते हैं ; आप खुशी-खुशी उन्हें यहां शामिल कर सकते हैं और वेबपैक उनका समाधान करेगा:

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

यदि आप रिज़ॉल्यूशन प्रॉपर्टी में एक्सटेंशन जोड़ते हैं, तो आप उन्हें आयात विवरण से हटा सकते हैं:

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

Comments

WebPack 3.4 में, आप रिज़ॉल्यूशन का उपयोग नहीं कर सकते हैं। मूल्य के साथ तनाव खाली है। यह संकलन में एक अपवाद का कारण होगा: "अमान्य कॉन्फ़िगरेशन ऑब्जेक्ट। वेबपैक को कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग करके आरंभीकृत किया गया है जो API स्कीमा से मेल नहीं खाता। - configuration.resolve.extensions [0] खाली नहीं होना चाहिए।"

— जूलियो स्पैडर

Answer 3

पठनीयता और कॉपी-पेस्ट कोडिंग के हित में। इस धागे में mr rogers टिप्पणी से वेबपैक 4 का उत्तर यहां दिया गया है ।

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

Comments

4.36.1 से अचूक है। यहाँ doc webpack.js.org/configuration/module/#ruleresolve

— Alexey Berezkin

Answer 4

जैसा कि वेबपैक्स 4 के लिए @ मैक्स के उत्तर पर टिप्पणियों में उल्लेख किया गया था, मैंने पाया कि मुझे इसे उन नियमों में से एक में रखने की आवश्यकता थी जो मॉड्यूल के तहत सूचीबद्ध थे, जैसे:

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

Answer 5

मैं इसी तरह के मुद्दे का सामना कर रहा था, और संकल्प संपत्ति का उपयोग कर हल करने में सक्षम था ।

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

Answer 6

सत्यापित करें, कि बंडल। जेएस त्रुटियों के बिना उत्पन्न हो रहा है (टास्क रनर लॉग की जांच करें)।

मुझे घटक रेंडर फ़ंक्शन में html में वाक्यविन्यास त्रुटि के कारण 'jsx नाम की फाइल' मॉड्यूल नहीं मिल रही थी।