"आपको इस फ़ाइल प्रकार को संभालने के लिए एक उपयुक्त लोडर की आवश्यकता हो सकती है" वेबपैक और बैबल के साथ

Question

मैं ईएस 6 संपत्तियों को संकलित करने के लिए बैबेल के साथ वेबपैक का उपयोग करने की कोशिश कर रहा हूं, लेकिन मुझे निम्न त्रुटि संदेश मिल रहा है:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

यहाँ मेरा वेबपैक विन्यास कैसा दिखता है:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

यहाँ मिडलवेयर स्टेप है जो वेबपैक का उपयोग करता है:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

मेरी सभी index.js फ़ाइल प्रतिक्रिया आयात कर रही है, लेकिन ऐसा लगता है कि 'बैबल-लोडर' काम नहीं कर रहा है।

मैं 'बेबल-लोडर' 6.0.0 का उपयोग कर रहा हूं।

Comments

मुझे भी यही तकलीफ़ है। कोलाहल-पूर्व निर्धारित-es2015 स्थापित किया गया है और अभी तक यह अभी भी एक ReactDOM.render () कॉल में JSX का उपयोग कर के साथ मुद्दों है: रों

— SomethingOn

आपकी फ़ाइल का एक्सटेंशन क्या है? क्या वे js फाइलें या jsx फाइलें हैं? आपका लोडर केवल jsx एक्सटेंशन वाली फाइलों पर विचार करता है, जो समस्या हो सकती है

— क्यूबक

इस लिंक पर आपकी समस्या 100% हल हो जाएगी [ stackoverflow.com/questions/50149729/…

— Mehrdad Masoumi

इस लिंक पर आपकी समस्या अगले सीजे के लिए

— मेहरदाद मसुमी

Answer 1

आपको es2015पूर्व निर्धारित स्थापित करने की आवश्यकता है :

npm install babel-preset-es2015

और फिर कॉन्फ़िगर करें babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

Comments

मेरे पास प्रीसेट स्थापित है और बेबल-लोडर भी स्थापित है। यह अभी भी वही त्रुटि दे रहा है

— उमंग गुप्ता

@ यूजी_ आपको एक अलग सवाल पूछना होगा। हमें आपका पूरा कॉन्फ़िगरेशन और पूर्ण त्रुटि संदेश देखना होगा।

— loganfsmyth

@UG_ क्या आपको इसका हल मिला?

— सरसरंगलगट ran

Answer 2

सुनिश्चित करें कि आपके पास es2015 बैबेल प्रीसेट स्थापित है।

एक उदाहरण पैकेज है। आगजनी की निर्भरता है:

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

अब अपने वेबपैक के विन्यास में बैबल-लोडर को कॉन्फ़िगर करें:

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }

अपने प्रोजेक्ट के मूल में एक .babelrc फ़ाइल जोड़ें जिसमें नोड मॉड्यूल हैं:

{
  "presets": ["es2015", "stage-0", "react"]
}

और जानकारी:

• babeljs.io - वेबपैक के साथ babel का उपयोग करना

• babeljs.io - docs on .babelrc

• प्रतिक्रिया-वेबपैक-कुकबुक - वेबपैक के साथ प्रतिक्रिया को कॉन्फ़िगर करें

• एक प्रतिक्रिया-वेबपैक-उदाहरण रेपो

Comments

। babelrc फ़ाइल वही है जो मुझे याद आ रही थी, धन्यवाद! यह पूरा ट्यूटोरियल है, स्वीकृत उत्तर केवल आपको अब तक मिलता है।

— माइक

पक्ष-जानकारी: विकल्पों में "चरण -०" के बारे में इतना निश्चित नहीं है (इसे भी .babelrc में कॉन्फ़िगर किया जा सकता है): कुछ विशेषताएं इसे आधिकारिक ES-Standard में नहीं बना सकती हैं, इसलिए मैं आमतौर पर अधिक सुरक्षित "चरण -3" का उपयोग करता हूं।

— क्रिस्टोफ कैटलिन

Answer 3

यदि आप वेबपैक> 3 का उपयोग कर रहे हैं, तो आपको केवल स्थापित करने की आवश्यकता है babel-preset-env, क्योंकि इस प्रीसेट में es2015, es2016 और es2017 हैं।

var path = require('path');
let webpack = require("webpack");

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

यह मेरी .babelrcफाइल से इसका विन्यास चुनता है :

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}

Answer 4

