Forum Mjukvara Linux och övriga operativsystem Tråd

Linux Ubuntu Server 22.04 = Next JS och Docker

1
Skriv svar
Permalänk
Medlem
●

Linux Ubuntu Server 22.04 = Next JS och Docker

Hej

Jag har en Linux Server Ubuntu 22.04 med docker (Docker-Compose). Har skapat en app ArtikelStatus i Next JS där jag har laddat över hela projektet till roten av ArtikelStatus på Linuxserver. Jag labbar med samma struktur lokalt på datorn must i detta skede.

Lite generella funderingar:
Jag kör vill köra Yarn och inte npm. Tror att mitt problem vid prod build via "Next build" kommandot har att göra en konflikt mellan Yarn och NPM???

Vad jag vet behöver man den modulmappen för att allt ska fungera men Yarn är det inte istället för NPM????

Försöker jag nu bygga prod build med "next build" får jag felen nedan:

PS C:\Projekt - Lokalt\Artikelstatus> next build
- info Creating an optimized production build
- info Compiled successfully

./pages/ArtikelStatus.tsx
73:8  Warning: React Hook useEffect has a missing dependency: 'changeArticelList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types
- info Collecting page data ..currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
- info Collecting page data
[=   ] - info Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
[  ==] - info Generating static pages (3/4)currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
- info Generating static pages (4/4)

> Export encountered errors on following paths:
        /ArtikelStatus
        /_error: /404
        /_error: /500
PS C:\Projekt - Lokalt\Artikelstatus>

.next mappen skapas så allt är fine så långt frånsett dessa fel ovan. Det är väl fel jag måste lösa för att en korrekt build kan skapas?

Kör jag samma med yarn build:

PS C:\Projekt - Lokalt\Artikelstatus> yarn build
yarn run v1.22.19
$ next build
- info Creating an optimized production build
- info Compiled successfully

./pages/ArtikelStatus.tsx
73:8  Warning: React Hook useEffect has a missing dependency: 'changeArticelList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types
- info Collecting page data ...currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
- info Collecting page data
[=== ] - info Generating static pages (3/4)currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
- info Generating static pages (4/4)
- info Finalizing page optimization

Route (app)                                Size     First Load JS
─ ○ /favicon.ico                           0 B                0 B
+ First Load JS shared by all              0 B

Route (pages)                              Size     First Load JS
┌   /_app                                  0 B            87.2 kB
├ ○ /404                                   181 B          87.4 kB
├ λ /api/ReqMSSQLData                      0 B            87.2 kB
└ ○ /ArtikelStatus (1900 ms)               69.3 kB         157 kB
    └ css/166457b338a809fe.css             326 B
+ First Load JS shared by all              87.2 kB
  ├ chunks/framework-9ba61dd7322f058e.js   45.2 kB
  ├ chunks/main-abf6f519ca6c0d4e.js        27.6 kB
  ├ chunks/pages/_app-2c4fc25184e39c45.js  12.6 kB
  └ chunks/webpack-5ad9183e2cf56257.js     1.73 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Done in 41.94s.
PS C:\Projekt - Lokalt\Artikelstatus>

Får jag inga fel

Både Node och Yarn är uppdaterade.

Testar jag i skrivande stund att köra "yarn dev" fungerar inte appen. Felet nedan kommer upp:

PS C:\Projekt - Lokalt\Artikelstatus> yarn dev
Internal Error: articelstatus@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
    at V0.getCandidates (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:435:5145)
    at kf.getCandidates (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:391:1264)
    at C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:439:8033
    at df (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:390:11070)
    at ge (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:439:8013)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.allSettled (index 0)
    at async io (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:390:10398)
    at async C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:439:8545
    at async ti.startProgressPromise (C:\Projekt - Lokalt\Artikelstatus\.yarn\releases\yarn-3.6.3.cjs:390:47579)
PS C:\Projekt - Lokalt\Artikelstatus>

