[오류 기록] Gulp-SASS. JS - SyntaxError , CSS 및 JS MIME type 오류 해결

내가 다시보기 위해 올리는 글이라 두서없음주의

SCSS (SASS) 를 설치하고 실행하려면 (npm install ) 생기는 오류

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated superagent@3.8.3: Please upgrade to v7.0.2+ of superagent.  We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing.  See the releases tab for more information at <https://github.com/visionmedia/superagent/releases>.
npm WARN deprecated set-value@0.2.0: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies  
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.3.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies  
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\dlsgo\AppData\Local\Temp\postinstall-caeb3446.cmd
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\dlsgo\\OneDrive\\바탕 화면\\코딩온\\알공(알아서공부)\\수정중\\node_modules\\node-gyp\\bin\\node-gyp.js',    
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.17.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\isexe\index.js:42:5       
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\isexe\windows.js:36:5     
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:206:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-gyp\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\isexe\index.js:42:5       
npm ERR! gyp verb `which` failed     at C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\isexe\windows.js:36:5     
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:206:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:400:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1093:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\dlsgo\\OneDrive\\바탕 화면\\코딩온\\알공(알아서공부)\\수정중\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="        
npm ERR! gyp ERR! cwd C:\Users\dlsgo\OneDrive\바탕 화면\코딩온\알공(알아서공부)\수정중\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.17.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dlsgo\AppData\Local\npm-cache\_logs\2022-12-18T14_23_15_386Z-debug-0.log

지독한 오류였다.

원인은 여기서 알았다. 버전이 달랐던 것!

[npmError] npm ERR! code 1

npm ERR! code 1npm ERR! path /Users/...npm ERR! command failednode 버전을 업데이트 하고, 프로젝트를 클론받고, npm install 하는데 에러가 발생했다.검색 해 보니 package.json 파일 안을 수정해야 한

velog.io

https://heytech.tistory.com/427

[JavaScript] npm 모듈 재설치 방법(feat. 모듈 삭제 방법)

Step 1. 디렉토리 접근 터미널을 통해 package-lock.json과 node-modules 폴더가 위치한 디렉토리로 이동합니다. Step 2. package-lock.json 삭제 rm -rf package-lock.json Step 3. node-modules 삭제 rm -rf node-modules Step 4. npm 모

heytech.tistory.com

해결 :

package-lock.json 및 node-modules를 삭제하고 다시 하는 중,

일단 오류가 아주아주 짧아졌다!

참고한 블로그와 달리, 나는 node-sass가 아닌 gulp-sass 였기에 다시 수정해야 했다.

버전을 먼저 찾고,

$ npm view gulp-sass versions
[
  '0.1.0', '0.2.1',      '0.2.2',
  '0.2.3', '0.3.0',      '0.4.0',
  '0.4.1', '0.5.0',      '0.5.1',
  '0.5.2', '0.6.0',      '0.7.0',
  '0.7.1', '0.7.2',      '0.7.3',
  '1.0.0', '1.1.0',      '1.2.0',
  '1.2.1', '1.2.2',      '1.2.3',
  '1.2.4', '1.3.0',      '1.3.1',
  '1.3.2', '1.3.3',      '2.0.0-alpha.1',
  '2.0.0', '2.0.2',      '2.0.3',
  '2.0.4', '2.1.0-beta', '2.1.0',
  '2.1.1', '2.2.0',      '2.3.0-beta.1',
  '2.3.0', '2.3.1',      '2.3.2',
  '3.0.0', '3.1.0',      '3.2.0',
  '3.2.1', '4.0.0',      '4.0.1',
  '4.0.2', '4.1.0',      '4.1.1',
  '5.0.0', '5.1.0'
]

install 하니 잘된다....!!!

이번엔 .eslint 가 말썽이다.

Parsing error: The keyword 'const' is reserved

우선 방법은

.eslint.json만들기 혹은 .eslint 를 수정하기 인것 같았다.

VSCode ESLint 자동으로 적용하기

[참고자료] [VSCode] ESLINT 자동 적용하기 How to apply eslint automatically blog.whitekiwi.link eslint: error Parsing error: The keyword 'const' is reserved I am getting this error from ESLint: error Parsing error: The keyword 'const' is reserved

