Linux Ubuntu Server 22.04 = Next JS och Docker

Permalänk

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

Permalänk

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

Visa signatur

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

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.

Permalänk
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.

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

Permalänk

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

Permalänk
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.

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

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])

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

Permalänk
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

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

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' ?

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

Permalänk

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

Permalänk
Skrivet av koSmiQ:

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

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

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.

Permalänk

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 ;)?

Visa signatur

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

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 ;)?

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?

Permalänk
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?

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

Permalänk

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

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