Med Yarn v1.22.19 fungerar detta men i Yarn v3.6.3 tas mappen "node_modules" bort ifall jag kör "yarn install". Filem "yarn.lock" skapas och behöver finnas vid körning av Yarn!

Kör jag nu "yarn dev" körs appen men alla mina modulen för felet

"Cannot find module '@mui/icons-material/ArrowForward' or its corresponding type declarations". Verkar dock vara ett Typ fel då appen fungerar???

Kör jag "next build" får jag felen:

PS C:\Projekt - Lokalt\Artikelstatus> next build  
Failed to compile.

./app/layout.tsx
Module not found: Can't resolve 'react/jsx-runtime'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/_app.tsx

./data/ArticelSearch.tsx
Module not found: Can't resolve 'react/jsx-runtime'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/ArtikelStatus.tsx

./data/ArticelSearch.tsx
Module not found: Can't resolve '@mui/joy/FormControl'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/ArtikelStatus.tsx

./data/ArticelSearch.tsx
Module not found: Can't resolve '@mui/joy/Input'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/ArtikelStatus.tsx

./data/CalApiSQLData.ts
Module not found: Can't resolve 'axios'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/ArtikelStatus.tsx


> Build failed because of webpack errors
- info Creating an optimized production build .
PS C:\Projekt - Lokalt\Artikelstatus>

Vi tar en sak i taget men jag verkar ha flera fel här, inte sant?

Mvh Fredrik

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem
●

Linux Ubuntu Server 22.04 inkl Next JS och Docker = Bygge är ok men ingen app

Hej

Har valt ett annat tillvägagångsätt men har lite trubbel att, jag tror, nå den på rätt sätt?

Min docker ligger på en server som jag loggar in via en terminal och har projektet i mappen ArtikelStatus på servern.

Står i mappen och kör --> /ArtikelStatus$ sudo docker-compose up --build, får:

Building artikelstatus
DEPRECATED: The legacy builder is deprecated and will be removed in a future release.
            Install the buildx component to build images with BuildKit:
            https://docs.docker.com/go/buildx/

Sending build context to Docker daemon  561.7kB
Step 1/8 : FROM node:alpine
alpine: Pulling from library/node
7264a8db6415: Pull complete
8cbf251f4c26: Pull complete
88a65afc0f6e: Pull complete
a1cc38e1d7b9: Pull complete
Digest: sha256:d75175d449921d06250afd87d51f39a74fc174789fa3c50eba0d3b18369cc749
Status: Downloaded newer image for node:alpine
 ---> 3008096f783e
Step 2/8 : COPY . /app
 ---> a004c7616ed0
Step 3/8 : ENV NODE_ENV production
 ---> Running in 3f0868067bcf
Removing intermediate container 3f0868067bcf
 ---> 64a7a1601c70
Step 4/8 : ENV NEXT_TELEMETRY_DISABLED 1
 ---> Running in 187640feb510
Removing intermediate container 187640feb510
 ---> 8111e981bff5
Step 5/8 : WORKDIR /app
 ---> Running in 21a59ef561ae
Removing intermediate container 21a59ef561ae
 ---> ae929ab7fd03
Step 6/8 : RUN npm install
 ---> Running in 1f79ea0b4422
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@azure/msal-node@1.18.3',
npm WARN EBADENGINE   required: { node: '10 || 12 || 14 || 16 || 18' },
npm WARN EBADENGINE   current: { node: 'v20.6.1', npm: '9.8.1' }
npm WARN EBADENGINE }

added 557 packages, and audited 558 packages in 1m
npm notice
npm notice New major version of npm available! 9.8.1 -> 10.1.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.1.0>
npm notice Run `npm install -g npm@10.1.0` to update!
npm notice

139 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Removing intermediate container 1f79ea0b4422
 ---> 6824fa6acd9b
Step 7/8 : RUN npm run build
 ---> Running in 5ef9ac341ee1

