[JS] regeneratorruntime is not defined 에러 해결 방법.

flyda 2022. 5. 2. 13:03

main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="./main.css">
  <script defer src="./main.js"></script>
</head>

<body>
  <div class="movies"></div>
  <div class="another-movies"></div>
  <button>More..</button>
</body>

</html>

main.js

const moviesEl = document.querySelector('.movies')
const anotherMoviesEl = document.querySelector('.another-movies')
getMovie(1, moviesEl)
getMovie(1, anotherMoviesEl)

const btnEl = document.querySelector('button')
btnEl.addEventListener('click', () => {
  getMovie(2, moviesEl)
})

async function getMovie(page, containerEl) {
  const { data } = await axios({
    url: `https://www.omdbapi.com?apikey=발급받은키&s=frozen&page=${page}`,
    method: 'GET'
  })
  console.log(data)
  const movies = data.Search
  renderMovies(movies, containerEl)
}
function renderMovies(movies, containerEl) {
  movies.forEach(movie => {
    console.log(movie)
    const movieEl = document.createElement('div')
    movieEl.textContent = movie.Title
    containerEl.append(movieEl)
  })
}

이 코드를 실행하는 데, PARCEL 번들러를 사용하니까 다음과 같은 에러가 났다.

강사님이 해결해 주셨는데, 그냥 regenerator-runtime을 설치하고 js 파일에 import를 해주니까 실행이 되었다.

npm info regenerator-runtime

npm i regenerator-runtime

그리고 import를 추가한 코드는 다음과 같다

import 'regenerator-runtime'
const moviesEl = document.querySelector('.movies')
const anotherMoviesEl = document.querySelector('.another-movies')
getMovie(1, moviesEl)
getMovie(1, anotherMoviesEl)

const btnEl = document.querySelector('button')
btnEl.addEventListener('click', () => {
  getMovie(2, moviesEl)
})

async function getMovie(page, containerEl) {
  const { data } = await axios({
    url: `https://www.omdbapi.com?apikey=발급받은키&s=frozen&page=${page}`,
    method: 'GET'
  })
  console.log(data)
  const movies = data.Search
  renderMovies(movies, containerEl)
}
function renderMovies(movies, containerEl) {
  movies.forEach(movie => {
    console.log(movie)
    const movieEl = document.createElement('div')
    movieEl.textContent = movie.Title
    containerEl.append(movieEl)
  })
}

저작자표시 비영리 (새창열림)