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àoimport 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ìnhCá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 CommonJStsconfig. json
________số 8Cá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