Không thể sử dụng câu lệnh nhập bên ngoài mô-đun nodejs

Cố gắng sử dụng Ionic với khung phản ứng và khi chạy thử nghiệm gỡ lỗi cơ bản, tôi gặp phải lỗi sau

Jest gặp phải một mã thông báo không mong muốn

Chi tiết

C:\Users\\Documents\GitHub\\node_modules\@codetrix-studio\capacitor-google-auth\dist\esm\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { registerPlugin } from '@capacitor/core';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

Điều này CHỈ xảy ra khi plugin tụ điện-google-auth được sử dụng, khi nó bị gỡ bỏ, thử nghiệm chạy tốt, mặc dù có rất nhiều mô-đun mã khác. Có ai có bất kỳ ý tưởng những gì gây ra điều này?

LnRiLWNvbnRhaW5lciAudGItY29udGFpbmVyLWlubmVye3dpZHRoOjEwMCU7bWFyZ2luOjAgYXV0b30gLndwLWJsb2NrLXRvb2xzZXQtYmxvY2tzLWNvbnRhaW5lci50Yi1jb250YWluZXJbZGF0YS10b29sc2V0LWJsb2Nrcy1jb250YWluZXI9IjdmZjEwMTJkZDQ1MGExMTU3YWYxZWM0N2IzYmE4OTE0Il0geyBwYWRkaW5nOiAyNXB4O21hcmdpbi1ib3R0b206IDBweDsgfSBAbWVkaWEgb25seSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc4MXB4KSB7IC50Yi1jb250YWluZXIgLnRiLWNvbnRhaW5lci1pbm5lcnt3aWR0aDoxMDAlO21hcmdpbjowIGF1dG99IH0gQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA1OTlweCkgeyAudGItY29udGFpbmVyIC50Yi1jb250YWluZXItaW5uZXJ7d2lkdGg6MTAwJTttYXJnaW46MCBhdXRvfSB9IA==

Không thể sử dụng câu lệnh nhập bên ngoài mô-đun trong JavaScript

Ngày 8 tháng 12 năm 2022

Hướng dẫn này là một phần của loạt bài "Các lỗi JavaScript phổ biến". Nó hoàn toàn tập trung vào việc cung cấp các giải pháp nhanh chóng và dễ dàng cho các sự cố liên quan đến JavaScript

---

"Lỗi cú pháp. Không thể sử dụng câu lệnh nhập bên ngoài mô-đun" được đưa ra khi trình thông dịch JavaScript gặp câu lệnh nhập bên ngoài mô-đun

Trong JavaScript, một mô-đun là một mã được thực thi trong phạm vi riêng của nó, tách biệt với phạm vi toàn cầu. Các câu lệnh nhập chỉ có thể được sử dụng trong một mô-đun chứ không phải trong phạm vi toàn cầu

Đọc thêm. Yêu cầu so với. Nhập bằng JavaScript

Lỗi này có thể xảy ra trong bất kỳ môi trường JavaScript nào, kể cả trong Node. js. Tuy nhiên, nó có nhiều khả năng xảy ra trong các môi trường không hỗ trợ sử dụng các câu lệnh nhập trong phạm vi toàn cầu, chẳng hạn như các trình duyệt hoặc công cụ JavaScript cũ hơn

Sửa nó cho HTML

Để khắc phục sự cố cho tập lệnh HTML, bạn cần đặt thuộc tính

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

2 của phần tử

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

1 để chỉ định loại tập lệnh có trong phần tử

Nếu thuộc tính loại được đặt thành "mô-đun", trình duyệt sẽ biết rằng tập lệnh là một mô-đun JavaScript và sẽ thực thi nó như vậy

Điều này sẽ cho phép bạn sử dụng các câu lệnh nhập trong tập lệnh

Đây là một ví dụ

Ngoài ra, bạn có thể sử dụng một công cụ như Babel để dịch mã của mình, công cụ này sẽ chuyển đổi các câu lệnh nhập thành cú pháp cũ hơn có thể được sử dụng trong phạm vi toàn cầu. Sau đó, bạn có thể đưa mã đã dịch mã vào tài liệu HTML của mình

Sửa nó cho Node. js

Để sử dụng nhập mô-đun ES6 trong Node. js, bạn có thể đặt trường

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

2 trong tệp

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

4 của dự án để chỉ định rằng dự án của bạn sử dụng các mô-đun ES6

Đây là một ví dụ

bưu kiện. json

{
  "name": "my-project",
  "type": "module",
  ...
}

Khi bạn đã thêm trường

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

2 vào tệp

SyntaxError: Cannot use import statement outside a module

  1 | import { IonButton, IonContent, IonHeader,IonInput,IonLoading,IonPage, IonTitle, IonToolbar, IonIcon} from '@ionic/react';
> 2 | import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
    | ^
  3 | import { useEffect, useState } from 'react';
  4 | import { loginUser } from '../firebaseConfig';
  5 | import ExploreContainer from '../components/ExploreContainer';

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object. (src/pages/Login.tsx:2:1)

4 của mình, bạn có thể sử dụng câu lệnh nhập trong tệp JavaScript của dự án mà không cần sử dụng bất kỳ cờ đặc biệt nào

import myModule from './my-module';

// keep in mind that for local files, you have to append the .js extension to the module, like so:

import myModule from './my-module.js';

// if not you'll get the error: "[ERR_MODULE_NOT_FOUND]: Cannot find module".

Cách tiếp cận này có một số lợi ích. Đầu tiên, nó không yêu cầu bạn sử dụng bất kỳ cờ đặc biệt nào khi chạy Node. js, làm cho nó thuận tiện hơn. Thứ hai, nó cho phép các công cụ khác, chẳng hạn như bundler và linters, nhận ra rằng dự án của bạn sử dụng các mô-đun ES6, giúp việc sử dụng các công cụ này với dự án của bạn trở nên dễ dàng hơn

Sửa nó cho TypeScript

Để sử dụng hệ thống mô-đun CommonJS trong dự án TypeScript, bạn cần bật tùy chọn trình biên dịch

{
  "name": "my-project",
  "type": "module",
  ...
}

0 và

{
  "name": "my-project",
  "type": "module",
  ...
}

1 trong cấu hình TypeScript của mình

Các tùy chọn này cho phép TypeScript xử lý các giá trị đã nhập như thể chúng có xuất mặc định, ngay cả khi chúng không có và sử dụng cú pháp

{
  "name": "my-project",
  "type": "module",
  ...
}

2 với các mô-đun CommonJS

tsconfig. json

________số 8

Các tùy chọn này chỉ được hỗ trợ trong TypeScript 3. 8 trở về sau

Một khả năng khác là bạn đang cố chạy các tệp TypeScript của mình bằng lệnh

{
  "name": "my-project",
  "type": "module",
  ...
}

3, thay vì sử dụng một công cụ như

{
  "name": "my-project",
  "type": "module",
  ...
}

4 để dịch mã và chạy chúng

Tại sao tôi không thể sử dụng câu lệnh nhập bên ngoài mô-đun?

Tại sao tôi không thể sử dụng tính năng nhập trong NodeJS?

Làm cách nào để sử dụng câu lệnh nhập bên ngoài mô-đun trong JavaScript?

Chúng ta có thể sử dụng câu lệnh nhập trong NodeJS không?