storefront-foundation/react-storefront

React Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento 2 supported. Always Open Source, Apache-2.0 license. Join us as contributor ([email protected]).

React Storefront the framework to build and deploy lightning-fast eCommerce PWAs.

Free and open-source. Built with Next.js

React Storefront (RSF) utilizes headless architecture allowing you to easily replace your legacy frontend and connect via APIs to any eCommerce platform or backend system. React Storefront extends Next.js to include everything you need for an eCommerce storefront. Try The Tie Bar, Akira, and 1-800-FLOWERS.COM on your phone to see how fast sites on RSF can be!

Ludicrous Speed

React Storefront goes the extra mile to squeeze speed out of every possible real and user-perceived performance optimization including:

• High cache hit rates for dynamic data
• Server Side Rendering
• Automatic AMP creation
• Predictive prefetching of dynamic data
• Code splitting
• Cache optimization
• Client data reuse
• Skeletons
• and more

Bottom Line: RSF is built for speed!

A Different Approach

React Storefront takes a bold new approach that values developer productivity, so you can get more done in less time:

• No config -- download and start coding
• Opinionated framework that does the heavy lifting for you
• Unified code base that uses isomorphic JavaScript across the server, client, and CDN
• Generate AMP and PWA from a single code base
• Automatically guides developers into performance best practices
• Supports source maps for Chrome Debugger and Visual Studio Code

React Storefront is and always will be open-source. Anyone can use and support the project. The goal of RSF is to improve the online shopping experience for everyone.

Made to Sell

React Storefront is custom-built for eCommerce: It contains UI components and templates designed for eCommerce. It’s SEO and search engine friendly. In addition, React Storefront allows you to preserve your existing URL Scheme.

Built for Complex Sites

React Storefront scales from $10M to $1B+ revenue sites and is already powering leading enterprise eCommerce websites. The framework supports real-world migration of complex eCommerce sites to PWAs in incremental steps.

We are looking for Contributors and Designers willing to help us in the solution development.

Integrations

React Storefront can be easily integrated with any eCommerce platform via APIs.

Getting Started

To create a new React Storefront app, ensure node 10 or newer is installed and run:

npm create react-storefront@latest --yes (my-app-name)

Once your app has been created, you can start it in development mode by running:

cd (my-app-name)
npm run dev

Developer Docs

Development

If you like to contribute please feel free to Raise an issue with a bug or feature request report, or just open a Pull Request with the proposed changes.

Local development

After cloning the repo, run:

npm i

To use your local clone of react-storefront in projects, use yalc.

To publish react-storefront to your local yalc store:

yalc publish

Then run the following to push updated builds to yalc store on changes.

npm run watch

Finally, in your project run:

yalc add react-storefront

This will change your project's package.json to use a file path in the dependency entry for react-storefront. To revert this change, run:

yalc remove react-storefront # or yalc remove --all
npm i

Join the community on Slack

If you have any questions or ideas feel free to join our Slack: invitation link

Documentation

The documentation is always THE HARDEST PART of each open-source project! But we're trying hard :-) Full Guides, API Documentation, and Examples

React Storefront is and always will be open-source, released under Apache2 Licence.

Try it on the Layer0. Deploy it anywhere.

Like any Next.js project, React Storefront is deployable to any environment that runs Node.js. The easiest way to test drive and deploy React Storefront is on Layer0, a serverless PaaS that helps developers optimize speed across the entire stack to deliver sub-second dynamic websites. A free tier is available.

Partners

RSF was created by a group of eCommerce site, eCommerce agency, and eCommerce platform engineers.

Partners are encouraged to support the project in various ways - mostly by contributing to the source code, marketing activities, evangelizing and of course - implementing the production projects. We do support our partners by dedicated contact channels, workshops and by sharing the leads from merchants interested in implementations.

React Storefront logo and guidelines

The license

React Storefront source code is completely free and released under the Apache v2.0 License. Check LICENSE.md for more details.

react-storefront's Issues

NavBar & View Cart Error

I've installed the demo storefront via NPM, and there are two areas of the app that aren't working for me. The first is that the NavBar component generates the following error:

TypeError: Cannot read property 'map' of undefined

for line 33 in NavBar.js