> articelstatus@0.1.0 build
> next build

- info Creating an optimized production build...
- info Compiled successfully
- info Linting and checking validity of types...

./pages/ArtikelStatus.tsx
72:8  Warning: React Hook useEffect has a missing dependency: 'changeArticelList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Collecting page data...
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
- info Generating static pages (0/4)
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
- info Generating static pages (1/4)
- info Generating static pages (2/4)
- info Generating static pages (3/4)
- info Generating static pages (4/4)
- info Finalizing page optimization...

Route (app)                                Size     First Load JS
─ ○ /favicon.ico                           0 B                0 B
+ First Load JS shared by all              0 B

Route (pages)                              Size     First Load JS
┌   /_app                                  0 B            87.2 kB
├ ○ /404                                   181 B          87.4 kB
├ λ /api/ReqMSSQLData                      0 B            87.2 kB
└ ○ /ArtikelStatus                         69.3 kB         157 kB
    └ css/166457b338a809fe.css             326 B
+ First Load JS shared by all              87.2 kB
  ├ chunks/framework-9ba61dd7322f058e.js   45.2 kB
  ├ chunks/main-430582bb938f1be2.js        27.7 kB
  ├ chunks/pages/_app-2c4fc25184e39c45.js  12.6 kB
  └ chunks/webpack-59736a9d99efbdea.js     1.75 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Removing intermediate container 5ef9ac341ee1
 ---> d8a8186f4bb8
Step 8/8 : CMD ["npm", "start"]
 ---> Running in 4afaa932b720
Removing intermediate container 4afaa932b720
 ---> 78663aad856b
Successfully built 78663aad856b
Successfully tagged artikelstatus_artikelstatus:latest
Creating artikelstatus ... done
Attaching to artikelstatus
artikelstatus    |
artikelstatus    | > articelstatus@0.1.0 start
artikelstatus    | > next start -p 8001
artikelstatus    |
artikelstatus    | - ready started server on 0.0.0.0:8001, url: http://localhost:8001

Det jag funderar på är dels felen med varningarna och sista rade med "ready started server on".... Om det är korrekt?

Package.json

{
  "name": "articelstatus",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://xxx.xxxx.xx/:8001",
  "scripts": {
    "docker": "docker-compose up --build --force-recreate",
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 8001",
    "lint": "next lint",
    "prod": "next export"
  },
  "dependencies": {
    "@azure/msal-node": "^1.18.3",
    "@devexpress/dx-react-core": "^4.0.4",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/joy": "^5.0.0-alpha.85",
    "@mui/material": "^5.13.5",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.5",
    "autoprefixer": "10.4.14",
    "axios": "^1.4.0",
    "devextreme": "22.2",
    "devextreme-react": "22.2",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "mssql": "^10.0.0",
    "next": "13.4.5",
    "nextjs-current-url": "^1.0.3",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-helmet": "^6.1.0",
    "react-redux": "^8.1.0",
    "redux": "^4.2.1",
    "tailwindcss": "3.3.2",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@types/mssql": "^8.1.2",
    "@types/mysql": "^2.15.21",
    "@types/react-helmet": "^6.1.6"
  }
}

dockefile & docker-compose.yml

FROM node:alpine
COPY . /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

WORKDIR /app

RUN npm install
RUN npm run build

CMD ["npm", "start"]

--------------------------------
version: "3.9"

services:
  artikelstatus:
    build:
      context: .
      dockerfile: "Dockerfile"
    container_name: "artikelstatus"
    ports:
    - "8001:80"

next.config.js & tsconfig.json:

/** @type {import('next').NextConfig} */

module.exports = {
    basePath: '/ArtikelStatus'
}

----------------------------------------
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    },
    "strictNullChecks": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "/pages/",
    "pages/api/ReqMSSQLData.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Säg till om det behövs mer information

Mvh Fredrik

