[React] Frontity(프론티티) 설치 및 오류 – 워드프레스를 위한 프론트엔드 프레임워크

워드프레스 사이트에서는 테마라는 것을 다운받아 자신의 사이트의 구성을 조금 건드릴 수 있다. 하지만 react를 먼저 배우고 나니 워드프레스의 테마가 정해준 것들만 움직일 수 있다는 것이 조금 답답한 마음이 있었다. 그러다가 프론트엔드 프레임워크로 사이트를 다루어서 워드프레스 사이트에서 보여줄 순 없을까? 하다가 찾은 것이 Frontity(프론티티) 였다. 프론티티 설치를 하다가 오류도 발생했는데 같은 오류가 발생한 사람들에게 도움이 되었으면 한다…

먼저 프론티티를 설치하기 위해서는 node.js를 설치해야 한다. node.js는 아래 버튼을 클릭해서 사이트에서 다운로드하자. 다운로드 한 뒤 하라는 대로 다 따라가 주면 설치 끝.

Frontity(프론티티) 설치

node.js를 다운받고 나면 npm, npx 명령어를 사용할 수 있을 텐데 아래 명령어를 ‘명령 프롬포트’에 입력해주자. 아래 명령어는 바로 프론티티 폴더를 만드는 명령어로 바로 폴더를 생성하기 때문에 cd 명령어를 이용해서 원하는 폴더로 가서 입력하자.

npx frontity create my-first-frontity-project

커맨드 창에 입력시 설치가 시작된다. 워드프레스의 기본 테마인 twenty-twenty? mars-theme로 두 개의 테마 옵션 설정이 있는데 Frontity에서 주어지는 것 중 나중에 고칠 것이기 때문에 아무거나 해도 무방하다.

 cd my-first-frontity-project

위 명령어를 입력하여 만들어진 폴더로 경로를 이동 할 수 있다.

npx frontity dev

위 명령어를 작성하여 개발 모드로 사이트를 열어서 들어 갈 수 있다.

에러..

본인은 입력하자 마자 에러가 발생했다. 다른 사람들 것을 보고 다시 해봐도 똑같은 에러가 발생했다…

 ERROR in ./node_modules/@loadable/server/dist/esm/loadable-server.esm.mjs 11:16-66
    Can't import the named export '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' from non EcmaScript module (only default export is available)
     @ ./node_modules/@frontity/core/src/server/utils/custom-chunk-extractor.ts
     @ ./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts
     @ ./node_modules/@frontity/core/src/server/index.ts
     @ ./build/bundling/entry-points/server.ts

    ERROR in ./node_modules/@loadable/server/dist/esm/loadable-server.esm.mjs 12:14-64
    Can't import the named export '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' from non EcmaScript module (only default export is available)
     @ ./node_modules/@frontity/core/src/server/utils/custom-chunk-extractor.ts
     @ ./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts
     @ ./node_modules/@frontity/core/src/server/index.ts
     @ ./build/bundling/entry-points/server.ts

    ERROR in ./node_modules/@loadable/server/dist/esm/loadable-server.esm.mjs 13:26-76
    Can't import the named export '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' from non EcmaScript module (only default export is available)
     @ ./node_modules/@frontity/core/src/server/utils/custom-chunk-extractor.ts
     @ ./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts
     @ ./node_modules/@frontity/core/src/server/index.ts
     @ ./build/bundling/entry-points/server.ts
i ｢wdm｣: Failed to compile.
ModuleDependencyError: Can't import the named export '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' from non EcmaScript module (only default export is available)
~~~~

위 에러는 ‘__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’가 EcmaScript 모듈에서 제대로 import 되고 있지 않다는 것이었는데, 에러 3개가 전부 ‘./node_modules/@loadable/server/dist/esm/loadable-server.esm.mjs’에서 발생하고 있어서 ‘/loadable-server.esm.mjs’로 가봤다.

import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@loadable/component';
~
~