33 | {tab.subcategories.map(subcategory => (

When the component is commented out, the front page loads, and I can view products and search as expected.

Also, when a product has been added to the cart, clicking the cart icon generates the following error:

API resolved without sending a response for /api/cart?v=development, this may result in stalled requests.

With the following on screen message:

Unhandled Runtime Error
TypeError: Failed to fetch

I'm on Windows 10, errors are consistent across browsers, with app running locally via Visual Studio.

• Version of React Storefront: 8.15.1

Server error on npm start

using node version: 12.14.0
After run this steps

1. npm create react-storefront@^8.0.0 (my-app-name)
2. npm install
3. npm run dev

I get an error:

Server Error
TypeError: Cannot read property 'map' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
components/NavBar.js (33:35) @ eval

31 |
32 | <div style={{ padding: 20 }}>

33 | {tab.subcategories.map(subcategory => (
| ^
34 | <Link
35 | href={subcategory.href}
36 | key={subcategory.as}

How to disable mock connector code

Bug report

Mock connector code executes, even after I comment the connector line in next.config.js.

Describe the bug

After reading the official documentation (as presented here), I commented out the connector line in next.config.js.

const webpack = require('webpack')
const withReactStorefront = require('react-storefront/plugins/withReactStorefront')
require('dotenv').config()

module.exports = withReactStorefront({
  target: 'serverless',
  //connector: 'react-storefront/mock-connector',
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack })=> {
    config.plugins.push(
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      })
    )
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]
    })
    return config
  },
})

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a new project using storefront template
   2.Edit next.config.js by removing the connector line
   3.do npm install to download all dependencies
2. npm start

Expected behavior

The program should successfully compile and the connector API such as /api/session, and /api/routes should not be invoked.

Screenshots

Web console logs indicating calls from mock-connector code

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser chrome
• Version of React Storefront: 8.17.4

Additional context

Add any other context about the problem here.

Material-UI: the ExpansionPanel component was renamed to Accordion

Material-UI: the ExpansionPanel component was renamed to Accordion to use a more common naming convention.
You should use import { Accordion } from '@material-ui/core' or import Accordion from '@material-ui/core/Accordion'

Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

images

Custom Search Submit Button Icon

It is impossible to pass a custom search icon which may be required due to a specific design of application.

It is hardcoded here:

https://github.com/react-storefront-community/react-storefront/blob/master/src/search/SearchSubmitButton.js#L35

Adding a simple condition to use an icon from props or a default one would allow to implement custom designs which would be highly useful.

Options in session context provider api call

Feature request

I request to have an ability to add api options to the session context provider

Is your feature request related to a problem? Please describe.

Session Provider with only url cannot allow me to pass sensitive data like token over a url

Describe the solution you'd like

Add options as a prop in the session context provider code base and use it in the fetch call.
send token via headers in the options sections of the fetch api.

Describe alternatives you've considered

No other alternatives

Additional context

Add any other context or screenshots about the feature request here.

Questions regarding storefront versions & deployment

I was searching for a storefront & found couple of boilerplate for react-storefront.
I am little confused as to what each offers & how they are different. So far the with the documentation I went through, I believe both are same. Here are the links I found:

• react-storefront from react-storefront-community
• react-storefront from moovweb

The other help I needed was on how to deploy it other than Moovweb XDN? Like if we want to deploy it to say Heroku or Netlify or even EC2?
The only detail I could find related to this was this stackoverflow issue which points that express needs to be added. Not sure, how does routing affects the hosting platform?

Any information / help could really help me understand this storefront better. Thank you.

react-storefront breaks just after install the magento connector

Bug report

react-storefront breaks just after install the magento connector

Just after install react-storefront and have it working on my local environment I installed react-storefront-magento2-connector and the site broke showing the error:
TypeError: Object(...) is not a function
at eval (webpack-internal:///./pages/api/index.js:6:89)
at apiResolver (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DevServer.handleApiRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:66:462)
at async Object.fn (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:580)
at async Router.execute (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504)
FetchError: invalid json response body at http://localhost:3000/api?_includeAppData=1 reason: Unexpected token I in JSON at position 0
at /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/node-fetch/lib/index.js:272:32
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Function.MyApp.getInitialProps (webpack-internal:///./pages/_app.js:134:17)
at async loadGetInitialProps (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/lib/utils.js:5:91)
at async renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/render.js:28:1446)
at async /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:111:97
at async /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:104:142
at async DevServer.renderToHTMLWithComponents (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:136:387)
at async DevServer.renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:137:610)
at async DevServer.renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/server/next-dev-server.js:36:578)
at async DevServer.render (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:74:255)
at async Object.fn (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:672)
at async Router.execute (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504) {
type: 'invalid-json'
}

NOTE: I didn't change/add any configuration/file, just installed the connector and tested the site again.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. npm create react-storefront@latest --yes my-m2-app
2. cd my-m2-app
3. npm install react-storefront-magento2-connector
4. npm run dev

System information

• OS: macOS Catalina 10.15.5
• Browser: Chrome
• Version of React Storefront: Last

Thanks!
Pablo

React version conflict with material-ui