Senast redigerat
Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Finns det någon specifik anledning till att du vill köra Yarn istället för NPM? Jag ser inga egentliga anledningar till det längre, NPM har kommit ikapp och är i min mening snarare förbi Yarn nuförtiden.

Vad gäller dina byggvarningar kring useEffect, useMemo etc. så borde du absolut åtgärda dessa, de leder mest troligt till att din app inte renderar om som den ska eller fastnar i en renderingsloop. Beroende på hur din ESLint är konfad så kan det också vara så att den inte bygger ut filer med varningar.

För din varning

Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useMemo')

så tycker jag att du ska dubbelkolla dina importer (t.ex. att du importerar från 'react' och inte från 'React'). Alternativt så försöker du använda useMemo i en komponent som ska server-side-renderas vilket inte går eftersom den är client-side. Felen du får pekar nog mot det senare.

För felet med yarn dev, testa att köra "yarn install" och se om det löser några problem.

Vid next build så verkar den av någon anledning inte resolva dina paket. Testa att rensa bort dina lock-filer samt node_modules och sen köpa npm/yarn install beroende på vilket du tänker dig att du ska använda.

Fokusera på att lösa alla problem lokalt innan du blandar in docker. Din applikation ska bygga och fungera felfritt lokalt först, är min starka rekommendation.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av koSmiQ:

Finns det någon specifik anledning till att du vill köra Yarn istället för NPM? Jag ser inga egentliga anledningar till det längre, NPM har kommit ikapp och är i min mening snarare förbi Yarn nuförtiden.

Vad gäller dina byggvarningar kring useEffect, useMemo etc. så borde du absolut åtgärda dessa, de leder mest troligt till att din app inte renderar om som den ska eller fastnar i en renderingsloop. Beroende på hur din ESLint är konfad så kan det också vara så att den inte bygger ut filer med varningar.

För din varning

Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useMemo')

så tycker jag att du ska dubbelkolla dina importer (t.ex. att du importerar från 'react' och inte från 'React'). Alternativt så försöker du använda useMemo i en komponent som ska server-side-renderas vilket inte går eftersom den är client-side. Felen du får pekar nog mot det senare.

För felet med yarn dev, testa att köra "yarn install" och se om det löser några problem.

Vid next build så verkar den av någon anledning inte resolva dina paket. Testa att rensa bort dina lock-filer samt node_modules och sen köpa npm/yarn install beroende på vilket du tänker dig att du ska använda.

Fokusera på att lösa alla problem lokalt innan du blandar in docker. Din applikation ska bygga och fungera felfritt lokalt först, är min starka rekommendation.

Gå till inlägget

Hej och tack för svaren. Jag har faktisk raderat yarn då det också blev fel i annat projekt och npm är ju ändå det man har i botten. Mitt första inlägg kan du hoppa då jag valt annan väg, se från inlägg "idag 10:37"

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem
●

Lite uppdatering från igår:
Dockerfile:

FROM node:alpine

WORKDIR /app

COPY . .
RUN npm install
RUN npm run build

CMD ["npm", "start"]

Är tveksam vad WORKDIR behöver vara?

docker-compose.yml:

version: "3.9"

services:
  artikelstatus:
    build:
      context: .
      dockerfile: "Dockerfile"
    container_name: "artikelstatus"
    ports:
    - "8001:8001"

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "/pages/",
    "pages/api/ReqMSSQLData.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

next.config.js:

/** @type {import('next').NextConfig} */

module.exports = {
    reactStrictMode: true,
    swcMinify: true,
    basePath: '/ArtikelStatus'
}

Går jag nu till adressen får jag:
404 This page could not be found.

Notera att server ligger som en Virtuell maskin så adressen bör bli dess ip/namn:8001 , inte sant?

Ett steg på vägen vartfall, kanske

Mvh Fredrik

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av koSmiQ:

Finns det någon specifik anledning till att du vill köra Yarn istället för NPM? Jag ser inga egentliga anledningar till det längre, NPM har kommit ikapp och är i min mening snarare förbi Yarn nuförtiden.