ek12mv2.tistory.com

1번 방법은 소용이 없었다.

https://github.com/adobe/brackets/issues/14960

ERROR: Parsing Error: The keyword 'const' is reserved · Issue #14960 · adobe/brackets

Prerequisites Can you reproduce the problem with Debug -> Reload Without Extensions? Did you perform a cursory search to see if your bug or enhancement is already reported? Did you read the Trou...

github.com

https://github.com/hyoungqu23/Hyoungmin_Portfolio/pull/24

ESLint Airbnb 설정 추가 by hyoungqu23 · Pull Request #24 · hyoungqu23/Hyoungmin_Portfolio

추가 사항 Airbnb ESLint 관련 의존성 추가(참고) ESLint 설정에 Airbnb 추가 수정된 Lint 규칙에 맞게 기존 코드 변경 parserOptions.project 에러로 인해 .eslint.json -> .eslint.ts 확장자 변경(참고) next.config.js의 Par

github.com

앞에서 고친 오류처럼 버전 차이인거같아 수정을 해보았다.

{
  "extends": "airbnb-base",
  "env": {
    "es6": true,
    "browser": true,
    "jquery": true
  },
  "rules": {
    "padded-blocks": "off",
    "no-console": "off",
    "no-unused-expressions": "off",
    "spaced-comment": "off",
    "comma-dangle": "off",
    "function-paren-newline": "off",
    "implicit-arrow-linebreak": "off",
    "import/named": "off",
    "import/no-extraneous-dependencies": "off",
    "arrow-parens": "off",
    "quotes": "off"
  },
  "parserOptions": {
    "ecmaVersion": 2022
  }
}

기존거와 충돌 날 듯해서 다시 롤백함.. (2020 버전)

여전히 const에는 밑줄이..

근데 내용은 바뀌었다.

Parsing error: Invalid ecmaVersion

다시시도.

https://github.com/microsoft/vscode-eslint/issues/1459

updating to eslint 8 generates "Parsing error: Invalid ecmaVersion.eslint" · Issue #1459 · microsoft/vscode-eslint

"eslint": "8.14.0", "eslint-config-standard": "17.0.0", "eslint-plugin-import": "2.26.0", "eslint-plugin-n": "15.2.0"...

github.com

ESlint 사용법 다시 숙지하러

https://poiemaweb.com/eslint

ESLint | PoiemaWeb

코드 linting은 특정 스타일 가이드를 따르지 않거나 문제가 있는 패턴이나 코드를 찾기 위해 사용되는 정적 분석 툴이다. ESLint는 처음부터 유용하게 사용할 수있는 built-in rule을 제공하지만 개발

poiemaweb.com

https://www.daleseo.com/eslint-config/

ESLint 상세 설정 가이드

Engineering Blog by Dale Seo

www.daleseo.com

근데 settings.json을 못찾다가 구글링

VSCode ESlint 설정

VSCode로 자바스크립트를 연습하고 있는데자신이 원하는 에러 메시지(변수 재선언할 경우, 세미콜론을 꼭 붙이도록 할 경우 등)를에디터가 출력하게 하고 싶은 경우가 있다기본적으로 JS의 경우

steadyzest.tistory.com

{
  "workbench.colorTheme": "Default High Contrast",
  "git.autofetch": true,
  "terminal.integrated.defaultProfile.windows": "Git Bash", -> powershell에서 변경 
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "afterDelay",
  "eslint.validate": ["html", "javascript"], --> 사용하는 언어추가하기 
  "settingsSync.ignoredExtensions": [
  ]
}

근데 아,직,도 안됨

Parsing error: Invalid ecmaVersion.eslint

그만 떠주라 이 에러,,,

https://seogeurim.tistory.com/15?category=981579

내 프로젝트에 ESLint & Prettier 도입하기 (VSCode)

본 글은 2020년에 작성된 글입니다. Lint란 실보푸라기를 의미한다. 보푸라기가 많은 옷은 보기 좋지 않고, 오래 입기 힘들 것이다. 하지만 입을 수는 있겠지. 프로그래밍에서도 이런 보푸라기가

seogeurim.tistory.com

$ npx install-peerdeps --dev eslint-config-airbnb

해결 :

