Errors when installing

[alexandercarlstrom]

I followed all installation instructions and have all prerequisites installed and done. Still every time I try to install/run setup.cmd I get these errors. I tried it on two different computers with the same result

`Error: Cannot find module 'dotenv'
Require stack:

• C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\util\Config.js
• C:\dev\FoundationTest\src\SpaFrontend\node_modules@episerver\webpack\cjs\util\CliArguments.js
• C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\bin\epi-auth.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
  at Function.Module._load (internal/modules/cjs/loader.js:745:27)
  at Module.require (internal/modules/cjs/loader.js:961:19)
  at require (internal/modules/cjs/helpers.js:92:18)
  at Object. (C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\util\Config.js:9:34)
  at Module._compile (internal/modules/cjs/loader.js:1072:14)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
  at Module.load (internal/modules/cjs/loader.js:937:32)
  at Function.Module._load (internal/modules/cjs/loader.js:778:12)
  at Module.require (internal/modules/cjs/loader.js:961:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\util\Config.js',
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\util\CliArguments.js',
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\bin\epi-auth.js'
  ]
  }

foundation-spa-frontend@1.0.0 build:production C:\dev\FoundationTest\src\Spa.frontend
npx epi-sync-models -e production && npx webpack --env EPI_ENV=production --env NODE_ENV=production && npx epi-sync-models -e development

internal/modules/cjs/loader.js:892
throw err;
^

Error: Cannot find module 'dotenv'
Require stack:

• C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\util\Config.js
• C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\util\CliArguments.js
• C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\bin\epi_sync_models.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
  at Function.Module._load (internal/modules/cjs/loader.js:745:27)
  at Module.require (internal/modules/cjs/loader.js:961:19)
  at require (internal/modules/cjs/helpers.js:92:18)
  at Object. (C:\dev\FoundationTest\src\Spa.Frontend\node_modules@episerver\webpack\cjs\util\Config.js:9:34)
  at Module._compile (internal/modules/cjs/loader.js:1072:14)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
  at Module.load (internal/modules/cjs/loader.js:937:32)
  at Function.Module._load (internal/modules/cjs/loader.js:778:12)
  at Module.require (internal/modules/cjs/loader.js:961:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\util\Config.js',
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\util\CliArguments.js',
  'C:\dev\FoundationTest\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\bin\epi_sync_models.js'
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! foundation-spa-frontend@1.0.0 build:production: npx epi-sync-models -e production && npx webpack --env EPI_ENV=production --env NODE_ENV=production && npx epi-sync-models -e development
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the foundation-spa-frontend@1.0.0 build:production script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Alexander\AppData\Roaming\npm-cache_logs\2021-09-23T14_30_04_474Z-debug.log
Run resetup.cmd to resetup solution

Press any key to continue . . . `

Any idea what might be causing this?

[MarkMcDonald]

Nope, but having solved my first issue (needing to set up SSH in GitHub) I get the same error.
node -v
v.14.15.1

If I figure it out I'll make a note of how here.

[MarkMcDonald]

Managed to solve the first issue by modifying the package.json in /src/Spa.Foundation/ to include dotenv:

{
"name": "foundation-spa-frontend",
"version": "1.0.0",
"description": "Frontend for Episerver Foundation CMS built using TypeScript & React",
"private": true,
"scripts": {
"login": "npx epi-auth -e development",
"sync-models": "npx epi-sync-models -e development",
"test": "echo "Error: no test specified" && exit 1",
"clean": "echo "Clean: not implemented" && exit 0",
"start": "npx webpack serve --env EPI_ENV=development --config webpack.dev.config.js",
"build": "npx webpack --env EPI_ENV=development --env NODE_ENV=development",
"build:production": "npx epi-sync-models -e production && npx webpack --env EPI_ENV=production --env NODE_ENV=production && npx epi-sync-models -e development",
"watch": "npx webpack --watch --progress --env EPI_ENV=development",
"compile": "npx tsc --pretty --project ./tsconfig.json"
},
"author": "Remko Jantzen",
"license": "Apache-2.0",
"dependencies": {
"@episerver/foundation-settings": "file:lib/foundation-settings",
"@episerver/spa-core": "github:episerver/foundation-lib-spa-core#semver:0.1.3",
"@fullcalendar/daygrid": "^5.4.0",
"@fullcalendar/list": "^5.4.0",
"@fullcalendar/react": "^5.4.0",
"@reduxjs/toolkit": "^1.5.0",
"axios": "^0.21.0",
"bootstrap": "^4.6.0",
"core-js": "^3.8.3",
"dotenv": "^10.0.0",
"eventemitter3": "^4.0.7",
"html-entities": "^2.0.6",
"jquery": "^3.5.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.19",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.0.0",
"react-leaflet": "^3.1.0",
"react-player": "^2.8.1",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.9.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"@episerver/webpack": "github:episerver/foundation-lib-spa-webpack#semver:0.1.5",
"@fortawesome/fontawesome-free": "^5.15.2",
"@types/bootstrap": "^4.6.0",
"@types/jquery": "^3.5.5",
"@types/leaflet": "^1.5.23",
"@types/lodash": "^4.14.168",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-redux": "^7.1.16",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"@types/uuid": "^8.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^5.0.1",
"dotenv-expand": "^5.1.0",
"esm": "^3.2.25",
"file-loader": "^6.2.0",
"filemanager-webpack-plugin": "^5.0.0",
"html-webpack-plugin": "^5.1.0",
"loader-utils": "^2.0.0",
"mini-css-extract-plugin": "^1.3.4",
"postcss": "^8.2.15",
"postcss-loader": "^5.0.0",
"precss": "^4.0.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.33.0",
"sass-loader": "^11.1.1",
"schema-utils": "^3.0.0",
"source-map-loader": "^3.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-loader": "^9.1.1",
"typescript": "^4.2.2",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0",
"xmlhttprequest": "^1.8.0",
"yargs": "^17.0.1"
}
}