Vad gäller dina byggvarningar kring useEffect, useMemo etc. så borde du absolut åtgärda dessa, de leder mest troligt till att din app inte renderar om som den ska eller fastnar i en renderingsloop. Beroende på hur din ESLint är konfad så kan det också vara så att den inte bygger ut filer med varningar.

För din varning

Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useMemo')

så tycker jag att du ska dubbelkolla dina importer (t.ex. att du importerar från 'react' och inte från 'React'). Alternativt så försöker du använda useMemo i en komponent som ska server-side-renderas vilket inte går eftersom den är client-side. Felen du får pekar nog mot det senare.

För felet med yarn dev, testa att köra "yarn install" och se om det löser några problem.

Vid next build så verkar den av någon anledning inte resolva dina paket. Testa att rensa bort dina lock-filer samt node_modules och sen köpa npm/yarn install beroende på vilket du tänker dig att du ska använda.

Fokusera på att lösa alla problem lokalt innan du blandar in docker. Din applikation ska bygga och fungera felfritt lokalt först, är min starka rekommendation.

Gå till inlägget

Hej

Jag försöker få appen att fungera lokalt först innan docker

Jag kör next build och får enligt nedan:

PS C:\Projekt - Lokalt\Artikelstatus> next build
- info Creating an optimized production build
- info Compiled successfully

./pages/ArtikelStatus.tsx
73:8  Warning: React Hook useEffect has a missing dependency: 'changeArticelList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
- info Linting and checking validity of types
- info Collecting page data ..currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
- info Collecting page data
[=   ] - info Generating static pages (0/4)TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
[==  ] - info Generating static pages (1/4)
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

Error occurred prerendering page "/500". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
[  ==] - info Generating static pages (3/4)currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
{
  isDataReceived: false,
  appName: 'Artikelstatus',
  headlines: [
    'Artiklar:',
    'Saldo:',
    'Blocked New Sales Order',
    'Blocked New Purchase Order'
  ],
  listIndexes: { startIndex: 0, endIndex: 0 },
  artList: [],
  targetArticelObj: [ '', '..............', '..............', '..............' ],
  paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
  currentUrl: ''
}
currentValueStateTree : {
  articelStatus: {
    isDataReceived: false,
    appName: 'Artikelstatus',
    headlines: [
      'Artiklar:',
      'Saldo:',
      'Blocked New Sales Order',
      'Blocked New Purchase Order'
    ],
    listIndexes: { startIndex: 0, endIndex: 0 },
    artList: [],
    targetArticelObj: [ '', '..............', '..............', '..............' ],
    paginationValue: { totPages: 0, currentPage: 1, quentityPages: 0 },
    currentUrl: ''
  }
}
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

Error occurred prerendering page "/ArtikelStatus". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
    at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
    at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
    at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
- info Generating static pages (4/4)

> Export encountered errors on following paths:
        /ArtikelStatus
        /_error: /404
       /_error: /500
PS C:\Projekt - Lokalt\Artikelstatus>

Har kollat igenom koden och ser ingen import med React utan endast med react. Felet är nog att jag i koden som du skrev
"Alternativt så försöker du använda useMemo i en komponent som ska server-side-renderas vilket inte går eftersom den är client-side." Det får mig till komponentern eller funktionen i pages --> api --> ReqMSSQLData.ts. Filen ser ut som nedan:

import sql from 'mssql';
import {sqlConConfig} from '../../data/SQLConConfig';
import SQLQueryBuilder from '../../data/SQLQueryBuilder';
var sendSQLRes: Array<object> = [];


