(노드:9374) 경고:ES 모듈을 로드하려면 "type"을 설정합니다. "module"

(노드:9374) 경고:ES 모듈을 로드하려면 "type"을 설정합니다. "module"

리액트를 오늘 막 배우기 시작했어요.Visual Studio 터미널의 콘솔에서 오류 메시지를 제거하려면 어떻게 해야 합니까?

(node: 9374)Warning: To load an ES module,
 set "type": "module" in the package.json or use the .mjs extension. 
/Users/nishihaider/workspace-ui/react-todo-app/src/App.js:1

import React from "react";
import "./App.css";

function App() {
  <>
  return (
  <h1>ToDo</h1>
  );
  </>
}

export default App;

먼저 최신 버전의 Node.js를 설치합니다.그것은 최신의 가장 큰 특징을 가지고 있다.

두 번째로,"type": "module"줄서기package.json파일.

{

  "type": "module"

}

셋째,--experimental-modulesnodej를 호출할 때 플래그:

node --experimental-modules app.js

넌 가도 돼!

다른 방법으로는 패키지에 "type": "module" 행을 추가하지 않도록 하는 것입니다.json 파일을 지정하고 대신 app.filename 파일을 app.filename으로 이름을 변경합니다.

주의: 이 시점에서,require()구문은 동작을 정지합니다.

저의 접근방식은 다음과 같습니다.

1 - 패키지 업데이트json의 종류:

  "main": "index.js",
  "type":"module",

2 - Import 시 use.disples:

import {isPrime} from './isPrime.js';

3 - 여기 Prime.js가 있습니다.

export const isPrime ....

패키지를 업데이트하기만 하면 됩니다.json은

{"type": "module"}

잘 먹혔어, 고마워!

Type: 모듈을 패키지에 추가합니다.json - 도움말 :)

패키지.json 내용:

{
  "name": "react_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  }
}

node.js에서 TypeScript를 사용하고 있는 사용자로,import진술.그 설정을 찾았습니다.module중시하다es2015에서tsconfig.json이 에러는, 설정중에 표시됩니다.commonjs작동하다.

tsconfig.json

    {
     "module": "commonjs"
    }

변경만 하면 됩니다.

export default App;

이를 위해:

module.exports = App;

자녀 컴포넌트를 Import하는 부모 파일이 있기 때문에 ES 모듈에 대해서도 같은 문제가 발생합니다.내 경우 컴포넌트를 Import할 때 더 자세한 내용을 정의해야 합니다.다음과 같습니다.

import db from "../config/Database"; false
import db from "../config/Database.js"; true

또 다른 예는 다음과 같습니다.

import Users from "../models/UserModel"; incorrect
import Users from "../models/UserModel.js"; correct

왜 이렇게 해야 하는지 모르겠지만, 해보면 문제가 해결된다.이게 도움이 됐으면 좋겠다

초보자용 심플하고 빠른 솔루션

1 JS 파일 이름 변경 MJS LIKE (hello.js > hello.mjs)

2 내보내기 시 MJS 파일명을 지정합니다.(import { first } from './pg.mjs')

또한 올바르지 않은 React Fragments를 사용하여 반환문을 둘러쌉니다.반품 명세서는 다음과 같습니다.

 import React from "react";
 import "./App.css";

 function App() {
   return (
    <>
      <h1>ToDo</h1>
    </>
   );
 }

export default App;

이것이 모듈 Import/export 문제가 아니라 고객님의 문제의 원인이라고 확신합니다.

패키지에 "type": "filename" 행을 추가합니다.json 파일 대신 app.files 파일(또는 기타 파일)의 이름을 app.files로 변경합니다.

언급URL : https://stackoverflow.com/questions/63588714/node9374-warning-to-load-an-es-module-set-type-module