Bug report

on

npm create react-storefront@^8.0.0 xxx

I get

✖ npm install failed
Error: Command failed: npm install --registry=https://npm-proxy.fury.io/moovweb/
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"4.5.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. $npm create react-storefront@^8.0.0 xxx

Expected behavior

Successful install of packages

System information

• OS: macOS
• Version of React Storefront: ^8.0.0

Additional context

N/A

Web pack Error while running a npm start && npm run build command

Bug report

I am using MacOs 11.2.1 and I have tried to install / run and deploy react-storefront using several methods. All have failed me.

Describe the bug

1. I used standard MacoS NodeJS v12.18.3, NPM v6.14.6. and I ran the commands from the docs:

npm install 
npm start or npm run build

When I run npm start I am presented with the following error:

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

Error: Cannot find module 'webpack'
Require stack:
- /Users/gis00217/Documents/my-doc/arun/myreact-app/next.config.js
- /Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/config.js
- /Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/server/next.js
- /Users/gis00217/Documents/my-doc/arun/myreact-app/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/gis00217/Documents/my-doc/arun/myreact-app/next.config.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at loadConfig (/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/config.js:8:94)
    at new Server (/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/next-server.js:1:4533)
    at new DevServer (/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/server/next-dev-server.js:1:2964)
    at createServer (/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/server/next.js:2:607)
    at Object.<anonymous> (/Users/gis00217/Documents/my-doc/arun/myreact-app/server.js:14:13) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/gis00217/Documents/my-doc/arun/myreact-app/next.config.js',
    '/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/config.js',
    '/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/gis00217/Documents/my-doc/arun/myreact-app/node_modules/next/dist/server/next.js',
    '/Users/gis00217/Documents/my-doc/arun/myreact-app/server.js'
  ]
}
[nodemon] app crashed - waiting for file changes before starting...

Expected behavior

The site is supposed to start on localhost:3000 .

Screenshots

System information

• OS: macOS
• Version of React Storefront: 8.0.0

Additional context

Add any other context about the problem here.

WooCommerce / Headless CMS implementation plans

Any future plans to add WooCommerce as headless eCommerce? Also, a headless CMS maybe? I am trying to decide what technology to invest in and currently VUE Storefront offers these, but I’d much rather work with React.

Thanks for the great project in any case!

Should you consider additional log when trigger actionCreator? To watch transition of state (prevState, payload sent, nextState)

Feature request

Is your feature request related to a problem? Please describe.

A clear and concise description of what you want and what your use case is.

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Static assets are not served from the service worker cache

Bug report

Describe the bug

The service worker is downloading the js assets upon installation, but they are not being served from the cache. They are being refetched from the network.

Subcategory navigation bugs and Link prefetch visible bug

Bug report

Describe the bug

1. When navigating from one subcategory to another and clicking subcategory twice, will write old history to new entry, which will show old category content on new subcategory page

2. When navigating through service worker cached subcategories, the subcategory page content does not update

3. When Link has a "visible" prop, and it's direct children is a Material-ui component, ref is undefined, so the prefetching is not working.

Error: Cannot find module 'react-storefront-magento2-connector'

Bug report

Describe the bug

After creating an app with:

npm create react-storefront --yes (my-app-name)

And trying to run dev I get the error:

UnhandledPromiseRejectionWarning: Error: Cannot find module 'react-storefront-magento2-connector'

Although I've not configured anything yet.

To Reproduce

1. Clone react-storefront repo
2. Create an instance of react-storefront
3. CD into app and attempt to run npm run dev
4. Error in console appears after trying to compile

Expected behavior

The newly created storefront should start as intended.

Screenshots

System information

• OS: macOS
• Version of React Storefront: 8.9.0

Thanks!

Test issue

Bug report

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]
• Browser (if applies) [e.g. chrome, safari]
• Version of React Storefront: [e.g. 7.0.2]

Additional context

Add any other context about the problem here.

Trouble building/deploying default app: 'cannot find module for page: /account'

Bug report

I am following the getting started guide and, without changing code, deploying to xdn. xdn build and xdn deploy spit out the error: 'cannot find module for page: /account'.

A friend also tried this, same day, same problem.

Steps to repro

1. I created a new storefront: npm create react-storefront@^8.0.0 storefront-test

✔ version … 1.0.0
✔ description … test react storefront
✔ repository url … 
✔ author … elliott-king
✔ license … UNLICENSED
✔ private … _false_ / true
✔ Will you be deploying your app on the Moovweb XDN? … no / _yes_
✔ Create a directory for this app? … no / _yes_

2. I tested the app with npm start - seems to be working fine.
3. I installed xdn with npm i -g @xdn/cli and intialized with xdn init - both ran fine.
4. xdn deploy cancels with the above error