export default function handler(res: any){
    console.log("Called Server");
   
    const runSQL = async () => {      
        sql.connect(sqlConConfig).then((pool: any) => {
            return pool.request().query(SQLQueryBuilder())
        }).then((result: any) => {
            console.log('result :', result.rowsAffected[0]);
            sendSQLRes.push(result);
            res.status(200).send(sendSQLRes);
            }).catch((err: any) => {
                res.send(err);    
        });
    };    
   //setTimeout(() => {res.status(200).send(sendSQLRes);}, 3000);
    runSQL();
    console.log("------------------------------------------------------");
    
    // Reset the length = 0
    sendSQLRes.length = 0;
}

Du nämnde ESLint. Nedan är min konf... för det:
{
"extends": "next/core-web-vitals"
}

Börjar fundera om (useMemo) används för annat bakomliggande fel?

Avvaktar svar//
Mvh Fredrik

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Den här säger ju faktiskt vad som är tokigt (på ett ställe i alla fall).

./pages/ArtikelStatus.tsx
73:8  Warning: React Hook useEffect has a missing dependency: 'changeArticelList'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

I den filen har du en useEffect, med en dependecy array. I din useEffect så anropar/använder du changeArticleList, men du har den inte med i din dependency array.

Det ser alltså ut ungefär

useEffect(() => changeArticelList(), […])

Men ska se ut

useEffect(() => changeArticelList(), […, changeArticelList])
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Gällande ditt andra problem

typeerror:%20Cannot%20read%20properties%20of%20null%20(reading%20'useMemo')

Så verkar det finnas lite olika möjliga orsaker. Exempelvis useMemo på sidor som ska server-renderas (så måste du sätta ’use client’ för filen så att de renderas i klienten istället) eller så sker något annat möjligt fel. Googla lite på den så finns lite olika förslag på lösningar med versioner av Node (18 funkar men inte 16), att alla deps är korrekt installerade samt av rätt version.

Hoppas det kan leda dig rätt!

Annars kanske du får dela repo via GitHub så kanske det kan lösa sig

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av koSmiQ:

Gällande ditt andra problem

typeerror:%20Cannot%20read%20properties%20of%20null%20(reading%20'useMemo')

Så verkar det finnas lite olika möjliga orsaker. Exempelvis useMemo på sidor som ska server-renderas (så måste du sätta ’use client’ för filen så att de renderas i klienten istället) eller så sker något annat möjligt fel. Googla lite på den så finns lite olika förslag på lösningar med versioner av Node (18 funkar men inte 16), att alla deps är korrekt installerade samt av rätt version.

Hoppas det kan leda dig rätt!

Annars kanske du får dela repo via GitHub så kanske det kan lösa sig

Gå till inlägget

Det jag kan göra är att klistra in koden här men det kommer bli rätt långt inlägg. Efter att ha checkat kod m.m. i den aktuella komponenten så finner jag inget fel kodmässigt. Kan man inte på något mer sätt felsöka orsaken till felet med useMemo?

Om felet har med importen av react att göra så bör det ha att göra med --> import React, { useState, useEffect } from 'react' ?

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av freddehboy:

Det jag kan göra är att klistra in koden här men det kommer bli rätt långt inlägg. Efter att ha checkat kod m.m. i den aktuella komponenten så finner jag inget fel kodmässigt. Kan man inte på något mer sätt felsöka orsaken till felet med useMemo?

Om felet har med importen av react att göra så bör det ha att göra med --> import React, { useState, useEffect } from 'react' ?

Gå till inlägget

Skapa ett repo på GitHub och dela istället för att klistra in här

Redigera
Citera flera Citera
Permalänk
Medlem
●

Får fixa det på något sätt

Notera att jag måste av säkerhetsskäl ta bort lite information i filerna. Appen är för ett företag!

Återkommer när det är fixat.

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av koSmiQ:

Skapa ett repo på GitHub och dela istället för att klistra in här

Gå till inlägget

Nu är https://github.com/FredrikHj/ArtikelStatusHelp.git fixat

Jag har laddat upp ett gäng filer, tyvärr kan vi inte ladda upp mer än filerna:
pages/
_app.tsx
_document.js
_error.js
ArtikelStatus.tsx

