Following the instructions on our Vue Storefront guide:
npx @vue-storefront/cli init vsf-lz-test
cd vsf-lz-test
npm i
npx @layer0/cli init
npm i
npm run layer0:deploy
Results in the following errors:
> Bundling Layer0 router... > node_modules/@layer0/apollo/createHttpLink.js:15:36: error: Could not resolve "apollo-link-error" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
15 │ const apollo_link_error_1 = require("apollo-link-error");
╵ ~~~~~~~~~~~~~~~~~~~
If I simply install the missing dependency and try to deploy like so:
npm i apollo-link-error
layer0 init
npm i
npm run layer0:deploy
The deployment succeeds but results in 500 errors in production: https://raees-vue-storefront-shopify-theme-default.layer0-limelight.link/
The server-side error is the following:
ERROR
Error: Cannot find module 'webpack'
Require stack:
- /var/task/nuxt.config.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.resolve (internal/modules/cjs/helpers.js:107:19)
at _resolve (/var/task/node_modules/jiti/dist/jiti.js:1:192841)
at jiti (/var/task/node_modules/jiti/dist/jiti.js:1:195025)
at /var/task/nuxt.config.js:2:39
at jiti (/var/task/node_modules/jiti/dist/jiti.js:1:196506)
at Object.loadNuxtConfig (/var/task/node_modules/@nuxt/config/dist/config.js:1082:15)
at loadNuxt (/var/task/node_modules/@nuxt/core/dist/core.js:536:33)
at /var/task/__backends__/__js__.js:1:1421
at Generator.next (<anonymous>)
If I try to install webpack locally in the project (npm i webpack), I get the following:
error
An unexpected error occurred: "could not find a copy of webpack to link in /<PROJECT PATH>/vsf-lz-test/node_modules/purgecss-webpack-plugin/node_modules".
The situation has degraded further. Following the same instructions, when I run npx @layer0/cli init , it just fails with the following error:
TypeError: Invalid Version: ^2.13.3
at new SemVer (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/node_modules/semver/classes/semver.js:38:13)
at compare (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/node_modules/semver/functions/compare.js:3:32)
at Object.gt (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/node_modules/semver/functions/gt.js:2:29)
at /Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/frameworks/detectFramework.js:43:106
at Array.find (<anonymous>)
at /Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/frameworks/detectFramework.js:43:26
at Array.find (<anonymous>)
at detectFramework (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/frameworks/detectFramework.js:42:34)
at initializeApp (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/utils/init.js:243:28)
at Object.init [as handler] (/Users/raeesbhatti/.npm/_npx/23535/lib/node_modules/@layer0/cli/utils/init.js:84:11)
I’m able to init and deploy again with the latest version but back to the original problem of missing webpack. But I’m not able to install webpack because of peer dependencies.
warning @vue-storefront/shopify-theme@1.1.2: No license field
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @layer0/apollo@4.13.17" has unmet peer dependency "@apollo/client@^3.2.0".
warning " > @layer0/apollo@4.13.17" has unmet peer dependency "apollo-link@^1.2.14".
warning " > @layer0/apollo@4.13.17" has unmet peer dependency "graphql@^15.3.0".
warning "@layer0/apollo > apollo-link-http@1.5.17" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
warning "apollo-link-error > apollo-link@1.2.14" has unmet peer dependency "graphql@^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0".
warning "apollo-link-error > apollo-link-http-common@0.2.16" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
warning "@layer0/apollo > apollo-link-context > apollo-link > apollo-utilities@1.3.4" has unmet peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0".
warning "@layer0/core > babel-loader@8.2.5" has unmet peer dependency "@babel/core@^7.0.0".
warning "@layer0/core > ts-loader@8.4.0" has unmet peer dependency "typescript@*".
warning " > @layer0/nuxt@4.13.17" has unmet peer dependency "dotenv@^8.2.0".
warning "@layer0/nuxt > workbox-webpack-plugin@5.1.4" has incorrect peer dependency "webpack@^4.0.0".
warning "babel-jest > babel-preset-jest > @babel/plugin-syntax-object-rest-spread@7.8.3" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > @layer0/vue@4.13.17" has unmet peer dependency "vue@^2.6.11".
warning " > @layer0/vue@4.13.17" has unmet peer dependency "vue-router@^3.1.6".
warning "@layer0/vue-storefront > jscodeshift@0.13.1" has unmet peer dependency "@babel/preset-env@^7.1.6".
warning "@storefront-ui/vue > vue2-leaflet@2.7.1" has unmet peer dependency "@types/leaflet@^1.5.7".
warning "@vue-storefront/nuxt > @nuxtjs/composition-api@0.29.3" has unmet peer dependency "@nuxt/vue-app@^2.15".
warning "@vue-storefront/nuxt > @nuxtjs/composition-api@0.29.3" has unmet peer dependency "vue@^2".
warning "@vue-storefront/nuxt > @nuxtjs/composition-api > @vue/composition-api@1.6.0" has unmet peer dependency "vue@>= 2.5 < 3".
warning " > @vue-storefront/nuxt-theme@2.5.6" has unmet peer dependency "@nuxtjs/composition-api@^0.29.3".
warning " > @vue-storefront/shopify@1.1.2" has unmet peer dependency "@nuxtjs/composition-api@0.29.3".
warning "@vue-storefront/shopify > @vue-storefront/core@2.5.6" has unmet peer dependency "@nuxtjs/composition-api@^0.29.3".
warning "@vue-storefront/shopify > @vue-storefront/shopify-api > @nuxtjs/composition-api@0.30.0" has unmet peer dependency "@nuxt/vue-app@^2.15".
warning "@vue-storefront/shopify > @vue-storefront/shopify-api > @nuxtjs/composition-api@0.30.0" has unmet peer dependency "vue@^2".
warning "@vue-storefront/shopify > @vue-storefront/shopify-apollo > @apollo/client > use-sync-external-store@1.1.0" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > @vue/test-utils@1.3.0" has unmet peer dependency "vue@2.x".
warning " > @vue/test-utils@1.3.0" has unmet peer dependency "vue-template-compiler@^2.x".
warning " > babel-jest@24.9.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "babel-jest > babel-preset-jest@24.9.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "nuxt > @nuxt/components@2.2.1" has unmet peer dependency "consola@*".
warning "vue-jest > @babel/plugin-transform-modules-commonjs@7.17.9" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > vee-validate@3.4.14" has unmet peer dependency "vue@^2.5.18".
warning " > vue-jest@4.0.1" has unmet peer dependency "@babel/core@7.x".
warning " > vue-jest@4.0.1" has incorrect peer dependency "jest@26.x".
warning " > vue-jest@4.0.1" has unmet peer dependency "vue@^2.x".
warning " > vue-jest@4.0.1" has unmet peer dependency "vue-template-compiler@^2.x".
error An unexpected error occurred: "could not find a copy of webpack to link in /Users/raeesbhatti/Projects/limelight/vsf-lz-test/node_modules/purgecss-webpack-plugin/node_modules".
Hi Raees
The VSF init should be fixed with the latest release 4.15.4.
Btw the VSF CLI released a new version 3.0.0 which doesn’t have Commerce Tools template anymore (It’s a enteprise grade template).
To generate a new template with commerce tools you need to run:
npx @vue-storefront/cli@2.4.1 init vsf-lz-test
cd vsf-lz-test
yarn install
npx @layer0/cli init
yarn install
yarn run layer0:deploy
I recommend using yarn in this project as the template generates yarn.lock but it should work regardless with the npm i too.
Cheers
Petr