ওয়েবপ্যাক জেসেক্স নামের ফাইলের মডিউলটি খুঁজে পাবে না

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

ওয়েবপ্যাক 2 এর জন্য, খালি এক্সটেনশনটি ছেড়ে দিন।

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

Comments

Webpack 4 জন্য, আমি দেখা গেছে যে আমি এক এই করা প্রয়োজন ruleগুলি যে অধীন তালিকাভুক্ত করা হয় module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }

— জনাব রজার্স

@ এমগ্রোজ আমি এর জন্য সর্বত্র অনুসন্ধান করেছি! আমি আমার টুপি আপনাকে টিপ দিচ্ছি স্যার!

— ফ্রেডেরিক পিটারসন

আপনাকে অনেক ধন্যবাদ! আমি ঘন্টার পর ঘন্টা এটি খুঁজছিলাম!

— কেভিনএইচ

@ মিরাজরা আপনার মন্তব্যের উত্তরে প্রচারের কথা বিবেচনা করুন :)

— আলেকজান্ডার ভারভিজক

ধন্যবাদ @ আলেকজান্ডার ভারুইজক। ভাল ধারণা. আমার কী করা উচিত তা মনে রাখতে আমি নিজেই এই মন্তব্যে ফিরে এসেছি :)

— মিঃ রজারস

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

ওয়েবপ্যাক ৩.৪-এ, আপনি খালি মান সহ রেজাল্ট. এক্সটেনশন ব্যবহার করতে পারবেন না। এটি সংকলনে একটি ব্যতিক্রম ঘটায়: "অবৈধ কনফিগারেশন অবজেক্ট Web

— জুলিও স্পাডার

Answer 3

পাঠযোগ্যতার স্বার্থে এবং কপি-পেস্ট কোডিং। এখানে থেকে webpack 4 উত্তর জনাব রজার্স এই থ্রেড মন্তব্য নেই।

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

Comments

4.36.1 থেকে যথাযথ হতে। এখানে ডক ওয়েবপ্যাক.জেএস.আর.জি.

— আলেক্সি বেরেজকিন

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/configration/resolve/#resolve-extions

Answer 6

যাচাই করুন, যে bundle.js ত্রুটি ছাড়াই উত্পন্ন করা হচ্ছে (টাস্ক রানার লগ চেক করুন)।

কম্পোনেন্ট রেন্ডার ফাংশনে এইচটিএমএলে সিনট্যাক্স ত্রুটির কারণে আমি 'ফাইলটি জেএসএক্স নামক মডিউলটি খুঁজে পাচ্ছি না' পাচ্ছিলাম।

Answer 7

আমি আমার সার্ভারটি পুনরায় আরম্ভ করার সময় এই সমস্যাটিকে সংশোধন করে। সহজভাবে চালান

npm start