cms-dpoa / CMS_Trivia

0 stars 0 forks source link

docker-compose error Module not found: Error: Can't resolve './pages/DashBoard' in '/view/src' in local testing #12

Closed katilp closed 2 years ago

katilp commented 2 years ago

Hello @JosueDavalos I wonder if you can quickly help me 😃

I would need to add a small thing as in #11 but when I try to build locally (without any modifications) I get

 => [build-stage 2/7] WORKDIR /view                                                                                0.2s
 => [build-stage 3/7] COPY package.json .                                                                          0.0s
 => [build-stage 4/7] RUN npm install                                                                             85.8s
 => [build-stage 5/7] RUN npm audit fix                                                                            6.3s
 => [build-stage 6/7] COPY . .                                                                                     0.0s
 => ERROR [build-stage 7/7] RUN npm run build                                                                     20.9s
------
 > [build-stage 7/7] RUN npm run build:
#13 0.585
#13 0.585 > view@1.0.0 build /view
#13 0.585 > webpack --mode production
#13 0.585
#13 20.79 assets by status 734 KiB [cached] 5 assets
#13 20.79 Entrypoint main = src/main.css bundle.js
#13 20.79 orphan modules 14.6 MiB (javascript) 5.49 KiB (runtime) [orphan] 384 modules
#13 20.79 runtime modules 884 bytes 4 modules
#13 20.79 cacheable modules 14.6 MiB (javascript) 173 KiB (css/mini-extract)
#13 20.79   javascript modules 14.6 MiB 45 modules
#13 20.79   css modules 173 KiB
#13 20.79     modules by path ./src/ 4.77 KiB
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./src/index.css 589 bytes [built] [code generated]
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./src/components/home/Home.css 4.08 KiB [built] [code generated]
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./src/components/footer/Footer.css 61 bytes [built] [code generated]
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./src/components/manage/ReportProblem.css 60 bytes [built] [code generated]
#13 20.79     modules by path ./node_modules/ 168 KiB
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css 158 KiB [built] [code generated]
#13 20.79       css ./node_modules/css-loader/dist/cjs.js!./node_modules/react-toastify/dist/ReactToastify.css 10 KiB [built] [code generated]
#13 20.79
#13 20.79 ERROR in ./src/App.jsx 8:0-42
#13 20.79 Module not found: Error: Can't resolve './pages/DashBoard' in '/view/src'
#13 20.79 resolve './pages/DashBoard' in '/view/src'
#13 20.79   using description file: /view/package.json (relative path: ./src)
#13 20.79     Field 'browser' doesn't contain a valid alias configuration
#13 20.79     using description file: /view/package.json (relative path: ./src/pages/DashBoard)
#13 20.79       no extension
#13 20.79         Field 'browser' doesn't contain a valid alias configuration
#13 20.79         /view/src/pages/DashBoard doesn't exist
#13 20.79       .js
#13 20.79         Field 'browser' doesn't contain a valid alias configuration
#13 20.79         /view/src/pages/DashBoard.js doesn't exist
#13 20.79       .jsx
#13 20.79         Field 'browser' doesn't contain a valid alias configuration
#13 20.79         /view/src/pages/DashBoard.jsx doesn't exist
#13 20.79       as directory
#13 20.79         /view/src/pages/DashBoard doesn't exist
#13 20.79  @ ./src/index.js 5:0-24 6:107-110
#13 20.79
#13 20.79 webpack 5.64.4 compiled with 1 error in 19556 ms
#13 20.84 npm ERR! code ELIFECYCLE
#13 20.84 npm ERR! errno 1
#13 20.85 npm ERR! view@1.0.0 build: `webpack --mode production`
#13 20.85 npm ERR! Exit status 1
#13 20.85 npm ERR!
#13 20.85 npm ERR! Failed at the view@1.0.0 build script.
#13 20.85 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Do you have an idea why this happens?

I've done nothing else than

git clone git@github.com:cms-dpoa/CMS_Trivia.git
cd CMS_Trivia/
docker-compose up --build

FYI: I had to reinstall my linux distribution, but I guess it should not matter, it should install all that is needed, and I do not see any errors in the npm install step.

katilp commented 2 years ago

And just to make sure the files is there:

CMS_Trivia$ ls -l view/src/pages
total 16
-rwxrwxrwx 1 kati kati 1168 Dec  4 09:51 Dashboard.jsx
-rwxrwxrwx 1 kati kati 2416 Dec  4 09:51 GameSection.jsx
-rwxrwxrwx 1 kati kati  469 Dec  4 09:51 Home.jsx
-rwxrwxrwx 1 kati kati 2012 Dec  4 09:51 Manage.jsx
-rwxrwxrwx 1 kati kati  794 Dec  4 09:51 MyScore.jsx
-rwxrwxrwx 1 kati kati  331 Dec  4 09:51 NotFound.jsx

and I would understand that this should resolve the extension

katilp commented 2 years ago

Is this related to:

webpack --mode production

This comes from https://github.com/cms-dpoa/CMS_Trivia/blob/main/view/package.json#L10

    "build": "webpack --mode production",