A clear and concise description of what the bug is.

Expected behavior

I expect it to deploy correctly & the XDN UI should have a green dot instead of red.

System information

• OS: macOS 10.15.6 and 10.15.5
• Version of React Storefront: "^8.13.0"
• Version of @xdn/cli 1.44.0

RSF8 Magnify Hint Bug

Bug report

Describe the bug

The RSF8 MagnifyHint component has a bug with displaying the correct text. The documentation and the RSF8 repo for this component both say that the default values for the expand copy as expandTextMobile : 'Tap to Expand' and expandTextDesktop : 'Click to Expand' but the actual component is displaying "Tap to Expand" for desktop and "Hover to Zoom" for mobile. The other prop is also set as zoomTextDesktop: 'Hover to Zoom' but this is only showing for mobile. Shouldn't this display on desktop like the prop says? And then when you hover with a mouse, it changes to "Click to Expand"

To Reproduce

1. RSF8 demo store: https://demo.reactstorefront.io/p/1
2. switch between desktop/mobile

Expected behavior

default values for the expand copy as expandTextMobile : 'Tap to Expand' and expandTextDesktop : 'Click to Expand'

Screenshots

Additional context

RSF8 docs: https://docs.reactstorefront.io/apiReference/carousel/MagnifyHint
RSF8 repo: https://github.com/storefront-foundation/react-storefront/blob/master/src/carousel/MagnifyHint.js
RSF8 demo store: https://demo.reactstorefront.io/p/1

Demo url doesn't work

https://docs.reactstorefront.io/

I need help !

Hi !
I am newbie with this project and I have few question want to ask:

1. What is the usage of the the api/session ? I know it can pass down the session data through the child but we can also do that with appData. Another thing is how I can update and get back session data for each user. Do I need use redis or any db to store the session and get session data back based on the id which I will set to user cookie ?

2. What is the usage of useAppStore hook ? in pages/_app.js why don use appData direct from pageProps ? Why _app don use createLazyProps like another pages ?

3. I want to make simple app like the shopping cart ? But I want to make the cart persistent, do I need to store using db when add to cart and in api/cart I will get the cart details out of db. ?

4. What is the usage of appData ? I can see that for the Server side rendering, the appData handler will be call in fullfillRequestAPI but I wonder how I can set the appData when I am in one specific page which is render on client side.

5. About the SessionContext, there is only one action is updateCartCount and it will update only in context, so how can I add more actions for session Context. Maybe I would like to have action to add product or logged user into session ?

Unable to create storefront on Windows

Bug report

I am using Windows 10 and I have tried to install / run react-storefront using several methods. All have failed me.

Describe the bug

1. I used standard windows NodeJS v12.18, NPM v6.14.4. and I ran the commands from the docs:

npm create react-storefront@^8.014.0 my-m2-app
cd my-m2-app
npm install react-storefront-magento2-connector

Thereafter I edited a .env file + edited the next.js.config file as suggested.

Thereafter I run npm start.

When I run npm start I am presented with the following error:

[nodemon] starting "node server.js"
(node:37) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
Defining routes from exportPathMap
> Using connector react-storefront/mock-connector
info  - Using external babel configuration from /app/reactstorefront/.babelrc.js
(node:37) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at /usr/local/lib/node_modules/webpack/lib/util/comparators.js:40:7
    at /usr/local/lib/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:75:37
    at SyncBailHook.eval [as call] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47168:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.seal (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55259:30)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56934:18
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55185:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.finish (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55177:28)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56931:17
    at eval (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:9:1)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:60005:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:37) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
(node:37) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:37) UnhandledPromiseRejectionWarning: TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at /usr/local/lib/node_modules/webpack/lib/util/comparators.js:40:7
    at /usr/local/lib/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:75:37
    at SyncBailHook.eval [as call] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47168:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.seal (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55259:30)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56934:18
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55185:4
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:13:1)
    at AsyncSeriesHook.lazyCompileHook (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compilation.finish (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:55177:28)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:56931:17
    at eval (eval at create (/app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:9:1)
    at /app/reactstorefront/node_modules/next/dist/compiled/webpack/bundle4.js:60005:20
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:37) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)

To Reproduce

Use Windows 10 with nodejs v12 installed.

So, I went and tried to create a docker image to see if I can't just run it that way. Same issue occurs.

create a Dockerfile.

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

RUN npm create react-storefront@latest --yes reactstorefront

# go into dir
WORKDIR /app/reactstorefront

RUN npm link webpack

RUN npm run dev

run these command:

docker build -t reactstorefront:latest .
docker run -p 3000:3000 reactstorefront:latest

