TypeError: (0, _react.useEffect) কোনও ফাংশন নয়

10

যখন বিকাশের পরিবেশে থাকে, তখন আমার অ্যাপ্লিকেশনটি ঠিক কাজ করে। উত্পাদনের পরিবেশে যখন এটি ত্রুটি সহ ক্রাশ হয়:

Uncaught TypeError: (0 , _react.useEffect) is not a function

এটি আমার তৈরি করা একটি ফাইলে ঘটে যেখানে আমি প্রতিক্রিয়া আমদানি করি এবং এর মতো ব্যবহার করে:

import React, { useEffect } from 'react'

const X = () => {
  useEffect(() => { ... })

  ...
}

এই লাইনের ঠিক নীচে একটি কনসোল.লগ যুক্ত করা নিশ্চিত করে যে প্রযোজনা ও ডেভ মধ্যে থাকা অবস্থায় প্রত্যাশিত ফাংশনটি ইউজএফেক্টটি সত্যই অপরিজ্ঞাত।

আমি আমার প্যাকেজ.জসন, সুতা.লক এবং নোড_মডিউলগুলি কোনও প্রতিক্রিয়া বা রিট্যাক্ট-ডোম সংস্করণ যা 16.8.0 এর নীচে হতে পারে যেখানে ইউজএফেক্ট চালু হয়েছিল সেখানে পরীক্ষা করে দেখেছি। তবে সবকিছুই 16.13.1 এবং এগুলিই মূল নির্ভরতা এবং আমি আমার সুতার ক্যাশে পরিষ্কার করার, নোড_মডিউলগুলি এবং সুতা.লকটি মুছতে এবং পুনরায় ইনস্টল করার চেষ্টা করেছি।

আমি এটি যোগ এবং peerDependenciesসফলতা ছাড়াই অপসারণ করার চেষ্টা করেছি ।

প্রতিক্রিয়া চলছে না এমন দুটি পৃথক সংস্করণ না রয়েছে তা নিশ্চিত করার জন্য আমি একটি চেক রেখেছি window.React1 = Reactতবে লাইব্রেরির window.React2 = Reactভিতরে এবং আমার অ্যাপ্লিকেশনটির ভিতরে সঞ্চয় করে এবং চেক করছি

window.React1 === window.React2 এটা সত্য ছিল, তাই এটি হয় না।

শেষ অবধি, আমি নোড_মডিউলগুলিতে নির্দিষ্টটির সাথেও ওরফে প্রতিক্রিয়ার চেষ্টা করেছি, তবে কোনও ভাগ্য ছাড়াই।

আমি একমাত্র সমাধানের সন্ধান পেয়েছি যেগুলি যদি আমি এটির মতো করে আমদানি করি তবে তা হয়:

import React from 'react';

const X = () => {
  React.useEffect(() => { ... })
  ...
}

তবে এটি কি কোনও কাঠামোগত আমদানি ব্যবহারের মতোই হওয়া উচিত? আমি যদি স্পষ্টভাবে React.useEffect ব্যবহার করি তবে এটি আমার অন্যান্য ব্যবহারের সমস্ত স্টেট এবং এফেক্ট হুকগুলি ব্যবহার করতে React.useSateএবং আমাকে পরিবর্তন করতে বাধ্য করেReact.useEffect

পরবর্তী ত্রুটি সবেমাত্র হয়ে যায়: TypeError: (0 , _react.useState) is not a functionঅন্য একটি ফাইলে যেখানে আমি প্রতিক্রিয়া হুক ব্যবহার করি।

আমি সমস্যাটি সমাধান করতে চাই কোনও বাস্তবায়ন কার্যকর না করে।

আমি microbundleপ্রতিক্রিয়া ব্যবহার করে আমার লাইব্রেরি বান্ডিল করতে ব্যবহার করি । আমি parcel-bundlerপ্রতিক্রিয়া-উপাদানটি আমদানি করতে এবং এটি কোনও পরিবেশ পরিবেশে (সরাসরি এসসিআর থেকে) বা প্রোডের (বান্ডেলযুক্ত লাইব্রেরি) রেন্ডার করতে ব্যবহার করি

আমি ব্যবহার করি বান্ডিল সংস্করণ .mjs সঙ্গে বান্ডিল হয়

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

import ue,{useEffect as pe,useState as fe}from"react";

যা আমার কাছে দুর্দান্ত লাগছে।

