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

GSdaBlessedFist commented 9 months ago

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

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

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

I'm then allowed to log into the admin page.
Starting the onboarding process, "Get started is completed
Section Create Products is completed
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

> medusa-next@1.0.3 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 commented 9 months ago

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

medusa-storefront-error

Tried deleting node_modules folder and reinstalled modules with pnpm installand 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.

medusa-storefront-browser-error

Please suggest, its important to run ecommerce frontend.

minkiha commented 9 months ago

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

Here's how I fixed it

Install yarn on your machine with npm install -g yarn
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 commented 9 months ago

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

GSdaBlessedFist commented 9 months ago

I'd buy you a beer. 🍺

shashankitsoft commented 9 months ago

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 axios@0.27.2
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 commented 4 months ago

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! 🙏

medusajs / medusa