Expected behavior

The site is supposed to start on localhost:3000 .

Screenshots

System information

• OS: Windows
• Version of React Storefront: Latest

Additional context

webpack-clear-require-cache-plugin 0.0.4 is no longer active

Bug report

Dependency error

Describe the bug

Hi, I've been experiencing trouble when trying to install the dependencies of package.json.
webpack-clear-require-cache-plugin 0.0.4 is no longer active, just recently it has been updated to 0.0.5.
It was down for a while.

A clear and concise description of what the bug is.

To Reproduce

delete del node_modules
delete del package-lock
execute npm cache clean --force

Expected behavior

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].

Offline warning not show in AppBar when in offline mode

Bug report

Describe the bug

<AppBar offlineWarning="some message"/> should display that message when the user is offline. It currently does not.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Put browser in offline mode using dev tools
2. The offline warning will not show

Expected behavior

The offline warning message should be displayed in the AppBar

Custom Hamburger Menu Icon

1. Hamburger MenuButton icon is hardcoded and the user can't pass a custom icon there:
   https://github.com/react-storefront-community/react-storefront/blob/master/src/menu/MenuButton.js#L42

2. MenuIcon can't be customised in a way so that AMP guidelines are supported.
   Inside MenuIcon component it is needed to apply !important to customise the menu icon which does not meet the guidelines of AMP:
   https://github.com/react-storefront-community/react-storefront/blob/master/src/menu/MenuIcon.js#L132

Expected behaviour

The users of RSF should be able to add custom hamburger menu icon or customise it passing down classes without writing .class > div > span: { style: !important }

Screenshots

Module not found: Error: Can't resolve '@material-ui/core/TabScrollButton'

Getting this error Module not found: Error: Can't resolve '@material-ui/core/TabScrollButton' in react project while doing build and run start.

Can't run the project in local development???

I was followed by the instruction given in the GitHub for local development. Moreover, I haven't able to run this in my local machine. When I was run the command of npm run watch and I got the error as
[nodemon] app crashed like this. I have attached the screenshot and could you please help me on this to solve this issue

Invalid hook call makes it impossible to run this app

Bug report

Describe the bug

I was trying to play around with this storefront but when I run npm run dev I get info about invalid hook call: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ....

To Reproduce

Steps to reproduce the behavior:

1. npm create react-storefront@latest --yes react-storefront
2. cd react-storefront
3. npm run dev

I also tried with npm run build, but after npm start I get the same error.

Expected behavior

Working app :D

System information

• OS: Ubuntu
• Version of React Storefront: [don't know how to check it - I followed your guidelines so I assume it's the latest?]

Using react-storefront with TypeScrpipt

Hi, guys!

Can we use react-storefront with TypeScript?
I'm trying to find out if we can use it with TS.
Unfortunately, I can't see some info or examples about it.

Please check my example: #165

Thanks in advance!

create more Facet Group types

is there a way or a procedure to follow in order to add new facet group like a price slider or min-max fields and how to customize ?

Getting error while connecting with Salesforce Connector

Bug report

Describe the bug

I have followed all the steps for configuring Salesforce Commerce Cloud Connector but when I start the Application I get bellow error

Defining routes from exportPathMap

Using connector react-storefront-salesforce-commerce-cloud-connector
info - Using external babel configuration from D:\Work\react\react-salesforce-app.babelrc.js
event - compiled successfully
(node:12828) UnhandledPromiseRejectionWarning: D:\Work\react\react-salesforce-app\node_modules\react-storefront-salesforce-commerce-cloud-connector\index.js:3
export { default as cart } from './cart.js';
^^^^^^

SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1053:16)
at Module._compile (internal/modules/cjs/loader.js:1101:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at D:\Work\react\react-salesforce-app\server.js:33:31
(node:12828) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:12828) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

To Reproduce

Steps mentioned in
https://github.com/storefront-foundation/salesforce-commerce-cloud-connector

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

connecting with Salesforce Connector

Screenshots

If applicable, add screenshots to help explain your problem.

Any tutorial to create your own connector, idk how to start

'SERVICE_WORKER' is not recognized as an internal or external command while npm start

npm create react-storefront@^8.0.0 react-storefront
npm start

Getting following Error

`

[email protected] start E:\react-storefront
SERVICE_WORKER=true xdn run --cache
'SERVICE_WORKER' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: SERVICE_WORKER=true xdn run --cache
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`

Please let me know how to resolve it.

SSL certificate has expired

https://www.reactstorefront.io/

Export a static version of the site?

Is there a way to export the site statically so that I can run it on my desktop for example? I know nextjs can do that and storefront uses it https://nextjs.org/docs/advanced-features/static-html-export Is it possible to do it with react-storefront?