যা আমি সত্যিই বুঝতে পারি না এটি একটি পুনর্গঠিত আমদানি কীভাবে এটি ভেঙে দেবে, কিন্তু কেবল React.useEffect করা ঠিক কাজ করবে?

এই আমার প্যাকেজ.জসন

{
  "name": "xxx",
  "version": "1.1.4",
  "repository": "git@github.com:xxx/xxx.git",
  "author": "xxx",
  "license": "MIT",
  "source": "src/index.ts",
  "main": "dist/bundle.js",
  "umd:main": "dist/bundle.umd.js",
  "module": "dist/bundle.mjs",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/@xxx"
  },
  "scripts": {
    "build": "microbundle",
    "dev": "parcel ./test-app/dev/index.html --port 3000",
    "start": "parcel ./test-app/serve/index.html --port 3000",
    "storybook": "start-storybook -s ./public -c .storybook --ci",
    "prepublishOnly": "yarn build"
  },
  "dependencies": {
    "@api-platform/admin": "2.1.0",
    "@api-platform/api-doc-parser": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@material-ui/core": "^4.9.10",
    "@material-ui/icons": "^4.9.1",
    "@react-keycloak/web": "^2.1.1",
    "@types/pluralize": "^0.0.29",
    "google-geocoder": "0.2.1",
    "history": "^4.10.1",
    "keycloak-js": "^9.0.3",
    "lodash.debounce": "^4.0.8",
    "lodash.omit": "^4.5.0",
    "lodash.set": "4.3.2",
    "notistack": "0.9.9",
    "papaparse": "^5.2.0",
    "parcel-bundler": "1.12.4",
    "polished": "^3.5.2",
    "react": "16.13.1",
    "react-admin": "3.4.1",
    "react-dom": "16.13.1",
    "react-is": "16.13.1",
    "react-redux": "^7.2.0",
    "recompose": "^0.30.0",
    "redux": "4.0.5",
    "styled-components": "5.1.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
    "@babel/plugin-syntax-export-default-from": "7.8.3",
    "@babel/preset-env": "7.9.5",
    "@babel/preset-react": "7.9.4",
    "@storybook/addon-a11y": "5.3.18",
    "@storybook/addon-actions": "5.3.18",
    "@storybook/addon-info": "5.3.18",
    "@storybook/addon-knobs": "5.3.18",
    "@storybook/addon-links": "5.3.18",
    "@storybook/addon-storyshots": "5.3.18",
    "@storybook/addon-storysource": "5.3.18",
    "@storybook/addon-viewport": "5.3.18",
    "@storybook/react": "5.3.18",
    "@testing-library/react": "^10.0.3",
    "@types/jsonld": "1.5.1",
    "@types/lodash": "4.14.149",
    "@types/node": "13.11.1",
    "@types/papaparse": "5.0.3",
    "@types/react-redux": "7.1.7",
    "@types/recompose": "^0.30.7",
    "@types/styled-components": "5.1.0",
    "@welldone-software/why-did-you-render": "4.0.7",
    "awesome-typescript-loader": "5.2.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-module-resolver": "4.0.0",
    "babel-plugin-styled-components": "1.10.7",
    "lodash.get": "4.4.2",
    "lodash.uniq": "4.5.0",
    "microbundle": "0.11.0",
    "openapi-types": "1.3.5",
    "parcel-plugin-static-files-copy": "2.3.1",
    "pluralize": "^8.0.0"
  },
  "alias": {
    "jsonld": "./node_modules/jsonld/dist/jsonld.js"
  },
  "staticFiles": {
    "staticPath": "public",
    "watcherGlob": "**"
  }
}

এছাড়াও লক্ষণীয়, এটি শুধুমাত্র প্রতিক্রিয়া সঙ্গে আমার এই সমস্যাটি হচ্ছে। আমার অন্যান্য সমস্ত পুনর্গঠিত আমদানি ঠিক কাজ করে।

