CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

이번 에러는 에러라고 하기에는 애매하고, VSCode를 사용할 때에 발생할 수 있는 내용입니다.

프로젝트는 잘 구동되지만, 에러가 신경쓰였습니다.

Cannot find module './App.vue' or its corresponding type declarations.

src/main.ts 에서 [ import App from '@/App.vue' ] 부분에 밑줄이 그어지면서 에러라고 표기되었습니다.

✔ 해결방법

extensions - @builtin typescript - 설정(settings) - Disable(workspace) 를 해줍니다. 

그리고 reload VSCode! 

이제 빨간 에러문구가 뜨지않는것으로 확인하였습니다.

✔ 원인

이 extension이 .vue 파일을 제대로 읽어내지 못하기 때문인 것으로 보입니다.

진짜 별거 아닌데, 신경쓰여서..

이상입니다.

안녕하세요 상훈입니다.

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json에서 type: 'module' 을 추가해주세요.

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

사용환경 : Vue.js 3, Firebase 9.1.5

youtube에 있는 동영상 강의를 보던 와중 자꾸 firebase 관련한 에러가 해결이 안되어서 직접 찾아보고 적용하여 성공하였다.

1. 모듈 생성 (module exports part.)
2. 실제 적용 위치

이렇게 두 가지로 나뉘어서 어느곳에서도 사용할 수 있도록 모듈을 생성해놓았다.
그리고 실제 적용 위치에 대한 내용을 작성하도록 하겠다.

1. Module exports = { } !

firebase 8번대의 버전부터 이전과는 다르게 적용해야한다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 프로젝트 생성 후 받은 정보를 복사 붙여넣기 해주시면 됩니다.
const firebaseApp = initializeApp({
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
})
const db = getFirestore(firebaseApp)
export default db

initializeApp ({ }) 내부에 들어갈 내용으로는 이곳을 참고하면 된다.

>> 그래도 잘 모르시겠다면 이 글의 맨 마지막에 찾는 방법을 작성해놓았습니다. 확인부탁드립니다.

2. 실제 적용 위치

해당 함수를 호출할 때에는 반드시 Promise 방식인 async await을 적용해서 작성해야 한다.

import db from '@/firebase/firebaseInit.js'
import { doc, setDoc } from "firebase/firestore";

methods: {
    async uploadInvoice () {	// async 함수 를 작성     
        // 저장될 데이터 내용
        const docData = {
          ...
        }
        //await 로 담아주기 
        await setDoc(doc(db, "data", "one"), docData);
        // 후처리는 알아서!
      }
}

해당 내용을 실행 후, 파이어베이스 프로젝트로 이동하여 내용을 보면, 아래와 같이 데이터가 들어가있음을 확인이 가능하다.

끝~!

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

만약, 내 key 관련한 정보를 찾지 못하겠으면 아래의 경로로 들어가주시면 확인이 가능합니다.

본인의 프로젝트 - 앱 소개 - setting - 일반 - 아래 스크롤(내 앱) 

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

안녕하세요 상훈입니다.

Vue.js 3,  Tailwind.css 를 설치하여 프로젝트를 npm run serve 를 통해 실행하였는데 에러가 발생하였습니다.

 ERROR  Failed to compile with 1 error                                                                                                                                                                            오후 6:00:02
 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- D:\Projects\loading-view\noop.js

(@D:\Projects\loading-view\postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.219.105:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

개략 Tailwindcss의 module을 찾을 수 없다는 문제인데요, 

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

를 명령어로 입력(설치)해주신 뒤,

module.exports = {
  purge: {  content: ['./public/**/*.html', './src/**/*.vue'] },
  //  ...
}

위의 내용을

 이와 같이 tailwind.config.js 에 작성해주고 저장해주세요.

그리고 다시 프로젝트 구동 "npm run serve" 해주시면 정상적으로 실행이 됩니다.

이상입니다.

참고

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14
    at assertSupportedNodeVersion

Error:  You are using an unsupported version of Node. Please update to at least Node v12.14 at assertSupportedNodeVersion

그래서 업데이트를 진행하였는데 추가적인 에러가발생하여 node 자체를 지우고 재설치를 하게되었다.

1. node.js 제거 과정 (디렉터리와 bash 내용을 전부 삭제)

sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node /opt/local/include/node /opt/local/lib/node_modules 

sudo rm -rf /usr/local/lib/node* ; sudo rm -rf /usr/local/include/node* ; sudo rm -rf /usr/local/bin/node*

sudo apt-get purge nodejs npm

2. node.js 설치과정

sudo apt install nodejs

sudo apt install npm

// cache 제거. 안해주시면 에러 발생가능성이 있습니다.
sudo npm cache clean -f 

// 전역에서 사용가능하게 npm을 n이라는 이름으로 다운로드
sudo npm install -g n

// 안정화 버전을 설치
sudo n stable

3. 확인

node -v
v16.13.0

npm -v
8.1.0

자꾸 오류 나고 그래서 삭제만 8번 넘게 진행한 것 같네요.

억울하고 분통터져

원래 뭘 진행하려고 했는지도 머리속에서 증발하게 되었습니다. ㅎㅎ 
다시 무엇을 하려고했는지 떠나요~

참고

기타 등등..

안녕하세요 상훈입니다.

Vue.js - Tailwind.css 를 적용하려고 하는데 에러가 발생하였습니다.

This relative module was not found: * ./assets/index.css?vue&type=style&index=0&lang=css in ./src/App.vue

This relative module was not found: * ./routes/index.js in ./src/main.js

자세히 보니 경로가 잘못되었더군요

그래서 본래 

였던 것을 

로 변경하였습니다.

그리고 다시 

npm run serve를 통해 vue-cli를 실행시켜주니, 에러가 해결되었습니다.

만약 이런 사소한 경로 잡는 문제로 해결이 안된다면, 아래의 해당 블로그를 참조 바랍니다.

이상입니다. 감사합니다.