প্রকারের উল্লেখ রেফারেন্স: রফতানি সংজ্ঞায়িত হয় না

Question 1

অফিসিয়াল হ্যান্ডবুক অনুসরণ করে একটি মডিউল বাস্তবায়নের চেষ্টা করছি , আমি এই ত্রুটি বার্তাটি পেয়েছি:

আনকড রেফারেন্স এরিয়ার: রফতানি সংজ্ঞায়িত হয় না

at. apps.js: 2

তবে আমার কোডে কোথাও আমি নামটি ব্যবহার করি না exports।

আমি এটা কিভাবে ঠিক করবো?

নথি পত্র

app.ts

let a = 2;
let b:number = 3;

import Person = require ('./mods/module-1');

মডিউল -১.t

 export class Person {
  constructor(){
    console.log('Person Class');
  }
}
export default Person;

tsconfig.json

{
   "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "scripts/"
    },
    "exclude": [
        "node_modules"
    ]
}

Question 2

সম্পাদনা:

আপনি যদি es5আর টার্গেট না করে থাকেন তবে এই উত্তরটি কার্যকর নাও হতে পারে , আমি উত্তরটি আরও সম্পূর্ণ করার চেষ্টা করব।

আসল উত্তর

যদি কমনজেএস ইনস্টল না করা থাকে ( যা সংজ্ঞায়িত করেexports ) তবে আপনাকে এই লাইনটি আপনার থেকে সরাতে হবে tsconfig.json:

 "module": "commonjs",

মতামত অনুসারে, এটি একা পরবর্তী সংস্করণগুলির সাথে কাজ করতে পারে না tsc। যদি এটি হয় তবে আপনি কমনজেএস, সিস্টেমজেএস বা প্রয়োজনীয় জেএসের মতো একটি মডিউল লোডার ইনস্টল করতে পারেন এবং তারপরে এটি নির্দিষ্ট করতে পারেন।

বিঃদ্রঃ:

আপনার main.jsফাইলটি দেখুন যা tscউত্পন্ন হয়েছে। আপনি এটি একেবারে শীর্ষে পাবেন:

Object.defineProperty(exports, "__esModule", { value: true });

এটি ত্রুটি বার্তার মূল, এবং অপসারণের পরে "module": "commonjs",এটি বিলুপ্ত হবে।

Question 3

এই সমস্যাটির জন্য কয়েকটি অন্যান্য সমাধান

জাভাস্ক্রিপ্টে অন্যান্য উল্লেখের আগে নিম্নলিখিত লাইনটি যুক্ত করুন। এটি একটি দুর্দান্ত সামান্য হ্যাক।

   <script>var exports = {};</script>

এই সমস্যাটি টাইপস্ক্রিপ্টের সর্বশেষ সংস্করণ সহ ঘটে, টাইপস্ক্রিপ্ট সংস্করণ ২.১..6 উল্লেখ করে এই ত্রুটিটি দূর করা যায়

Question 4

আমি "type": "module"ক্ষেত্রটি থেকে সরিয়ে সমস্যার সমাধান করেছি package.json।

Question 5

npm install @babel/plugin-transform-modules-commonjs

এবং .babrcrc এ যুক্ত করুন প্লাগইনগুলি আমার প্রশ্নের সমাধান করে।

Question 6

আমার সমাধানটি আমি যুক্ত করা ছোট্ট কৌশলগুলি দিয়ে উপরের সমস্ত কিছুর যোগফল bas

<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>

এমনকি আপনি যদি ইলেকট্রন বা কিছু ব্যবহার করছেন তবে importপরিবর্তে এটি ব্যবহারের অনুমতি দেয় requireএবং এটি টাইপস্ক্রিপ্ট 3.5.1.1, টার্গেট: এস 3 -> এসেনেক্সট সহ দুর্দান্ত কাজ করে।

Question 7

এটি moduleসংকলক বিকল্পটি সেট করে ঠিক করা হয়েছে es6:

