reactjs - অবৈধ কনফিগারেশন অবজেক্ট। ওয়েবপ্যাকটি এমন একটি কনফিগারেশন অবজেক্ট ব্যবহার করে সূচনা করা হয়েছে যা API স্কিমার সাথে মেলে না




typescript webpack (11)

"ওয়েবপ্যাক.কনফিগ.জেএস" এর "লোডারগুলি" থেকে "নিয়মে" কেবল পরিবর্তন করুন

কারণ লোডারগুলি ওয়েবপ্যাক 1 এ এবং ওয়েবপ্যাক 2-এ নিয়ম ব্যবহার করা হয়। আপনি differences আছে দেখতে পারেন।

আমার কাছে একটি অনলাইন কোর্স থেকে তৈরি করা এই সহজ হেলোওয়ার্ল্ড রিএ্যাক্ট অ্যাপ রয়েছে, তবে আমি এই ত্রুটিটি পেয়েছি:

অবৈধ কনফিগারেশন অবজেক্ট। ওয়েবপ্যাকটি এমন একটি কনফিগারেশন অবজেক্ট ব্যবহার করে সূচনা করা হয়েছে যা API স্কিমার সাথে মেলে না। - কনফিগারেশনের একটি অজানা সম্পত্তি 'পোস্টকএসএস' রয়েছে। এই বৈশিষ্ট্যগুলি বৈধ: অবজেক্ট {amd ?, জামিন ?, ক্যাশে ?, প্রসঙ্গ ?, নির্ভরতা?, ডেভার সার্ভার?, ডিভলটল ?, প্রবেশ, বহিরাগত ?, লোডার ?, মডিউল? নাম? নোড? আউটপুট? কর্মক্ষমতা? ? Typ টাইপোর জন্য: দয়া করে এগুলি সংশোধন করুন।
লোডার বিকল্পগুলির জন্য: ওয়েবপ্যাক 2 কনফিগারেশনে কাস্টম বৈশিষ্ট্যগুলিকে আর অনুমতি দেয় না। মডিউল.রুলে লোডার অপশনগুলির মাধ্যমে পাসিং বিকল্পগুলি অনুমোদনের জন্য লোডারগুলি আপডেট করা উচিত। লোডার আপডেট হওয়া অবধি এই লোডারে এই অপশনগুলি পাস করার জন্য লোডারঅ্যাপশন প্লাগিন ব্যবহার করতে পারবেন: প্লাগইনস: [নতুন ওয়েবপ্যাক.লয়েডারঅપ્শনস প্লাগিন ({// পরীক্ষা: /.xxx$/, // এটি কেবলমাত্র কিছু মডিউল বিকল্পের জন্য প্রয়োগ করতে পারে: c পোস্টসিএসএস: ...}})] - config.versolve এর একটি অজানা সম্পত্তি 'রুট' রয়েছে। এই বৈশিষ্ট্যগুলি বৈধ: অবজেক্ট {ওরফে?, ওরফেফিল্ডস?, ক্যাশেপ্রডিকেট?, বিবরণ ফাইলস, প্রয়োগকরণ? এক্সটেনশন?, প্রয়োগকারীর মডেল এক্সটেনশন ?, এক্সটেনশানস, ফাইলসিসটেম ?, মেইনফিল্ডস ?, মাইন ফাইলস? মডিউল এক্সটেনশানস? মডিউল? প্লাগিন? রেজলভার? সিলিংকস? ?, অনিরাপদ ক্যাশে ?, ব্যবহার সিংফাইলে সিস্টেম সিস্টেম? } - কনফিগারেশন.স্লেভ.এক্সটেনশন [0] খালি থাকা উচিত নয়।

আমার ওয়েবপ্যাক ফাইলটি হ'ল:

// work with all paths in a cross-platform manner
const path = require('path');

// plugins covered below
const { ProvidePlugin } = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// configure source and distribution folder paths
const srcFolder = 'src';
const distFolder = 'dist';

// merge the common configuration with the environment specific configuration
module.exports = {

    // entry point for application
    entry: {
        'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')
    },

    // allows us to require modules using
    // import { someExport } from './my-module';
    // instead of
    // import { someExport } from './my-module.ts';
    // with the extensions in the list, the extension can be omitted from the 
    // import from path
    resolve: {
        // order matters, resolves left to right
        extensions: ['', '.js', '.ts', '.tsx', '.json'],
        // root is an absolute path to the folder containing our application 
        // modules
        root: path.join(__dirname, srcFolder, 'ts')
    },

    module: {
        loaders: [
            // process all TypeScript files (ts and tsx) through the TypeScript 
            // preprocessor
            { test: /\.tsx?$/,loader: 'ts-loader' },
            // processes JSON files, useful for config files and mock data
            { test: /\.json$/, loader: 'json' },
            // transpiles global SCSS stylesheets
            // loader order is executed right to left
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'ts')],
                loaders: ['style', 'css', 'postcss', 'sass']
            },
            // process Bootstrap SCSS files
            {
                test: /\.scss$/,
                exclude: [path.join(__dirname, srcFolder, 'scss')],
                loaders: ['raw', 'sass']
            }
        ]
    },

    // configuration for the postcss loader which modifies CSS after
    // processing
    // autoprefixer plugin for postcss adds vendor specific prefixing for
    // non-standard or experimental css properties
    postcss: [ require('autoprefixer') ],

    plugins: [
        // provides Promise and fetch API for browsers which do not support
        // them
        new ProvidePlugin({
            'Promise': 'es6-promise',
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        // copies image files directly when they are changed
        new CopyWebpackPlugin([{
            from: path.join(srcFolder, 'images'),
            to: path.join('..', 'images')
        }]),
        // copies the index.html file, and injects a reference to the output JS 
        // file, app.js
        new HtmlWebpackPlugin({
            template: path.join(__dirname, srcFolder, 'index.html'),
            filename:  path.join('..', 'index.html'),
            inject: 'body',
        })
    ],

    // output file settings
    // path points to web server content folder where the web server will serve 
    // the files from file name is the name of the files, where [name] is the 
    // name of each entry point 
    output: {
        path: path.join(__dirname, distFolder, 'js'),
        filename: '[name].js',
        publicPath: '/js'
    },

    // use full source maps
    // this specific setting value is required to set breakpoints in they
    // TypeScript source in the web browser for development other source map
    devtool: 'source-map',

    // use the webpack dev server to serve up the web application
    devServer: {
        // files are served from this folder
        contentBase: 'dist',
        // support HTML5 History API for react router
        historyApiFallback: true,
        // listen to port 5000, change this to another port if another server 
        // is already listening on this port
        port: 5000,
        // proxy requests to the JSON server REST service
        proxy: {
            '/widgets': {
                // server to proxy
                target: 'http://0.0.0.0:3010'
            }
        }
    }

};

"লোডারগুলি" "নিয়মে" পরিবর্তন করা আমার পক্ষে কাজ করেছে (ওয়েবপ্যাক ভি 4)


আমার অনুমান যে আপনার ওয়েবপ্যাক সংস্করণটি 2.2.1। আমার মনে হয় আপনার এই মাইগ্রেশন গাইড -> https://webpack.js.org/guides/migrating/ ব্যবহার করা উচিত

এছাড়াও, আপনি টাইপসক্রিপ + ওয়েবপ্যাক 2 এর এই উদাহরণটি ব্যবহার করতে পারেন।


আমার একই সমস্যা ছিল এবং আমি এটি সর্বশেষ এনপিএম সংস্করণ ইনস্টল করে সমাধান করেছি:

npm install -g [email protected]

এবং তারপরে সমাধানের জন্য webpack.config.js ফাইলটি পরিবর্তন করুন

- config.resolve.extensions [0] খালি থাকা উচিত নয়।

এখন সমাধান এক্সটেনশনটি দেখতে হবে:

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

তারপরে npm start চালান।


আমি webpack.config.js . webpack.config.js ফাইলে লোডারগুলিকে নিয়মে পরিণত করেছি এবং html-webpack-plugin , webpack , webpack-cli webpack-dev-server , webpack-dev-server সর্বশেষ সংস্করণে আপডেট করেছি তবে এটি আমার জন্য কাজ করেছিল!


আমি 'এন্ট্রি' এবং 'আউটপুট' সেটিংস সেট আপ করতে যখন পথ.রোগ () ব্যবহার করি তখন এই ত্রুটিটি ঘটে। entry: path.resolve(__dirname + '/app.jsx') । কেবল entry: __dirname + '/app.jsx' চেষ্টা করুন entry: __dirname + '/app.jsx'


আমি এনপিএম init দিয়ে তৈরি একটি প্রকল্পে ওয়েবপ্যাকটি প্রবর্তন করার সময় আমি একই ত্রুটি বার্তাটি পেয়েছি।

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist/assets" is not an absolute path!

আমি সুতোর ব্যবহার শুরু করেছি যা আমার জন্য সমস্যাটি স্থির করেছে:

npm uninstall webpack --save-dev
npm install webpack --save-dev

আমি নীচের লিঙ্কটি সহায়ক বলে মনে করেছি: ওয়েবপ্যাক এবং ব্যাবেল ব্যবহার করে প্রতিক্রিয়া পরিবেশ সেটআপ করুন


এই ত্রুটিটি সাধারণত ঘটে যখন আপনি বিরোধী সংস্করণ (কৌণিক জেএস) থাকবেন। সুতরাং ওয়েবপ্যাক অ্যাপ্লিকেশন শুরু করতে পারেনি। আপনি কেবল ওয়েবপ্যাকটি সরিয়ে এটি পুনরায় ইনস্টল করে ঠিক করতে পারেন।

brew update
brew install yarn
brew upgrade yarn
yarn init
yarn add webpack webpack-dev-server path
touch webpack.config.js
yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev
yarn add html-webpack-plugin
yarn start

আপনার অ্যাপ্লিকেশনটি পুনরায় চালু করুন এবং সবকিছু ঠিক আছে।

আমি আশা করি কাউকে সাহায্য করতে পারব চিয়ার্স


ওয়েবপ্যাক.কনফিগ.জেজে লোডারগুলি প্রতিস্থাপন করুন: [..] বিধি দ্বারা: [..] এটি আমার পক্ষে কাজ করেছে।


ওয়েবপ্যাকের কনফিগারেশন ফাইলটি বছরের পর বছর ধরে পরিবর্তিত হয়েছে (প্রতিটি বড় রিলিজের সাথে সম্ভবত)। প্রশ্নের উত্তর:

কেন আমি এই ত্রুটি পেতে পারি

module : {
rules : [
  {
    test : /\.jsx?/,
    include : APP_DIR,
    loader : 'babel-loader'
  }
]

কারণ কনফিগারেশন ফাইলটি ওয়েবপ্যাকটি ব্যবহার করার সংস্করণের সাথে মেলে না।

স্বীকৃত উত্তরটি এটি এবং অন্যান্য উত্তরগুলি এটিকে বোঝায় না তবে এটিকে এনপিএম ইনস্টল ওয়েবপ্যাক @ ২.১.০- বিটা ২২ তে পরিষ্কারভাবে জানবেন না , কেবল "ওয়েবপ্যাক.কোনফিগ.জেএস" এর "লোডারগুলি" থেকে "নিয়মে" পরিবর্তন করুন install " , এবং this । সুতরাং আমি এই প্রশ্নের আমার উত্তর প্রদান করার সিদ্ধান্ত নিয়েছে।

ওয়েবপ্যাক আনইনস্টল করা এবং পুনরায় ইনস্টল করা, বা ওয়েবপ্যাকের গ্লোবাল সংস্করণ ব্যবহার করা এই সমস্যার সমাধান করবে না। কনফিগারেশন ফাইলটি ব্যবহার করার জন্য ওয়েবপ্যাকের সঠিক সংস্করণ ব্যবহার করা যা গুরুত্বপূর্ণ তা।

যদি কোনও বিশ্বব্যাপী সংস্করণ ব্যবহার করার সময় এই সমস্যাটি সংশোধন করা হয় তবে এর অর্থ সম্ভবত আপনার বৈশ্বিক সংস্করণটি "পুরানো" ছিল এবং ওয়েবপ্যাক.কনফিগ.জেএস ফাইল ফর্ম্যাটটি আপনার ব্যবহারটি "পুরানো" তাই তারা এখন মিলিয়ে কাজগুলিতে লঙ্ঘন করে work আমি সবকিছুই কাজের জন্য, তবে পাঠকরা কেন তারা কাজ করেছেন তা জানতে চাই।

যখনই আপনি একটি ওয়েবপ্যাক কনফিগারেশন পেয়েছেন যা আপনি আশা করেন যে আপনার সমস্যার সমাধান হতে চলেছে ... নিজেকে কনফিগারেশনটির ওয়েবপ্যাকটির সংস্করণটি জিজ্ঞাসা করুন।

ওয়েবপ্যাক শেখার জন্য প্রচুর ভাল সংস্থান রয়েছে। কিছু:

ওয়েবপ্যাক 4 শেখার জন্য আরও অনেক ভাল উত্স রয়েছে উদাহরণস্বরূপ, আপনি অন্যদের সম্পর্কে জানতে পারলে মন্তব্য যুক্ত করুন। আশা করি, ভবিষ্যতের ওয়েবপ্যাক নিবন্ধগুলিতে ব্যবহৃত সংস্করণগুলি / ব্যাখ্যা করা হবে state


loaders পরিবর্তে rules ব্যবহার করে এটি আমার পক্ষে কাজ

Invalid configuration object. Webpack has been initialised using a 
configuration object that does not match the API schema

}





webpack