Now I get the issue:

• SysRecycleBinData written to C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\src\Models\Content\SysRecycleBinData.ts
• BlogItemPageData written to C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\src\Models\Content\BlogItemPageData.ts
  [webpack-cli] Failed to load 'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\webpack.config.js' config
  [webpack-cli] Error: Cannot find module 'form-data'
  Require stack:
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules@episerver\webpack\cjs\webpack-plugins\DeployToEpiserverPlugin.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules@episerver\webpack\cjs\index.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\webpack.frontend.config.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\webpack.config.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\lib\webpack-cli.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\lib\bootstrap.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\bin\cli.js
• C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack\bin\webpack.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
  at Function.Module._load (internal/modules/cjs/loader.js:725:27)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at require (C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
  at Object. (C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules@episerver\webpack\cjs\webpack-plugins\DeployToEpiserverPlugin.js:17:37)
  at Module._compile (C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\webpack-plugins\DeployToEpiserverPlugin.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\@episerver\webpack\cjs\index.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\webpack.frontend.config.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\webpack.config.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\lib\webpack-cli.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\lib\bootstrap.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack-cli\bin\cli.js',
  'C:\Work\GitHub\Episerver\Foundation-spa-react\src\Spa.Frontend\node_modules\webpack\bin\webpack.js'
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! foundation-spa-frontend@1.0.0 build:production: npx epi-sync-models -e production && npx webpack --env EPI_ENV=production --env NODE_ENV=production && npx epi-sync-models -e development
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the foundation-spa-frontend@1.0.0 build:production script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\markp\AppData\Roaming\npm-cache_logs\2021-10-01T14_38_00_361Z-debug.log
Run resetup.cmd to resetup solution
Press any key to continue . . .

[MarkMcDonald]

Adding in "form-data": "^4.0.0" to the package.json in /src/Spa.Foundation/ seems to have resolved the problem.

See a site but with lots of issues that looked to be caused providing a public domain during set-up. Loads on http://foundation.local/ (public domain) but then has references in the generated code to http://foundation/ (app name) leading to broken images - even if I try run the whole site on a binding for http://foundation/ I then get CORS issues as its trying to load content on http://foundation.local/.

Going to rerun set-up without specifying a public domain to see if it improves things.

Updated package.json below:

{
"name": "foundation-spa-frontend",
"version": "1.0.0",
"description": "Frontend for Episerver Foundation CMS built using TypeScript & React",
"private": true,
"scripts": {
"login": "npx epi-auth -e development",
"sync-models": "npx epi-sync-models -e development",
"test": "echo "Error: no test specified" && exit 1",
"clean": "echo "Clean: not implemented" && exit 0",
"start": "npx webpack serve --env EPI_ENV=development --config webpack.dev.config.js",
"build": "npx webpack --env EPI_ENV=development --env NODE_ENV=development",
"build:production": "npx epi-sync-models -e production && npx webpack --env EPI_ENV=production --env NODE_ENV=production && npx epi-sync-models -e development",
"watch": "npx webpack --watch --progress --env EPI_ENV=development",
"compile": "npx tsc --pretty --project ./tsconfig.json"
},
"author": "Remko Jantzen",
"license": "Apache-2.0",
"dependencies": {
"@episerver/foundation-settings": "file:lib/foundation-settings",
"@episerver/spa-core": "github:episerver/foundation-lib-spa-core#semver:0.1.3",
"@fullcalendar/daygrid": "^5.4.0",
"@fullcalendar/list": "^5.4.0",
"@fullcalendar/react": "^5.4.0",
"@reduxjs/toolkit": "^1.5.0",
"axios": "^0.21.0",
"bootstrap": "^4.6.0",
"core-js": "^3.8.3",
"dotenv": "^10.0.0",
"eventemitter3": "^4.0.7",
"form-data": "^4.0.0",
"html-entities": "^2.0.6",
"jquery": "^3.5.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.19",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.0.0",
"react-leaflet": "^3.1.0",
"react-player": "^2.8.1",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.9.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"@episerver/webpack": "github:episerver/foundation-lib-spa-webpack#semver:0.1.5",
"@fortawesome/fontawesome-free": "^5.15.2",
"@types/bootstrap": "^4.6.0",
"@types/jquery": "^3.5.5",
"@types/leaflet": "^1.5.23",
"@types/lodash": "^4.14.168",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-redux": "^7.1.16",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"@types/uuid": "^8.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^5.0.1",
"dotenv-expand": "^5.1.0",
"esm": "^3.2.25",
"file-loader": "^6.2.0",
"filemanager-webpack-plugin": "^5.0.0",
"html-webpack-plugin": "^5.1.0",
"loader-utils": "^2.0.0",
"mini-css-extract-plugin": "^1.3.4",
"postcss": "^8.2.15",
"postcss-loader": "^5.0.0",
"precss": "^4.0.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.33.0",
"sass-loader": "^11.1.1",
"schema-utils": "^3.0.0",
"source-map-loader": "^3.0.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-loader": "^9.1.1",
"typescript": "^4.2.2",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^5.7.3",
"webpack-node-externals": "^3.0.0",
"xmlhttprequest": "^1.8.0",
"yargs": "^17.0.1"
}
}

[alexandercarlstrom]

Thank you for the response. I did manage to solve it by adding dotenv and form-data to the package.json as you said. But I still get a lot of errors. I have moved on and will not be using this github repo. But thanks for the help.