{
  "compilerOptions": {     
    "module": "es6",
    "target": "es5",    
  }
}

Question 8

আমার একই সমস্যা ছিল এবং এটি সমাধান করা হয়েছে এটির মতো " এস 5 " লাইব্রেরিটিকে tsconfig.json এ যুক্ত করে:

{
    "compilerOptions": {
        "target": "es5", //defines what sort of code ts generates, es5 because it's what most browsers currently UNDERSTANDS.
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true, //for angular to be able to use metadata we specify in our components.
        "experimentalDecorators": true, //angular needs decorators like @Component, @Injectable, etc.
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [
            "es2016",
            "dom",
            "es5"
        ]
    }
}

Question 9

এখনও এই সমস্যাটি রয়েছে এমন লোকদের জন্য, যদি আপনার সংকলক লক্ষ্যটি ES6 তে সেট করা থাকে তবে আপনাকে মডিউল রূপান্তর এড়াতে বাবেলকে বলতে হবে। এটি করতে আপনার .babelrcফাইলটিতে এটি যুক্ত করুন

{
  "presets": [ ["env", {"modules": false} ]]
}

Question 10

আমারও এই একই ত্রুটি ছিল। আমার ক্ষেত্রে এটি ছিল কারণ আমাদের টাইপস্ক্রিপ্ট অ্যাঙ্গুলারজেএস প্রকল্পে আমাদের পুরানো ধরণের আমদানির বিবৃতি ছিল:

import { IAttributes, IScope } from "angular";

যা জাভাস্ক্রিপ্টে এভাবে সংকলিত হয়েছিল:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

পুরানো দিনগুলিতে এটির দরকার ছিল কারণ আমরা তখন IAttributesকোড এবং টাইপস্ক্রিপ্ট ব্যবহার করতাম তবে অন্যথায় এটি কী করা উচিত তা আমরা জানতাম না। তবে আমদানি বিবৃতিটি সরিয়ে, এবং সেই দুটি জাভাস্ক্রিপ্ট লাইনে রূপান্তর IAttributesকরার পরে ng.IAttributesঅদৃশ্য হয়ে গেল - এবং ত্রুটি বার্তাটিও তাই ঘটল।

Question 11

কিছু এএসপি.এনইটি প্রকল্পের জন্য importএবংexport আপনার টাইপ স্ক্রিপ্টগুলিতে মোটেই ব্যবহার করা যাবে না।

আমি যখন এটি করার চেষ্টা করেছি তখন প্রশ্নের ত্রুটিটি প্রকাশ পেয়েছিল এবং আমি কেবল পরে আবিষ্কার করেছি যে জেনারেটেড জেএস স্ক্রিপ্টটি আমাকে ভিউতে যুক্ত করার দরকার ছিল :

<script src="~/scripts/js/[GENERATED_FILE].Index.js" asp-append-version="true"></script>

Question 12

সহজভাবে যোগ করুন libraryTarget: 'umd', যেমন