pages/api/
ReqMSSQLData.ts,

data/
ArticelSearch.tsx
LoadingIndicator.css
LoadingIndicator.tsx

Titta och återkom så säger jag till om jag finner fele/t/n

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag har inte hunnit kolla igenom allt, men vi kan börja med en sak som jag såg.

I filen ArtikelStatus.tsx så har du en useEffect(). I den har du

        // Run if data is received
            if(updatedStateTree !== null && updatedStateTree["artList"].length > 0){
                console.log("rgebr");
                
                changeArticelList(updatedStateTree["artList"], 1);
                indexEndInterval === 0 && updateIndexEndInterval(updatedStateTree.paginationValue["quentityPages"]);
            }

men din dependencyarray

 [ storeListener, updatedStateTree, currentPage, indexStartInterval, indexEndInterval, quentityPages]);

Har inte `changeArticelList` som är en `useState`. Den behöver vara med i din dependencyarray

Jag vet inte hur din ESLint-konfig ser ut, men om du ställer in VSCode (eller vilken editor du nu kör, se till att ESLint-integration är aktiv och rätt konfad) så att den fångar upp ESLint när du tittar på filer så kan du få väldigt bra hjälp med att komplettera dina dependency arrays.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ska titta på det. Jag har laddat upp fler filer som kan vara till hjälp

Syftar du på tillägget --> ESLint

Efter att ha kommenterat bort min Redux Store så är jag rätt säker på att felet har att göra med min Redux Store, kanske ;)?

Senast redigerat
Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av freddehboy:

Ska titta på det. Jag har laddat upp fler filer som kan vara till hjälp

Syftar du på tillägget --> ESLint

Efter att ha kommenterat bort min Redux Store så är jag rätt säker på att felet har att göra med min Redux Store, kanske ;)?

Gå till inlägget

Redux är tyvärr inte min starkaste sida. Men du har ju onekligen lyckats identifiera var problemet ligger. Kör du rätt version av Redux? Behöver den initieras på ett annat sätt i NextJS?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av koSmiQ:

Redux är tyvärr inte min starkaste sida. Men du har ju onekligen lyckats identifiera var problemet ligger. Kör du rätt version av Redux? Behöver den initieras på ett annat sätt i NextJS?

Gå till inlägget

Ifall det inte är Redux kommer du på något annat som kan vara en orsak till felet?

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem
●

Något är skumt här. Den klagar på:
TypeError: Cannot read properties of null (reading 'useMemo')
at exports.useMemo (C:\Projekt - Lokalt\Artikelstatus\node_modules\react\cjs\react.production.min.js:25:208)
at Provider (C:\Projekt - Lokalt\Artikelstatus\node_modules\react-redux\lib\components\Provider.js:26:30)
at Wc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at Zc (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
at Z (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
at $c (C:\Users\Fredrik.Hjarpe\AppData\Roaming\npm\node_modules\next\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
- info Generating static pages (1/1)

> Export encountered errors on following paths:
/ArtikelStatus

Det ända som pekar på problem är det sista med /ArtikelStatus. Kommenterar bort all kod i filen utom då namnet på komponenten och return statementen m.m.

Samma fel ändå???

Visa signatur

Computer: Windows 11, 64-bit, Intel 285k, MSI MEG Z890 Ace, 64GB RAM,
MSI GeForce RTX 5080 16GB Vanguard SOC Launch

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det behöver inte specifikt vara i ArtikelStatus problemet ligger, felmeddelandet nämner även "Provider.js" från react-redux. Kanske bakas den ihop med filer av en viss typ och är det egentligen problemet?

Ditt test med att utesluta allt Redux pekar ju snarare åt det hållet.

Kan den här artikeln vara till någon hjälp? https://blog.logrocket.com/use-redux-next-js

Redigera
Citera flera Citera
1
Skriv svar