var invariant = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.invariant,
    Context = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Context,
    getRequiredChunkKey = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.getRequiredChunkKey;

문제상황

안에는 이런 내용으로 에러와 같은 코드가 있는 것을 볼 수 있었다. ‘invariant’, ‘Context’, ‘getRequiredChunkKey’ 모두 ‘@loadable/component’에서 불러온 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 함수에서 불러온다는 것을 확인하였다.

문제해결

먼저 ‘__SECRET_INTE~~’ 라는 것을 어디서 불러오는 지 알기 위해 먼저 기존에 있던 것을 주석처리하고 ‘import { __SECRET~~}’를 해봤는데 아무것도 불러와지지 않았다. 그래서 ‘@loadable/component’으로 들어가봤는데 에러에서 보이는 ‘__SECRET_INTER~~’라는 건 없었다… 오류 메세지 중에 (only default export is available)라는 문구가 있어서 default export 에러의 원인을 알아보기 위해 구글링 하니 코드에서 일반적으로 export 할 때는 ‘import { 함수명 } from *’의 형태로 가져오는데 만약 ‘export default ~~’ 일때는 ‘import 함수명 from *’ 로 가져와야 한다는 사실을 알아냈다. ‘loadable’ 내부 코드에 export default loadable;를 발견하고 나서 다시 ‘loadable-server.esm.mjs’ 파일로 가서 ‘__SECRET_INTERNAL~~’가 import 되있던 코드를 지우고 ‘loadable’을 가져오도록 코드를 수정했다. 그 뒤에 loadable.__SECRET~~로 수정하여 변수들을 불러왔더니 잘 작동 되는 것을 확인 할 수 있었다.

요약

1. ‘./node_modules/@loadable/server/dist/esm/loadable-server.esm.mjs’에서 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED’가 불러와지지 않음.
2. export를 할 때 default export와 차이점이 있다는 것을 확인.
3. ‘@loadable/component’에는 export가 default export로 되있는 것을 확인.
4. 다시 ‘loadable-server.esm.mjs’로 가서 import를 수정하고 변수를 불러오는 코드도 수정.
5. 해결

import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@loadable/component';
~
~

var invariant = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.invariant,
    Context = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Context,
    getRequiredChunkKey = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.getRequiredChunkKey;

↓

//import { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@loadable/component';
import loadable from '@loadable/component';

~~
//var invariant = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.invariant,    Context = //__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Context,    getRequiredChunkKey = //__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.getRequiredChunkKey;

const { invariant, Context, getRequiredChunkKey } = loadable.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

로 수정하면 해결.

만들어진 프론티티 사이트

자신의 워드프레스 사이트와 연결하기 위해서는 ‘frontity.settings.js’ 파일의 코드에 48번째 줄에 "url": "https://test.frontity.org" 이런 부분이 있는데 여기에 사이트 주소를 넣어주면 연결되어 자신이 쓴 글들이 목록별로 나열되어 있는 것을 볼 수 있다.

이제 package/mars-theme/src/components의 경로에서 index.js로 가면 기본적으로 테마를 설치해서 완성되있는 컴포넌트들이 있는데 각 파일로 가서 코드를 하나씩 수정해주면 진짜 자신만의 워드프레스 사이트를 만들 수 있다.

처음 Frontity를 설치할 때 다른 사람들은 잘 되는데 본인만 안되고, 또 같은 오류가 나온 사람들 것을 참고해서 따라해도 해결이 안되서 마음만 급해지면서 생각보다 오류를 해결하는데 오래 걸렸다. 하루 날잡고 마음 편하게 찾아보니 생각보다 간단하게 해결되서 살짝 허무한 느낌…

참조 – export, default export 차이점

최신글

• 
  [프로그래머스] 잘라서 배열로 저장하기 – 자바
• 
  [프로그래머스] 붕대 감기 – 자바
• 
  [프로그래머스] 달리기 경주 – 자바