const webpackConfig = {
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.

Question 13

আমার জন্য, "esModuleInterop": truetsconfig.json থেকে অপসারণ কৌশলটি করেছে।

Question 14

দ্রষ্টব্য: এটি ওপি-র উত্তরের জন্য প্রযোজ্য নাও হতে পারে তবে আমি এই ত্রুটিটি পেয়েছিলাম এবং এটি কীভাবে সমাধান করেছি।

সুতরাং আমি যে সমস্যার মুখোমুখি হয়েছি তা হ'ল আমি যখন একটি নির্দিষ্ট সিডিএন থেকে 'জেএস' লাইব্রেরিটি পেয়েছি তখন আমি এই ত্রুটিটি পেয়েছিলাম getting

আমি কেবল যে ভুল কাজটি করছিলাম তা হ'ল সিডিএন এর cjsডিরেক্টরি থেকে আমদানি করা : https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

dist/cjsঅংশটি লক্ষ্য করুন ? সমস্যাটি সেখানেই ছিল।

আমি আমার ক্ষেত্রে সিডিএন (jsdelivr) এ ফিরে গিয়ে umdফোল্ডারটি সন্ধান করতে নেভিগেট করেছি । পরে আমি আর একজন সেটের খুঁজে পাইনি popper.min.jsযা আমদানি সঠিক ফাইল ছিল: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js।

Question 15

উপরে ক্লিক করুন @ iFreilicht। আপনি ওয়েবপ্যাক এবং সমস্ত ইনস্টল করার পরে যদি এটি কাজ না করে তবে আপনি হয়ত অনলাইনে কোথাও একটি ওয়েবপ্যাক কনফিগারেশন অনুলিপি করে সেখানে কনফিগার করেছেন যে আপনি আউটপুটটি ভুল করে কমনজেএস সমর্থন করতে চান। নিশ্চিত করুন যে এটি তেমন নয় webpack.config.js:

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: { 
    index: "./src/js/index.ts"
  },
  ...
  ...
  output: {
    libraryTarget: 'commonjs',         <==== DELETE THIS LINE
    path: path.join(__dirname, 'build'),
    filename: "[name].bundle.js"
  }
};

Question 16

একই সমস্যা ছিল এবং জেএস প্যাকেজ লোডিং ক্রম পরিবর্তন করে এটি ঠিক করেছে।

আপনার প্রয়োজনীয় প্যাকেজগুলি যে ক্রমে কল করা হচ্ছে সেটিকে পরীক্ষা করুন এবং সেগুলি একটি উপযুক্ত ক্রমে লোড করুন।

আমার নির্দিষ্ট যদি (মডিউল bundler ব্যবহার করছেন না) আমি লোড করতে প্রয়োজনীয় Redux, তারপর Redux Thunk, তারপর React Redux। React Reduxআগে লোড করা Redux Thunkআমাকে দিতে হবে exports is not defined।

Question 17

আমার একই সমস্যা ছিল, তবে আমার সেটআপের জন্য আলাদা সমাধান দরকার।

আমি create-react-app-rewiredএকটি config-overrides.jsফাইল সহ প্যাকেজটি ব্যবহার করছি । পূর্বে, আমি addBabelPresetsআমদানিটি ( override()পদ্ধতিতে) ব্যবহার করছিলামcustomize-cra এবং এই প্রিসেটগুলি পৃথক একটি ফাইলে বিমূর্ত করার সিদ্ধান্ত নিয়েছি। কাকতালীয়ভাবে, এটি আমার সমস্যার সমাধান করেছে।

আমি যোগ useBabelRc()করতে override()পদ্ধতি config-overrides.jsএবং একটি নির্মিত babel.config.jsনিম্নলিখিত সঙ্গে ফাইল:

module.exports = {
    presets: [
        '@babel/preset-react',
        '@babel/preset-env'
    ],
}

Question 18

এই সমস্যাটি সমাধান করতে, আপনার সূচিপত্রের html পৃষ্ঠাতে এই দুটি লাইন রাখুন ।

<script>var exports = {"__esModule": true};</script>
<script type="text/javascript" src="/main.js">

আপনার main.js ফাইলের পাথটি পরীক্ষা করে নেওয়ার বিষয়টি নিশ্চিত করুন ।

Question 19

আপনি যদি প্রকারের জন্য কেবল ইন্টারফেস ব্যবহার করে থাকেন তবে exportকীওয়ার্ডটি ছেড়ে দিন এবং টিএস আমদানির প্রয়োজন ছাড়াই প্রকারগুলি বেছে নিতে পারে। তারা কী আপনি import/ exportকোথাও ব্যবহার করতে পারবেন না ।

export interface Person {
   name: string;
   age: number;
}

মধ্যে

interface Person {
   name: string;
   age: number;
}

Question 20

  {
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist",
      "sourceMap": true,
      "declaration": false,
      "module": "esnext",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": ["node_modules/@types"],
      "lib": ["es2018", "dom"]
    }
  }