Installation Fails

After run npm create react-storefront --yes (my-app-name) i'm getting this error:
Unexpected end of JSON input while parsing near '...am":"^3.1.1"},"devDep'

App Translation Support

Feature request

Translation Support for the App UI

Is your feature request related to a problem? Please describe.

Currently there is no documented way to translate some of the UI components(like FIlter, SortButton, etc).
I "managed" to translate some of the text by changing the texts straight away on the node_modules folder, yet it isn't the right way to do it.

Describe the solution you'd like

Would be good if had support for a i18n library so we could set our own texts and translations for the whole app

Describe alternatives you've considered

One alternative would be a property field like "label" or something like that in which would allow you to change the texts.

Error while creating home page with fulfillAPIRequest

Bug report

Throws up error Type Error: Cannot read property '_includeAppData' of undefined

Describe the bug

When I run npm start, after implementing /pages/api/index.js, using fulfillAPIRequest, it throws up an error on the console
as follows...

event - build page: /api
wait - compiling...
event - compiled successfully
TypeError: Cannot read property '_includeAppData' of undefined
at _callee$ (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:50:27)
at tryCatch (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:63:40)
at Generator.invoke [as _invoke] (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:294:22)
at Generator.next (/Volumes/secondary/projects/rv-app/node_modules/regenerator-runtime/runtime.js:119:21)
at asyncGeneratorStep (/Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
at /Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
at new Promise ()
at /Volumes/secondary/projects/rv-app/node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12
at _fulfillAPIRequest (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:86:29)
at fulfillAPIRequest (/Volumes/secondary/projects/rv-app/node_modules/react-storefront/props/fulfillAPIRequest.js:32:29)
at Index (webpack-internal:///./pages/api/index.js:59:103)
at apiResolver (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DevServer.handleApiRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:66:462)
at async Object.fn (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:58:580)
at async Router.execute (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:32:504)
FetchError: invalid json response body at http://localhost:3000/api?_includeAppData=1 reason: Unexpected token I in JSON at position 0
at /Volumes/secondary/projects/rv-app/node_modules/node-fetch/lib/index.js:272:32
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Function.MyApp.getInitialProps (webpack-internal:///./pages/_app.js:123:17)
at async loadGetInitialProps (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/lib/utils.js:5:91)
at async renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/render.js:28:1537)
at async /Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:112:97
at async /Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:105:142
at async DevServer.renderToHTMLWithComponents (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:137:387)
at async DevServer.renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:138:610)
at async DevServer.renderToHTML (/Volumes/secondary/projects/rv-app/node_modules/next/dist/server/next-dev-server.js:36:578)
at async DevServer.render (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:75:160)
at async Object.fn (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:58:672)
at async Router.execute (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Volumes/secondary/projects/rv-app/node_modules/next/dist/next-server/server/next-server.js:32:504) {
type: 'invalid-json'
}

On the GUI of the page i.e. localhost:3000, the following error is shown.

A clear and concise description of what the bug is.

To Reproduce

1. Change the pages/api/index.js as follows...

/*
import { home } from 'react-storefront-connector'

export default async function(req, res) {
  res.json(await home(req, res))
}
*/


import fulfillAPIRequest from 'react-storefront/props/fulfillAPIRequest'


function getAppData() {
  return Promise.resolve(
  {
  "menu": {
    "items": [{
      "text": 'Menu Item Text',           // required
      "image": '/path/to/image.png',      // optional - An image to display to the left of the text
      "header": 'html or data',           // optional - HTML or data to display in the header of the menu card for this item
      "footer": 'html or data',           // optional - HTML or data to display in the footer of the menu card for this item

      // For expandable items only
      "expanded": (undefined|true|false), // When `true` or `false`, the item will be rendered as an
                                          // expandable section.
                                          // When `undefined` the menu will slide to the next level of
                                          // the when the item is clicked.

      // For links only
      "href": `/s/[subcategoryId]`,       // optional - the Next.js route pattern
      "as": `/s/${i}`,                    // optional - the URL for the link

      // For parent items only
      "items": []                         // optional - child items to display when the user taps on
                                          // this item.  Child items have the same structure.
    }]
  }
})
}

function getPageData() {
  return Promise.resolve(
  {
  "pageData": {
    "title": "Home",              // The title for the document
    "slots": {                    // The rest of the data model is up to you.  It's common to include an number
      // entirely up to you       // of slots containing HTML from your CMS here, but not required.
    }
  }
  })
}


export default async function Index(params, req, res) {

  const result = await fulfillAPIRequest(req, {
    appData: getAppData,
    pageData: getPageData
  })
  return result
}

2. keep other things the same. Just the /pages/api/index.js is modified as above.
3. do npm start

Expected behavior

The page should show up without errors.

Screenshots

Screenshots provided above.

System information

• OS: macOs and Linux
• Browser Chrome
• Version of React Storefront: 8.17.4

Additional context

I tried this in my customized version initially. I thought, I did a mistake somewhere. Then, I recreated a new app from scratch using npm create <args...>. Even the fresh app behaves the same way.

Dependency resolution problems

Bug report

Describe the bug

A fresh install of the master branch will yield a broken starter app. There are dependency resolution errors due to the recent update to material-ui

I am testing a fix, may submit a PR if successful.

To Reproduce

Follow README instructions to create a new app. Clear package-lock.json and npm install to attempt to resolve the dependencies.

Simply:
npm start

Attempt to load a subdirectory using mock data. You will be met with an error.

You can also attempt:
npm update on a fresh clone of this repo @ master

Expected behavior

Dependencies install correctly.

Screenshots

System information

• Happens on Windows 10, Alpine, Ubuntu.

Additional context

I found these two releases interesting:
https://github.com/mui-org/material-ui/releases/tag/v4.11.2
https://github.com/mui-org/material-ui/releases/tag/v4.11.4

We fixed an issue related to some packages using incompatible versions of @material-ui/types. This affected @material-ui/core, @material-ui/lab, and @material-ui/styles
@material-ui/[email protected] accidentally included a breaking change.

Make it UI library agnostic

Feature request

It would be a good idea to don't have Material UI library dependency. This way you can use a different library or your own one.

Is your feature request related to a problem? Please describe.

Not really, but I think not everyone likes Material design to say something 😅

Describe the solution you'd like

export core functionalities as utils, hooks, higher order functions and only the logic you have used on your customised components. These changes involves to have new section in the docs as well.

Describe alternatives you've considered

Additional context

This proposal comes out from creating custom components using Chakra UI for a personal project so I've cloned the project and I've been making the modifications to remove material UI dependency.

Slack Invite Expired

Can someone create a new slack invite link? I'd like to join the group and learn more.

Bug report

The slack invite link is expired

Describe the bug

Can no longer join the slack channel

Broken Slack invitation link across all pages.

Bug report

Describe the bug

I'm unable to join your Slack community, the invitation link is broken in this repo and on your landing page:

• https://github.com/storefront-foundation/react-storefront/blob/master/README.md#join-the-community-on-slack,
• https://www.reactstorefront.io

To Reproduce

1. Go to https://www.reactstorefront.io, scroll to the bottom on the page, and click on "Slack community".
2. Alternatively go to https://github.com/storefront-foundation/react-storefront/ and click on "invitation link".
3. There is no way to sign up, one could only sign in.

Expected behaviour

Users should be able to sign up for your Slack channel(s).

System information

Universally broken everywhere.

Additional context

I realise it's not a bug with react-storefront per se, but had no idea where to report it (normally this would go to Slack I suppose, d'oh) 😞