whereas in https://github.com/cms-dpoa/CMS_Trivia/blob/main/view/webpack.config.js#L6 has development as the only option:

mode: "development"

However, changing to webpack --mode development in package.json does not solve the problem.

katilp commented 2 years ago

If I just comment out Dashboard for local testing, it builds fine.

localhost:8000 is:

image

and http://localhost/home

image

That's all OK for local testing. Closing the issue.

katilp commented 2 years ago

Fix typo in App.jx : DashBoard -> Dashboard

JosueDavalos commented 2 years ago

Hi katy, a thousand apologies for the delay. But it's probably the version of node you have. I can check if you still need it.

Best regards, Josue Davalos

De: Kati @.> Enviado: Saturday, December 4, 2021 4:39 AM Para: @.> CC: Josue Eulises Davalos @.>; @.> Asunto: [cms-dpoa/CMS_Trivia] docker-compose error Module not found: Error: Can't resolve './pages/DashBoard' in '/view/src' in local testing (Issue #12)

Hello @JosueDavaloshttps://github.com/JosueDavalos I wonder if you can quickly help me 😃

I would need to add a small thing as in #11https://github.com/cms-dpoa/CMS_Trivia/issues/11 but when I try to build locally (without any modifications) I get

=> [build-stage 2/7] WORKDIR /view 0.2s

=> [build-stage 3/7] COPY package.json . 0.0s

=> [build-stage 4/7] RUN npm install 85.8s

=> [build-stage 5/7] RUN npm audit fix 6.3s

=> [build-stage 6/7] COPY . . 0.0s

=> ERROR [build-stage 7/7] RUN npm run build 20.9s


[build-stage 7/7] RUN npm run build:

13 0.585

13 0.585 > @.*** build /view

13 0.585 > webpack --mode production

13 0.585

13 20.79 assets by status 734 KiB [cached] 5 assets

13 20.79 Entrypoint main = src/main.css bundle.js

13 20.79 orphan modules 14.6 MiB (javascript) 5.49 KiB (runtime) [orphan] 384 modules

13 20.79 runtime modules 884 bytes 4 modules

13 20.79 cacheable modules 14.6 MiB (javascript) 173 KiB (css/mini-extract)

13 20.79 javascript modules 14.6 MiB 45 modules

13 20.79 css modules 173 KiB

13 20.79 modules by path ./src/ 4.77 KiB

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./src/index.css 589 bytes [built] [code generated]

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./src/components/home/Home.css 4.08 KiB [built] [code generated]

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./src/components/footer/Footer.css 61 bytes [built] [code generated]

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./src/components/manage/ReportProblem.css 60 bytes [built] [code generated]

13 20.79 modules by path ./node_modules/ 168 KiB

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css 158 KiB [built] [code generated]

13 20.79 css ./node_modules/css-loader/dist/cjs.js!./node_modules/react-toastify/dist/ReactToastify.css 10 KiB [built] [code generated]

13 20.79

13 20.79 ERROR in ./src/App.jsx 8:0-42

13 20.79 Module not found: Error: Can't resolve './pages/DashBoard' in '/view/src'

13 20.79 resolve './pages/DashBoard' in '/view/src'

13 20.79 using description file: /view/package.json (relative path: ./src)

13 20.79 Field 'browser' doesn't contain a valid alias configuration

13 20.79 using description file: /view/package.json (relative path: ./src/pages/DashBoard)

13 20.79 no extension

13 20.79 Field 'browser' doesn't contain a valid alias configuration

13 20.79 /view/src/pages/DashBoard doesn't exist

13 20.79 .js

13 20.79 Field 'browser' doesn't contain a valid alias configuration

13 20.79 /view/src/pages/DashBoard.js doesn't exist

13 20.79 .jsx

13 20.79 Field 'browser' doesn't contain a valid alias configuration

13 20.79 /view/src/pages/DashBoard.jsx doesn't exist

13 20.79 as directory

13 20.79 /view/src/pages/DashBoard doesn't exist

13 20.79 @ ./src/index.js 5:0-24 6:107-110

13 20.79

13 20.79 webpack 5.64.4 compiled with 1 error in 19556 ms

13 20.84 npm ERR! code ELIFECYCLE

13 20.84 npm ERR! errno 1

13 20.85 npm ERR! @.*** build: webpack --mode production

13 20.85 npm ERR! Exit status 1

13 20.85 npm ERR!

13 20.85 npm ERR! Failed at the @.*** build script.

13 20.85 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Do you have an idea why this happens?

I've done nothing else than

git clone @.***:cms-dpoa/CMS_Trivia.git

cd CMS_Trivia/

docker-compose up --build

FYI: I had to reinstall my linux distribution, but I guess it should not matter, it should install all that is needed, and I do not see any errors in the npm install step.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/cms-dpoa/CMS_Trivia/issues/12, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJ5ZRFP34O7CHPSPORRK25TUPHOURANCNFSM5JLMJB3A. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

katilp commented 2 years ago

No worries, I've found that out 💪 😃 It was just DashBoard -> Dashboard