प्रीसेट फ़ाइलों को ऑब्जेक्ट निर्यात करने की अनुमति नहीं है

Question

मेरे पास एक हिंडोला फ़ाइल है जिसमें मैं प्राप्त करना index.jsऔर निर्माण करना चाहता हूं block.build.js, इसलिए मेरी webpack.config.jsहै:

var config = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'block.build.js',
  },
  devServer: {
    contentBase: './Carousel'
  },
  module : {
    rules : [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  }
};
module.exports = config;

package.jsonजो मैं उपयोग के नीचे है:

{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "lodash": "^4.17.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-swipeable": "^4.2.0",
    "styled-components": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  },
  "author": "brad traversy",
  "license": "ISC"
}

... लेकिन मुझे यह त्रुटि संदेश मिला:

ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

क्या किसी को पता है यह कैसे हल करना है?

Comments

valentinog.com/blog/babel ने मेरी मदद की।

— रयान

Answer 1

आप Babel 6 और Babel 7 के संयोजन का उपयोग कर रहे हैं। संस्करणों में संगतता की कोई गारंटी नहीं है:

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

होना चाहिए

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

तथा

    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-class-properties']
    }

होने वाला

    query: {
      presets: ['@babel/react', '@babel/es2015'],
      plugins: ['@babel/proposal-class-properties']
    }

मैं भी उलझन में हूँ क्योंकि आपने @babel/proposal-class-propertiesअपने में उल्लेख नहीं किया था package.json, लेकिन यह मानते हुए कि यह वहाँ है इसे भी अद्यतन किया जाना चाहिए।

Comments

मैं इस बात पर प्रकाश babel-loadernpm install --save-dev babel-loader@^7

— डालूंगा

फिर कैसे पैकेज प्रदान करें जो केवल 6 या 7 के हैं? मैं सभी समाधानों से गुज़रा और फिर यह मुझसे @ बाबेल / कोर या बैबल-कोर पूछता है। क्या पैकेज को मैन्युअल रूप से बदला जा सकता है?

— कारमाइन टैम्बस्किया

फिर यह कैसे सुनिश्चित करें कि एक पैकेज केवल या तो 6 या 7 का है? मैं सभी समाधानों से गुज़रा और फिर यह मुझसे @ बाबेल / कोर या बैबल-कोर पूछता है। मेरा मानना ​​है कि यह अभी भी नोड-मॉड्यूल के साथ करना है ताकि कैश मुद्दे के लिए किसी तरह गलत बबल को संदर्भित किया जा सके। मैंने उन्हें भाग्य के बिना मैन्युअल रूप से बदलने की कोशिश की

— कारमाइन टैम्बस्किया

यह स्थिति अभी भी है। अब तक यह टूल github.com/babel/babel-upgrad एक तरीका है जब उन्नयन के लिए अधिक निर्भरता प्रस्तुत की जाती है

— कार्माइन टैम्बस्किया

मुझे अभी भी इस समस्या के साथ समस्या हो रही है कि क्या कोई मेरी मदद कर सकता है? मैं एक एक्सप्रेस सर्वर पर अपना रिएक्शन ऐप (वेबपैक का उपयोग करता है) चलाने की कोशिश कर रहा हूं। यहाँ मेरा github repo ( github.com/smthmelv/my-react-app/tree/addExpressJS ) है, किसी भी मदद की बहुत सराहना की जाएगी।

— डारन्ज़ी

Answer 2

यह मेरे लिए हुआ और मेरे लिए एक सरल उपाय था अनइंस्टॉल babel-loader@8^और @babel/core:

npm uninstall --save babel-loader
npm uninstall --save @babel/core

... और फिर संस्करण 7 को स्थापित करने के लिए babel-loader:

npm install --save-dev babel-loader@^7

Comments

यह वास्तव में काम किया, इस जानकारी के लिए बहुत बहुत धन्यवाद। मैं भी babel / core वर्जन 7 और babel-loader वर्जन 8 का उपयोग कर रहा था। इसलिए मैं अभी वर्जन 8 को अनइंस्टॉल करता हूं और वर्जन 7 को कमांड के साथ इंस्टॉल करता npm install --save-dev babel-loader@^7

— हूं

यह मेरे लिए तय है, हालांकि मुझे कोई अन्य जेएस फ्रेमवर्क स्थापित नहीं मिला है।

— नथानिएल फ्लिक

