search

CAFECA-IO / iSunCoin-official

https://i-sun-coin-official.vercel.app
MIT License
0 stars 0 forks source link

解決 build error #25

Closed godmmt closed 2 weeks ago

godmmt commented 2 weeks ago

無法 build 成功

需要排查是否在專案建立時有錯誤的設定，或哪裡缺少。

pre commit 的部分也要重新排查。

排查後有新增:

有成功啟動 airbnb eslint 了

然後又出現以下新的錯誤：

build Error message

liz at LMP in ~/Desktop/iSunCoin-official (feature/layout-and-navbar●) 
$ npm run build

> isuncoin-official@0.1.0 build
> next build

  ▲ Next.js 14.2.3

Failed to compile.

./src/pages/_app.tsx
7:5  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
7:10  Warning: Classname 'font-barlow' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
8:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope

./src/pages/_document.tsx
6:5  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
7:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
7:7  Error: Empty components are self-closing  react/self-closing-comp
8:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
9:9  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
10:9  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope

./src/pages/index.tsx
5:5  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
6:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope
7:7  Error: 'React' must be in scope when using JSX  react/react-in-jsx-scope

./src/tests/sample.test.ts
1:10  Error: Strings must use singlequote.  @typescript-eslint/quotes
2:8  Error: Strings must use singlequote.  @typescript-eslint/quotes

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
   Linting and checking validity of types  .%
godmmt commented 2 weeks ago

上面的錯誤解決後，出現新錯誤

Error message

liz at LMP in ~/Desktop/iSunCoin-official (feature/layout-and-navbar●●) 
$ npm run build

> isuncoin-official@0.1.0 build
> next build

  ▲ Next.js 14.2.3

./src/pages/_app.tsx
8:10  Warning: Classname 'font-barlow' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
8:10  Warning: Classname 'selection:bg-text-brand-primary-lv3' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
8:10  Warning: Classname 'selection:text-button-surface-strong-secondary' is not a Tailwind CSS class!  tailwindcss/no-custom-classname

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     4.13 kB        82.4 kB
├   /_app                                 0 B            78.3 kB
└ ○ /404                                  180 B          78.5 kB
+ First Load JS shared by all             85.3 kB
  ├ chunks/framework-ecc4130bc7a58a64.js  45.2 kB
  ├ chunks/main-48a2be0192cdda09.js       32 kB
  └ other shared chunks (total)           8.06 kB

○  (Static)  prerendered as static content
godmmt commented 2 weeks ago

這跟 TailwindCSS 設定有關。

目前檢查兩個檔案都正常，與 iSunFA 設定一致

但不曉得為什麼吃不到 TailwindCSS 自訂

godmmt commented 2 weeks ago

參考：https://tailwindcss.com/docs/guides/nextjs

重新安裝：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

重新啟動 vscode 重新 run dev 重新 run build

目前的錯誤來到：

liz at LMP in ~/Desktop/iSunCoin-official (feature/layout-and-navbar●●●) 
$ npm run build

> isuncoin-official@0.1.0 build
> next build

  ▲ Next.js 14.2.3

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     4.13 kB        82.4 kB
├   /_app                                 0 B            78.3 kB
└ ○ /404                                  180 B          78.4 kB
+ First Load JS shared by all             85.1 kB
  ├ chunks/framework-ecc4130bc7a58a64.js  45.2 kB
  ├ chunks/main-48a2be0192cdda09.js       32 kB
  └ other shared chunks (total)           7.95 kB

○  (Static)  prerendered as static content

要參考這篇文章解決： https://tailwindcss.com/docs/content-configuration

godmmt commented 2 weeks ago

重開所有終端機再次重打後，突然就沒錯誤了⋯⋯

總之每次都要嘗試重開終端機以及 npm install 再次 run dev 和 build

截圖 2024-06-13 下午5 51 10

godmmt commented 2 weeks ago

New Error

這是關於使用 Image 會產生的問題

// pages/index.tsx
import Image from 'next/image';
import React from 'react';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Image src="/vercel.svg" alt="vercel_logo" width={72} height={16} />
    </div>
  );
}

run dev Error

liz at LMP in ~/Desktop/iSunCoin-official (feature/layout-and-navbar●) 
$ npm run dev

> isuncoin-official@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 4.9s
 ○ Compiling / ...
 ✓ Compiled / in 4.2s (289 modules)
 GET /_next/static/webpack/175726e21886a84a.webpack.hot-update.json 404 in 4364ms
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:136:11)
    at eval (webpack-internal:///./node_modules/next/dist/client/image-component.js:245:47)
    at div
    at Home
    at div
    at MyApp (webpack-internal:///./src/pages/_app.tsx:15:18)
    at StyleRegistry (/Users/liz/Desktop/iSunCoin-official/node_modules/styled-jsx/dist/index/index.js:449:36)
    at eU (/Users/liz/Desktop/iSunCoin-official/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:20468)
    at eH (/Users/liz/Desktop/iSunCoin-official/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1765)
    at eJ (/Users/liz/Desktop/iSunCoin-official/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3068)
    at div
    at e9 (/Users/liz/Desktop/iSunCoin-official/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:761)
 ⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 GET / 200 in 4506ms
 GET / 200 in 147ms

run build (No Error)

liz at LMP in ~/Desktop/iSunCoin-official (feature/layout-and-navbar●) 
$ npm run build

> isuncoin-official@0.1.0 build
> next build

  ▲ Next.js 14.2.3

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     4.12 kB        82.4 kB
├   /_app                                 0 B            78.3 kB
└ ○ /404                                  180 B          78.5 kB
+ First Load JS shared by all             85.3 kB
  ├ chunks/framework-ecc4130bc7a58a64.js  45.2 kB
  ├ chunks/main-48a2be0192cdda09.js       32 kB
  └ other shared chunks (total)           8.09 kB

○  (Static)  prerendered as static content

?

不過目前也沒有用到 Image 而這個問題也沒有影響到 run build 所以可以另外開單 等之後有用到 Image 的話再處理

godmmt commented 2 weeks ago

把 Image 拿掉就一切正常：

截圖 2024-06-13 下午6 23 14

godmmt commented 2 weeks ago

took 4 hours

done

godmmt commented 2 weeks ago

這個 issue 綁的 PR #26 被打叉叉是因為 #26 & #30 只會擇一合併進入 main 主分支 最後是 #30 被選擇

26 就被棄用了

所以這個 issue 是已經完成的 ✅