1. ctrl + . 을 해서 fix all auto를 하거나 ,

Disable ~ entire file을 해서 이 파일 내에서는 설정 무시.

2. CRLF 를 LF로 일일이 변환....

오류 그만 나자 진짜 제발

이번엔 또 다른 오류, 이건 좀 간단하게 해결했다.

JS - Uncaught SyntaxError: Unexpected token '<'

결론을 먼저 얘기하자면,

자바스크립트를 include 하는 부분에서 js를 리턴해야하는데 html을 리턴했어서 (index.html 을 반환하고 있었음) SyntaxError가 뜬 것이었다.

간단하게, 그냥 파일명 자체를 index.ejs로 해주면 끝.

(참고로 아래 해결법과는 다르다. 다만 원인이 같아서 참고용으로 올림)

[JS]Uncaught SyntaxError: Unexpected token '<'

웹사이트를 만들고나서 개발자모드로 확인하던 도중 오류를 발견하게 되었어. 말그대로 '

egg-stone.tistory.com

ESlint는 일단 CRLF를 LF로 일일이 바꾸면서 대응하는데, 서버로 돌리자마자 또!!!!! 오류가 났다.

MIMETYPE ERROR

because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

오류 메세지를 읽어보자.

F12 개발자 도구의 콘솔 오류 메시지

F12 개발자 도구의 콘솔 오류 메시지 이 참조를 사용하여 Internet Explorer 11의 콘솔 및 디버거에 표시된 오류 메시지를 해석합니다. 소개 F12 개발자 도구를 사용하여 디버그하는 경우 SEC7111 또는 HTML

sqlplus.tistory.com

이 두 문장이 반복해서 나오고 있는 것 같다.

먼저, CSS 의 파일 경로가 달라져서 안나오는 것 같다.

기존파일의 설정은 public안에 css나 img가 들어가있는데,

내가 팀원들과 사용할 설정은 views안에 들어가야 한다.

해결하기

index.ejs를 public에 일단 옮긴후 public자체를 rename

근데 그게 안되네..

Error: EPERM: operation not permitted, rename

다시 구글링

CSS 쪽은 해결 완료

원인 : 파일을 여러개를 병합하고 수정하는 과정에서 경로가 옮겨짐

그리고 팀원의 폴더구조와 달라서, index.js 를 옮겨오는 과정에서 파일설정이 달라 불러와지지 않음.

해결 :

CSS 경로 재설정 및 index.js의 파일에서 static 부분을 변경

const express = require("express");

const app = express();
const port = 8080;
const router = require("./routes");

app.set("view engine", "ejs");

app.use("/public/static", express.static(`${__dirname}/public/static`));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use("/", router);

// app.get("*", (req, res) => {
//   res.send("주소가 존재하지 않습니다. 다시 한 번 확인해주세요.");
// });

app.listen(port, () => {
  console.log("server open: ", port);
});

이제 Js를 처리하자

Javascript - Refused to execute script from 'http://XXX' because its MIME type ('application/octet-stream') is not executable, a

script 파일을 불러 오려고 하는데 MIME type checking is enabled. 라고 뜨면서 에러가 났다. 불러 오려는 파일 타입 Content-Type을 명시 해줘야 에러가 나지 않는다. 내 경우에는 타입을 type="application/octet-str

5coding.tistory.com

수많은 문서를 참고한 끝에 해결법을 알았다

https://solbel.tistory.com/2195

[html] MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled 에러 해결방법

[html] MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled 에러 해결방법 페이지에 css 와 js 등 리소스를 로드해서 사용하려고 하다보면 아래와 같은 오류가 발생하는 경

solbel.tistory.com

이 블로그를 참고해서 ,

    <script type="application/js" src="vendors/@popperjs/popper.min.js"></script>
    <script type="application/js" src="vendors/bootstrap/bootstrap.min.js"></script>
    <script type="application/js" src="vendors/is/is.min.js"></script>
    <script type="application/js" src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script type="application/js" src="vendors/fontawesome/all.min.js"></script>
    <script type="application/js" src="/public/static/js/theme.js"></script>

타입 지정을 이렇게 해주었더니 드디어,,,, 읽힌다!!!!!!

드디어.......... 약 2일반의 걸친 여정이 끝났다..