मैं मूल रूप से एक दोपहर को बर्बाद कर रहा हूं क्योंकि बहुत सारे पैकेज कुछ हफ्तों पहले से बदल जाते हैं जब मैं पहली बार सही ढंग से सेटअप करता हूं 2. स्थिर पैकेज का ट्रैक रखने का एक तरीका है? यह बिल्कुल भी उत्पादक नहीं है। मैं प्रतिक्रिया घटक विकसित करने के लिए स्थापित और unistall बेबल संकुल नहीं रखना चाहते हैं

— कारमाइन टैम्बस्किया

यह मेरे लिए काम करता है, हालांकि मुझे एक और त्रुटि मिली जो मॉड्यूल बिल्ड विफल रही (से ./ode_modules/babel-loader/lib/index.js): इसलिए इसे हल करने के लिए तत्पर हूं

— फ्रांसिस टिटो

अतुल्य के रूप में मैं इस मुद्दे को रखने के बाद से कई खुले स्रोत परियोजनाओं काफी पुराना है, लेकिन 6 या babel 7 के साथ मिश्रण को संदर्भित करता है

— कारमाइन टैम्बस्किया

Answer 3

babel-loaderV8 से भी , वे थोड़ा बदल गए हैं:

वेबपैक 4.x | बेबल-लोडर 8.x | कोलाहल 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

वेबपैक 4.x | बेबल-लोडर 7.x | बेबल 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

(के @babel/preset-reactबजाय एक ही बात babel-preset-react)।

Answer 4

मेरे वेबपैक / प्रतिक्रिया परियोजना में एक ही मुद्दा मिला - ऐसा लगता है कि .babelrcफ़ाइल के साथ कोई समस्या थी ।

मैंने इसे नीचे देखा के रूप में अद्यतन किया और इसने इस चाल को किया:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

Answer 5

यह मेरे लिए काम किया:

npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7

और बेबेल्स्क में:

"presets" : ["es2015", "react"]    

Comments

ब्रिज पैकेज को स्थापित करने के लिए कम से कम याद रखने के लिए इस समस्या को हल करने के लिए यह पूरा नहीं हुआ है कि इससे बचने के लिए कुछ हिडेन निर्भरता अभी भी पिछले संस्करण की "आवश्यकता" है, मैंने इस त्रुटि को और अधिक तब हल किया जब इस npm स्थापित करने के लिए 1 घंटे का धन्यवाद - सेव -देवी "babel-core@^7.0.0-bridge.0" यहाँ से github.com/babel/babel/issues/8482

— कारमाइन टैम्बस्किया

Answer 6

इस समाधान ने मेरे लिए काम किया:

npm install babel-loader babel-preset-react

फिर .babelrc

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

फिर चलाएं npm run start, वेबपैक distनिर्देशिका उत्पन्न करेगा ।

Answer 7

संस्करण 6 से बाबेल 7 में उन्नयन हैं https://babeljs.io/docs/en/v7-migration का संदर्भ लें । वर्तमान समस्या / त्रुटि को हल करने के लिए

इंस्टॉल

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env

तो inbabelrc में प्रीसेट के लिए निर्भरता दिखनी चाहिए

{

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

   "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"]

}

Answer 8

मैं अपने प्रीसेट में .babelrc में "स्टेज -1" था, इसलिए मैंने उसे हटा दिया और त्रुटि दूर हो गई

Answer 9

अपने .babelrc फ़ाइल को कोड के बाद बदलें इससे मेरी समस्या ठीक हो जाती है

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Answer 10

इसका कारण पुराने बेबल पैकेज का उपयोग किया जाना है। बाबेल परियोजना, अधिकांश अन्य सक्रिय जावास्क्रिप्ट परियोजनाओं की तरह, स्कोप पैकेज का उपयोग करने के लिए आगे बढ़ी है। इसलिए, पैकेज के नाम से शुरू होता है@babel

यदि आप यार्न का उपयोग कर रहे हैं, तो नीचे दिए गए का पालन करें:

चरण 1: पुराने पैकेज निकालें

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

चरण 2: नए पैकेज जोड़ें

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

यदि आप npm का उपयोग कर रहे हैं, तो नीचे दिए गए एक का पालन करें:

चरण 1: पुराने पैकेज निकालें

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

चरण 2: नए पैकेज जोड़ें

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

चरण 3: npm या यार्न दोनों के लिए आम

नए पैकेज स्थापित करने के बाद, अपने अद्यतन करने के लिए याद .babelrcसे प्रीसेट reactको @babel/preset-react। ये रहा एक सरल उदाहरण

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