Issue with initial install and @vespaiach/axios-fetch-adapter

[GSdaBlessedFist]

Bug report

Describe the bug

While attempting to complete the initial onboarding process, the sections :"Preview Product in your Next.js Storefront" and "Create an Order using your Next.js Storefront", are resulting in error messages in the browser.

System information

Medusa version: @latest Node.js version: 20.0 from package.json::

"resolutions": {
    "webpack": "^5",
    "@types/react": "17.0.40"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.1",
    "@hookform/error-message": "^2.0.0",
    "@medusajs/link-modules": "^0.2.3",
    "@medusajs/medusa-js": "6.1.7",
    "@medusajs/modules-sdk": "^1.12.3",
    "@medusajs/pricing": "^0.1.4",
    "@medusajs/product": "^0.3.4",
    "@medusajs/ui": "^2.2.0",
    "@meilisearch/instant-meilisearch": "^0.7.1",
    "@paypal/paypal-js": "^5.0.6",
    "@paypal/react-paypal-js": "^7.8.1",
    "@stripe/react-stripe-js": "^1.7.2",
    "@stripe/stripe-js": "^1.29.0",
    "@vespaiach/axios-fetch-adapter": "^0.3.1",
    "algoliasearch": "^4.20.0",
    "lodash": "^4.17.21",
    "medusa-react": "^9.0.0",
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-country-flag": "^3.0.2",
    "react-dom": "^18.2.0",
    "react-instantsearch-hooks-web": "^6.29.0",
    "react-intersection-observer": "^9.3.4",
    "tailwindcss-radix": "^2.8.0",
    "webpack": "^5"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@medusajs/client-types": "^0.2.2",
    "@medusajs/medusa": "^1.18.0",
    "@medusajs/ui-preset": "^1.0.2",
    "@types/lodash": "^4.14.195",
    "@types/node": "17.0.21",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.18",
    "@types/react-instantsearch-dom": "^6.12.3",
    "autoprefixer": "^10.4.2",
    "babel-loader": "^8.2.3",
    "cypress": "^9.5.2",
    "eslint": "8.10.0",
    "eslint-config-next": "^13.4.5",
    "postcss": "^8.4.8",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.0.23",
    "typescript": "^5.3.2"
  }

Database: default fake Redis instance Operating system: Kubuntu 20 Browser (if relevant): Chrome Version 121.0.6167.160 (Official Build) (64-bit)

Steps to reproduce the behavior

1. As per Discord's AI assistant Kapa.ai, I first cleared the npx cache using: rm -rf "$(npm config get cache)/_npx"
2. Ran the full ecommerce app: npx create-medusa-app@latest --with-nextjs-starter
3. On the backend the readout:

info:    Using fake Redis
✔ Models initialized – 19ms
✔ Plugin models initialized – 13ms
✔ Strategies initialized – 17ms
✔ Database initialized – 62ms
✔ Repositories initialized – 25ms
✔ Services initialized – 31ms
⠋ Initializing modules
✔ Modules initialized – 64ms
✔ Express intialized – 1ms
⠋ Initializing plugins
⠙ Initializing plugins
✔ Plugins intialized – 222ms
✔ Subscribers initialized – 19ms
✔ API initialized – 59ms
⠋ Initializing defaults
warn:    You don't have any notification provider plugins installed. You may want to add one to your project.
✔ Defaults initialized – 42ms
⠋ Initializing search engine indexing
✔ Indexing event emitted – 15ms
✔ Server is ready on port: 9000 – 12ms

4. I'm then allowed to log into the admin page.

5. Starting the onboarding process, "Get started is completed

6. Section Create Products is completed

7. The issue starts here.

   Section Preview Product in your Next.js Storefront:

    button: **Open Next.js Storefront**  
   

Expected behavior

It is expected that the button redirects to "http://localhost:8000/products/medusa-t-shirt/onboarding=true"

Screenshots

npm run dev

> [email protected] dev
> next dev -p 8000