다시 프로젝트하러 Go..

저작자표시 비영리 변경금지

'[Dev] 🎯Self Study' 카테고리의 다른 글

[React] 기본 세팅부터, 코드 스니펫 (0)	2023.01.13
[Eslint 에러 해결] (0)	2023.01.05
[Notion] 노션 입문하기 (대시보드와 단축키) (0)	2022.10.31
[Git 오류해결] Git & VScode에서, push 오류 해결하기 (0)	2022.10.29
[Self Study] AWS 메일, Free Tier limit alert 해결법 (0)	2022.10.28

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

[오류 기록] Gulp-SASS. JS - SyntaxError , CSS 및 JS MIME type 오류 해결

내가 다시보기 위해 올리는 글이라 두서없음주의

SCSS (SASS) 를 설치하고 실행하려면 (npm install ) 생기는 오류

지독한 오류였다.

원인은 여기서 알았다. 버전이 달랐던 것!

해결 :

package-lock.json 및 node-modules를 삭제하고 다시 하는 중,

일단 오류가 아주아주 짧아졌다!

참고한 블로그와 달리, 나는 node-sass가 아닌 gulp-sass 였기에 다시 수정해야 했다.

버전을 먼저 찾고,

최신버전으로 다시보고, 맞게 바꾼다.

install 하니 잘된다....!!!

이번엔 .eslint 가 말썽이다.

우선 방법은

.eslint.json만들기 혹은 .eslint 를 수정하기 인것 같았다.

1번 방법은 소용이 없었다.

앞에서 고친 오류처럼 버전 차이인거같아 수정을 해보았다.

기존거와 충돌 날 듯해서 다시 롤백함.. (2020 버전)

여전히 const에는 밑줄이..

근데 내용은 바뀌었다.

다시시도.

ESlint 사용법 다시 숙지하러

근데 settings.json을 못찾다가 구글링

근데 아,직,도 안됨

그만 떠주라 이 에러,,,

해결 :

1. ctrl + . 을 해서 fix all auto를 하거나 ,

Disable ~ entire file을 해서 이 파일 내에서는 설정 무시.

2. CRLF 를 LF로 일일이 변환....

오류 그만 나자 진짜 제발

이번엔 또 다른 오류, 이건 좀 간단하게 해결했다.

JS - Uncaught SyntaxError: Unexpected token '<'

결론을 먼저 얘기하자면,

자바스크립트를 include 하는 부분에서 js를 리턴해야하는데 html을 리턴했어서 (index.html 을 반환하고 있었음) SyntaxError가 뜬 것이었다.

간단하게, 그냥 파일명 자체를 index.ejs로 해주면 끝.

(참고로 아래 해결법과는 다르다. 다만 원인이 같아서 참고용으로 올림)

ESlint는 일단 CRLF를 LF로 일일이 바꾸면서 대응하는데, 서버로 돌리자마자 또!!!!! 오류가 났다.

MIMETYPE ERROR

오류 메세지를 읽어보자.

이 두 문장이 반복해서 나오고 있는 것 같다.

먼저, CSS 의 파일 경로가 달라져서 안나오는 것 같다.

기존파일의 설정은 public안에 css나 img가 들어가있는데,

내가 팀원들과 사용할 설정은 views안에 들어가야 한다.

해결하기

index.ejs를 public에 일단 옮긴후 public자체를 rename

근데 그게 안되네..

다시 구글링

CSS 쪽은 해결 완료

원인 : 파일을 여러개를 병합하고 수정하는 과정에서 경로가 옮겨짐

그리고 팀원의 폴더구조와 달라서, index.js 를 옮겨오는 과정에서 파일설정이 달라 불러와지지 않음.

해결 :

CSS 경로 재설정 및 index.js의 파일에서 static 부분을 변경

이제 Js를 처리하자

수많은 문서를 참고한 끝에 해결법을 알았다

이 블로그를 참고해서 ,

타입 지정을 이렇게 해주었더니 드디어,,,, 읽힌다!!!!!!

드디어.......... 약 2일반의 걸친 여정이 끝났다..

'[Dev] 🎯Self Study' 카테고리의 다른 글

'[Dev] 🎯Self Study' 관련글

티스토리툴바