ERESOLVE npm-proxy.fury.io/moovweb/ npm ERR! code ERESOLVE

Bug report

Describe the bug

✖ npm install failed
Error: Command failed: npm install --registry=https://npm-proxy.fury.io/moovweb/
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^10.0.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^9.1.6" from [email protected]
npm ERR! node_modules/react-storefront-analytics
npm ERR!   react-storefront-analytics@"^1.1.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/lucjangrzesik/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lucjangrzesik/.npm/_logs/2021-04-23T17_59_52_528Z-debug.log

    at ChildProcess.exithandler (node:child_process:309:12)
    at ChildProcess.emit (node:events:327:20)
    at maybeClose (node:internal/child_process:1048:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5) {
  killed: false,
  code: 1,
  signal: null,
  cmd: 'npm install --registry=https://npm-proxy.fury.io/moovweb/',
  stdout: '',
  stderr: 'npm ERR! code ERESOLVE\n' +
    'npm ERR! ERESOLVE unable to resolve dependency tree\n' +
    'npm ERR! \n' +
    'npm ERR! While resolving: [email protected]\n' +
    'npm ERR! Found: [email protected]\n' +
    'npm ERR! node_modules/next\n' +
    'npm ERR!   next@"^10.0.3" from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Could not resolve dependency:\n' +
    'npm ERR! peer next@"^9.1.6" from [email protected]\n' +
    'npm ERR! node_modules/react-storefront-analytics\n' +
    'npm ERR!   react-storefront-analytics@"^1.1.2" from the root project\n' +
    'npm ERR! \n' +
    'npm ERR! Fix the upstream dependency conflict, or retry\n' +
    'npm ERR! this command with --force, or --legacy-peer-deps\n' +
    'npm ERR! to accept an incorrect (and potentially broken) dependency resolution.\n' +
    'npm ERR! \n' +
    'npm ERR! See /Users/lucjangrzesik/.npm/eresolve-report.txt for a full report.\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /Users/lucjangrzesik/.npm/_logs/2021-04-23T17_59_52_528Z-debug.log\n'
}
npm ERR! code 1
npm ERR! path /Users/lucjangrzesik/Desktop/thesharify
npm ERR! command failed
npm ERR! command sh -c create-react-storefront thesharify