javascript  reactjs  react-hooks  parceljs 
— MLyck
সূত্র
নামযুক্ত আমদানি কোনওভাবেই ডিফল্ট রফতানির সদস্যদের রেফারিং হিসাবে একই রকম ব্যবহার করে না। আমার অনুমান যে, উন্নয়নের সময় আপনার জায়গায় কিছু অতিরিক্ত লোডার রয়েছে যা মডিউল
— লোডারদের
1
আপনি কি globalপতাকাটি ব্যবহার করে --globals react=Reactএবং পিয়ারের নির্ভরতা হিসাবে প্রতিক্রিয়া যুক্ত করতে পারেন <- যদিও এটি কোনও সঠিক ফিক্স নাও হতে পারে। এই ইস্যুটি দেখুন: github.com/developit/microbundle/issues/537 দেখে মনে হচ্ছে এটি থেকে এসেছেyarn
— Jee Mok
1
আপনি কি পরবর্তীটি মাইক্রোবান্ডেল ইনস্টল করার চেষ্টা করতে পারেন যে এটি কাজ করেছে কিনা? কেবলমাত্র এটি এখনকার মাইক্রোবান্ডল সংস্করণ ইস্যু কিনা তা পরীক্ষা করে দেখুন
— জি মক
আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করে থাকেন তবে আপনি এই সমস্যাটিও দেখতে চাইতে পারেন: github.com/developit/microbundle/issues/564
— Jee Mok
1
আমার ধারণা এটি হ'ল উত্পাদন বিল্ডের microbundlerপরিবর্তে react-scriptsবা কোনও পরিবর্তিত বান্ডলার কনফিগারেশনকে খারাপ উপায়ে ব্যবহার করার কারণে। আমি আপনার দৃষ্টি আকর্ষণ করতে চাই প্রতিক্রিয়া হুকের নামগুলি শুরু হওয়া উচিত useএবং এই লাইনে থাকতে পারে import ue,{useEffect as pe,useState as fe}from"react";যা ব্যবহারের peপ্রতিক্রিয়ায় কিছু ভুল হয়ে যাওয়ার কারণে আমদানি করা হয়েছে imported সুতরাং, আপনার সাথে বিল্ড চেষ্টা করেছে create-react-appএবং react-scripts?
— মাকান

উত্তর:

4

দেখে মনে হচ্ছে এটি microbundlerপ্রতিক্রিয়া সহ্য করে না। এটি একটি বান্ডিল তৈরি করে যা reactবিশ্বব্যাপী সুযোগ থেকে ব্যবহার করার চেষ্টা করে , পরিবর্তে Reactএটি সত্যই উদ্ভাসিত হয়।

একই কারণে আপনার React.useEffectপ্রত্যাশার মতো কাজের সাথে একত্রিত হন, কেবল কল্পনা করুন যে এটির মতো দেখাচ্ছে window.React.useEffect।

এখানে একটি আদিম প্রয়োগের উদাহরণ:

import ReactDOM from 'react-dom';
import React, { useEffect, useState } from 'react';

/**
 * necessary workaround, microbundle use `h` pragma by default,
 * that undefined when use React
 * another option is to make build with option --jsx
 * @example microbundle --globals react=React --jsx React.createElement
 * yes, yet another workaround
*/
window.h = React.createElement;

const X = () => {
  const [A, B] = useState('world');

  useEffect(() => {
    B('MLyck');
  }, [])

  return `Hello ${A}`;
}

ReactDOM.render(<X />, document.querySelector('react-app'));

ঠিক এর সাথে বান্ডিলিংয়ের পরে microbundleএটি সম্পূর্ণরূপে ভেঙে গেছে, তবে যখন আপনি বান্ডিল করার চেষ্টা করবেন

microbundle --globals react=React

@ জি মোককে সঠিকভাবে পরামর্শ হিসাবে এটি সঠিক বান্ডেল তৈরি করবে। আমি আশা করি মন্তব্যগুলি যা ঘটেছে তা ব্যাখ্যা করবে।

!function (e, t) {
  "object" == typeof exports && "undefined" != typeof module ?
    t(require("react-dom"), require("react")) :
    "function" == typeof define && define.amd ?
      define(["react-dom", "react"], t) :
      t(e.ReactDOM, e.React);
  /*
  String above is core of problem,
  in case you try to bundle without options `--globals react=React`
  it will looks like: `t(e.ReactDOM, e.react);`
  Obviously `react` is not defined in `e` e.g. `this` e.g. `window`
  due to react expose self as `React`
   */
}(this, function (e, t) {
  e = e && e.hasOwnProperty("default") ? e.default : e, window.h = ("default" in t ? t.default : t).createElement, e.render(h(function () {
    var e = t.useState("world"), n = e[0], r = e[1];
    return t.useEffect(function () {
      r("MLyck");
    }, []), "Hello " + n;
  }, null), document.querySelector("react-app"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>

    <react-app></react-app>
স্নিপেট প্রসারিত করুন

এবং, যাইহোক, "পুনর্গঠিত আমদানি" দোষ দেওয়ার মতো নয়।

— Kyr
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.