अपडेट और समयोपरि परिवर्तनों के कारण, संस्करण संगतता कॉन्फ़िगरेशन के साथ समस्याएँ पैदा करने लगती है।

आपका webpack.config.js इस तरह होना चाहिए कि आप यह भी कॉन्फ़िगर कर सकें कि आप कभी कैसे फिट होते हैं।

var path = require('path');
var webpack = require("webpack");

module.exports = {
  entry: './src/js/app.js',
  devtool: 'source-map',
    mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ["babel-loader"]
    },{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  output: {
    path: path.resolve(__dirname, './src/vendor'),
    filename: 'bundle.min.js'
  }
};

यह नोटिस करने के लिए एक और बात यह है कि यह आर्ग का बदलाव है, आपको बेबल डॉक्यूमेंटेशन पढ़ना चाहिए https://babeljs.io/docs/en/presets

.babelrc

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

NB: आपको यह सुनिश्चित करना होगा कि आपके पैकेज में उपरोक्त @ babel / preset-env & @ babel / प्रीसेट-रिएक्शन स्थापित हैं।

Comments

जोड़ना @babel/preset-reactमेरे लिए तय की।

— kyw

Answer 5

बाबेल टीम अद्यतन:

हम सुपर synt उत्साहित हैं कि आप ES2015 सिंटैक्स का उपयोग करने की कोशिश कर रहे हैं, लेकिन वार्षिक प्रीसेट जारी रखने के बजाय, टीम बेबल-प्रीसेट-एनवी का उपयोग करने की सिफारिश करती है। डिफ़ॉल्ट रूप से, यह ES2015 + से ES5 संकलित करने के लिए पिछले प्रीसेट के समान व्यवहार है

यदि आप Babel संस्करण 7 का उपयोग कर रहे हैं, तो आपको अपने कॉन्फ़िगरेशन में npm install @ babel / preset -env और "presets": ["@ babel / preset-env"] चलाने की आवश्यकता होगी .babelrc।

यह करने के लिए सभी नवीनतम सुविधाओं संकलन होगा es5 transpiled कोड:

आवश्यक शर्तें :

1. वेबपैक 4+
2. बैबल 7+

चरण -1:: npm स्थापित करें - save-dev @ babel / preset-env

चरण -2:JSX es5 कोबाइल को कोड संकलित @babel/preset-reactकरने के लिए रिएक्शन jsxएक्सटेंशन फाइल को देशी ब्राउज़र समझने योग्य कोड में बदलने के लिए पैकेज प्रदान करता है।

चरण -3: npm स्थापित करें - save-dev @ babel / preset-reaction

चरण -4:.babelrc अपनी परियोजना के रूट पथ पथ के अंदर फ़ाइल बनाएँ जहाँ webpack.config.jsमौजूद है।

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

चरण -5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

Answer 6

टाइपस्क्रिप्ट का उपयोग करते समय:

मेरे मामले में मैंने अपने दस्तावेज़ पृष्ठ से वेबपैक v3.11 के नए सिंटैक्स का उपयोग किया। मैंने अभी अपनी वेबसाइट पर css और स्टाइल लोडर कॉन्फ़िगरेशन फॉर्म की प्रतिलिपि बनाई है। टिप्पणी कोड (नया एपीआई) इस त्रुटि का कारण बनता है, नीचे देखें।

  module: {
        loaders: [{
                test: /\.ts$/,
                loaders: ['ts-loader']
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
        // ,
        // rules: [{
        //     test: /\.css$/,
        //     use: [
        //         'style-loader',
        //         'css-loader'
        //     ]
        // }]
    }

इसे लगाने का सही तरीका है:

    {
        test: /\.css$/,
        loaders: [
            'style-loader',
            'css-loader'
        ]
    }

लोडर संपत्ति की सरणी में।

Answer 7

यह एक स्पिन के लिए मुझे फेंक दिया। कोणीय 7, वेबपैक मुझे यह लेख मिला इसलिए मैं इस लेख को श्रेय देना चाहता हूं https://www.edc4it.com/blog/web/helloworld-angular2.html

समाधान क्या है: // आपके घटक फ़ाइल पर। टेम्प्लेट के रूप में टेम्प्लेट का उपयोग करें इसे टेक्स्ट टेम्प्लेट के रूप में माना जाएगा: आवश्यकता ('./ process.component.html')

कर्म के लिए यह व्याख्या करने के लिए npm स्थापित करें html-loader - save-dev {test: /.html$/, उपयोग करें: "html-loader"},

आशा है कि यह किसी की मदद करता है