npm ERR! A complete log of this run can be found in:

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows] MACOS
• Browser (if applies) [e.g. chrome, safari]
• Version of React Storefront: [e.g. 7.0.2]

Additional context

Add any other context about the problem here.

Update Cart Is Not Working From The Cart Page

Bug report

When we try to update any of the cart items from the cart page, it prevents me to do so and throws an error

Describe the bug

The error is obviously happens when the SessionProvider tries to send a POST request to the nextjs API api/cart/update. This request failes with 500 error.

I can also see below error in the console

TypeError: resolver is not a function
    at apiResolver (/Users/rajeevktomy/Desktop/projects/javascript/rsf-db/node_modules/next/dist/next-server/server/api-utils.js:8:7)
    at DevServer.handleApiRequest (/Users/rajeevktomy/Desktop/projects/javascript/rsf-db/node_modules/next/dist/next-server/server/next-server.js:48:427)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Start the application npm start
2. Load the application in the URL: http://localhost:3000/
3. Add a product to the cart
4. Visit the cart page
5. Try to increment or decrement the quantity
6. It ends up with an error popup

Expected behavior

It should increment or decrement the quantity of the quote item.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS Catalina 10.15.4
• Browser: chrome, safari
• Version of React Storefront: 8.15.1

Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Bug report

Describe the bug

Error with useJssStyles...

To Reproduce

1. npm create react-storefront@latest --yes XXX
2. npm start
3. http://localhost:3000
4. See error

Expected behavior

Render as expected.

Screenshots

System information

• OS: macOS Apple Silicon
• Version of React Storefront: [@latest (8.17.4)]

Additional context

M1 Mac

Unable to start app with npm create

1. npm create react-storefront@^8.0.0 (my-app-name)
2. then npm start
   Im getting below error. Please help me out.

Error: Cannot find module '@material-ui/core/TabScrollButton'

Doubt: Is react storefront is still maintained ?

How to connect with Strapi?

ERR_HTTP_HEADERS_SENT Error.

After deployment to XDN URL provided after deployment doesn't work with the error 👍

{"error":"Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client","stack":"Runtime.UnhandledPromiseRejection: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client\n at process. (/var/runtime/index.js:35:15)\n at process.emit (events.js:315:20)\n at processPromiseRejections (internal/process/promises.js:209:33)\n at processTicksAndRejections (internal/process/task_queues.js:98:32)"}

URL to check:

https://magento2-extension-poc-m2-xdn-default.moovweb-edge.io/

Local works, however, has errors in the console/server log:

wait - compiling...
event - build page: /api/routes
event - compiled successfully
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at ServerResponse.setHeader (_http_outgoing.js:485:11)
at sendJson (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/api-utils.js:42:5)
at ServerResponse.apiRes.json (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/api-utils.js:6:283)
at eval (webpack-internal:///./pages/api/session.js:6:7)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async apiResolver (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/api-utils.js:8:1)
at async DevServer.handleApiRequest (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/next-server.js:48:397)
at async Object.fn (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/next-server.js:40:218)
at async Router.execute (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/router.js:38:67)
at async DevServer.run (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/next-server.js:49:494)
at async DevServer.handleRequest (/home/genaker/M2_XDN/node_modules/next/dist/next-server/server/next-server.js:18:101) {
code: 'ERR_HTTP_HEADERS_SENT'
}

Typescript Support

Feature request

is Typescript in your plan to support it?

Core code is using theme variables that can be overwritten

Feature request

Is your feature request related to a problem? Please describe.

Some of the core components are using theme variables that are not defined in the core MUI theme, but only in the starter app theme. Since these variables are expected to be present, they should not be removable by client code like they currently are.

Examples:
https://github.com/react-storefront-community/react-storefront/blob/master/src/AppBar.js#L18
https://github.com/react-storefront-community/react-storefront/blob/master/src/menu/menuStyles.js#L6

Describe the solution you'd like

RSF should add a createTheme function to encapsulate the necessary RSF-specific theme variables, and modify the starter app to use that function to create the theme.