next.config.js {}
next.config.js {}
   ▲ Next.js 14.0.4
   - Local:        http://localhost:8000
   - Environments: .env.local

warning ../../../../package.json: No license field
 ✓ Ready in 1604ms
 ✓ Compiled /src/middleware in 112ms (81 modules)
 ○ Compiling /[countryCode] ...
 ⨯ ./node_modules/@vespaiach/axios-fetch-adapter/index.js:2:0
Module not found: Package path ./lib/core/settle is not exported from package /home/guyshifty/Desktop/MEDUSA_DOJO/Store-2/store_2-storefront/node_modules/axios (see exports field in /home/guyshifty/Desktop/MEDUSA_DOJO/Store-2/store_2-storefront/node_modules/axios/package.json)

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

Import trace for requested module:
./src/lib/config.ts
./src/lib/data/index.ts
./src/app/actions.ts
./node_modules/next/dist/build/webpack/loaders/next-flight-action-entry-loader.js?actions=%5B%5B%22%2Fhome%2Fguyshifty%2FDesktop%2FMEDUSA_DOJO%2FStore-2%2Fstore_2-storefront%2Fsrc%2Fapp%2Factions.ts%22%2C%5B%22resetOnboardingState%22%2C%22updateRegion%22%5D%5D%5D&__client_imported__=true!
 ⨯ ./node_modules/@vespaiach/axios-fetch-adapter/index.js:2:0

When attempting to open the Next storefront on it's own using npm run dev, I receive this error message in the browser:

Settings > Regions:

I'm not sure if these are the same issue but they are both happening when reattempting install

Additional context

It does seem the "@vespaiach/axios-fetch-adapter" is installed.

[shashankitsoft]

I am facing similar issue. I have node version 21.6.2 installed on windows. Installed medusa backend admin + frontend with cli command. While admin is running fine in browser, but launching storefront is giving the build error.

 ⨯ ./node_modules/@vespaiach/axios-fetch-adapter/index.js:2:0
Module not found: Package path ./lib/core/settle is not exported from package D:\nextjs\medusa-ecom\medusa-store-storefront\node_modules\axios (see exports field in D:\nextjs\medusa-ecom\medusa-store-storefront\node_modules\axios\package.json)

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

Tried deleting node_modules folder and reinstalled modules with pnpm install and pnpm run dev give same error. Also tried with npm install and npm run dev, still same error.

Even creating fresh storefront with https://docs.medusajs.com/starters/nextjs-medusa-starter#option-2-install-nextjs-storefront-only also causing same error.

Due to this unable to open storefront in browser.

Please suggest, its important to run ecommerce frontend.

[minkiha]

I ran in to the same issue, seems like there are dependencies that require yarn to install.

Here's how I fixed it

1. Install yarn on your machine with npm install -g yarn
2. Install dependencies using yarn by running yarn install in the storefront directory

Then npm run dev should work. There still seems to be issue related to building though.

[GSdaBlessedFist]

ooh, nice catch. You're saying to use yarn to install the @vespaiach/axios-fetch-adapter specifically?

[GSdaBlessedFist]

I'd buy you a beer. 🍺

[shashankitsoft]

After some debugging and trying with different ways, I found the issue is related to @vespaiach/axios-fetch-adapter module which requires axios version 0.27.2, but by default the axios installed version is 1.6.7 with storefront. So, its the axios dependency problem.

I solved with running following steps:

pnpm uninstall axios
pnpm uninstall @vespaiach/axios-fetch-adapter
pnpm install [email protected]
pnpm install @vespaiach/axios-fetch-adapter
pnpm run dev

Same you can perform with npm if you are not using pnpm.

And then the storefront worked.

[sradevski]

Hey, thanks for the report! Since v2 brought a lot of architectural and API changes on the backend, we will be closing this ticket since it no longer applies to our new setup, or the issue has already been fixed. If you are still facing issues with v1, please open a new ticket and we will address it as soon as possible. Thanks! 🙏