jordaneisenburger / fallback-studio

Magento 2 PWA fallback wrapper to easily create a custom theme on top of PWA Studio

Hi there 👋

fallback-studio's Issues

PWA Studio V5

This looks like a great project and I think it would really help me to get going with PWA Studio. Forgive me if I'm asking this question in the wrong place but is there and plan or timeframe for moving this up to Version 5?

Error running "yarn run watch:example-shop" on new install

I have a Valet+ install of Magento 2.3.2 with the Venia Sample Data installed. I've referenced it in the src/example-company/example-shop/.env file:
MAGENTO_BACKEND_URL=https://fallback.test/
I've also added:
NODE_TLS_REJECT_UNAUTHORIZED=0
at the end of the file due to Valet's interesting relationship to SSL.

On a fresh install of PWA studio, this works. And to be fair, this worked on a fresh install of fallback that I tested earlier this week.

On a new install I created today, however, it does not. Instead, after running "yarn run watch:example-shop" I receive the following error:
Chriss-MacBook-Pro:fallback-studio chrisnelson$ yarn run watch:example-shop yarn run v1.13.0 $ yarn example-shop run watch $ yarn workspace @fallback-studio/example-shop run watch $ webpack-dev-server --progress --color --env.mode development TypeError: Cannot read property '__schema' of undefined at getSchemaTypes.then.data (/Users/chrisnelson/fallback-studio/src/pwa-studio/packages/pwa-buildpack/lib/Utilities/graphQL.js:49:35) at process._tickCallback (internal/process/next_tick.js:68:7) ✨ Done in 3.65s.

Make fallback studio work with latest pwa-studio

Current pwa-studio in your repo is out of date, could you make it work with latest pwa-studio

Error after fresh install

After install, I got this issue. could you take a look

ERROR in ./FETCH_ROOT_COMPONENT

Hello,

on a windows port I have this error popping up
I think it's a path building issue because we can see this string

....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js'
otherwise
FETCH_ROOT_COMPONENT refer to MagentoRouteHandler
but I don't understand the mecanism yet.

any clue would be likely,

Thomas

ERROR in ./FETCH_ROOT_COMPONENT Module not found: Error: Can't resolve '....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js' in 'C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop' resolve '....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js' in 'C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop' Parsed request is a module using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\package.json (relative path: .) resolve as module looking for modules in C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\package.json (relative path: .) using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\package.json (relative path: ./....pwa-studiopackagesenia-conceptsrcRootComponentsCMSinde x.js) no extension C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist .mjs C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs doesn't exist .js C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js doesn't exist .json C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json doesn't exist .graphql C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql doesn't exist as directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\node_modules doesn't exist or is not a directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\node_modules doesn't exist or is not a directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\node_modules doesn't exist or is not a directory C:\Users\Thomas\Documents\_Projects\Magento\node_modules doesn't exist or is not a directory C:\Users\Thomas\Documents\_Projects\node_modules doesn't exist or is not a directory C:\Users\Thomas\Documents\node_modules doesn't exist or is not a directory C:\Users\Thomas\node_modules doesn't exist or is not a directory C:\Users\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory looking for modules in C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\package.json (relative path: ./node_modules/....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js) no extension Field 'browser' doesn't contain a valid alias configuration looking for modules in C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\package.json (relative path: ./node_modules) using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\package.json (relative path: ./node_modules/....pwa-studiopackagesenia-conceptsrcRootComp onentsCMSindex.js) no extension C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration .mjs C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration .js C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration .json C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json doesn't exist .graphql Field 'browser' doesn't contain a valid alias configuration .graphql C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql doesn't exist C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql doesn't exist as directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist as directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist looking for modules in C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\package.json (relative path: .) using description file: C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\package.json (relative path: ./....pwa-studiopackagesenia-conceptsrcRootComponentsCM Sindex.js) no extension C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist .mjs C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs doesn't exist .js C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js doesn't exist .json C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json doesn't exist .graphql C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql doesn't exist as directory C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js doesn't exist [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\node_modules] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\node_modules] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\node_modules] [C:\Users\Thomas\Documents\_Projects\Magento\node_modules] [C:\Users\Thomas\Documents\_Projects\node_modules] [C:\Users\Thomas\Documents\node_modules] [C:\Users\Thomas\node_modules] [C:\Users\node_modules] [C:\node_modules] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\example-company\example-shop\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\node_modules\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.mjs] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.js] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.json] [C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback2\src\pwa-studio\packages\venia-concept\....pwa-studiopackagesenia-conceptsrcRootComponentsCMSindex.js.graphql] @ ./FETCH_ROOT_COMPONENT 3:32-164 @ C:/Users/Thomas/Documents/_Projects/Magento/FallBackStudio/fallback2/src/pwa-studio/packages/peregrine/dist/Router/MagentoRouteHandler.js @ C:/Users/Thomas/Documents/_Projects/Magento/FallBackStudio/fallback2/src/pwa-studio/packages/peregrine/dist/Router/index.js @ C:/Users/Thomas/Documents/_Projects/Magento/FallBackStudio/fallback2/src/pwa-studio/packages/peregrine/dist/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?https://fallback-studio-example-shop-8kix8.local.pwadev:8464 (webpack)/hot/dev-server.js ./src/index.js

Missing documentation for publishing to production environment, thank you

Hello pwa-studio developers , I want a simple release production documentation. For example, execute the package.json script. thank you

When the sample storefront component footer is modified, the page is not loaded.

Unable to reach the page hot update, causing the page to report an error, as shown in the figure

ProductImage must have a sub selection

browsing : https://fallback-studio-example-shop-amwsw.local.pwadev:8415/venia-dresses.html

UpwardServerError: Request did not evaluate to a valid response, because: 
Error: Error: Field "small_image" of type "ProductImage" must have a sub selection.
    at makePromise.then (C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback-studio\src\example-company\example-shop\node_modules\@magento\pwa-buildpack\node_modules\@magento\upward-js\lib\resolvers\ServiceResolver.js:83:27)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at buildResponse (C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback-studio\src\example-company\example-shop\node_modules\@magento\pwa-buildpack\node_modules\@magento\upward-js\lib\buildResponse.js:30:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at UpwardPlugin.<anonymous> (C:\Users\Thomas\Documents\_Projects\Magento\FallBackStudio\fallback-studio\src\example-company\example-shop\node_modules\@magento\pwa-buildpack\node_modules\@magento\upward-js\lib\middleware.js:72:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Facing Issues regarding various files name in fresh install.

In a fresh fallback installation we are facing various errors that seems to be because of some files names are not in proper case.

It seems as if some file names were expected to be in lower case but they are in upper case in the latest git repo.

In a fresh installation I faced this issue in three cases, due to which installation was restricted and error's were thrown. On verifying the same with the latest Magento develop branch I found that the issue was related to file names.

For Example:

https://github.com/Jordaneisenburger/fallback-studio/tree/master/src/pwa-studio/packages/venia-concept/src/RootComponents/CMS
(at this location there is a file CMS.js in fallback repo.)

whereas, on looking on magento pwa develop branch, at :
https://github.com/magento/pwa-studio/tree/develop/packages/venia-ui/lib/RootComponents/CMS
(at this location the file name is cms.js)

similarly I am facing various issues in various files and getting error as bellow in a fresh installation:
ERROR in ./src/RootComponents/CMS/index.js
Module not found: Error: Can't resolve './cms' in '/var/www/html/vcs/fallback-studio/src/pwa-studio/packages/venia-concept/src/RootComponents/CMS'
@ ./src/RootComponents/CMS/index.js 6:0-32 6:0-32
@ ./FETCH_ROOT_COMPONENT
@ ../peregrine/lib/Router/magentoRouteHandler.js
@ ../peregrine/lib/Router/index.js
@ ../peregrine/lib/index.js
@ ./src/index.js

Error when copying ProductFullDetail component to own package

Hi,

this issues occurs when I try to modify the ProductFullDetail component.

Steps to reproduce:

1. Copy the ProductFullDetail component from venia-concept to a custom package.
2. Run yarn watch.
3. It throws the following error:

ℹ ｢wds｣: Project is running at https://fallback-studio-studio-moderna-cfskx.local.pwadev:8623/
ℹ ｢wds｣: webpack output is served from https://fallback-studio-studio-moderna-cfskx.lo 77% advanced chunk optimization SplitChunksPlugin/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:740
                                                                throw new Error(
                                                                ^

Error: SplitChunksPlugin: You are trying to set a filename for a chunk which is (also) loaded on demand. The runtime can only handle loading of chunks which match the chunkFilename schema. Using a custom filename would fail at runtime. (cache group: vendor)
    at compilation.hooks.optimizeChunksAdvanced.tap.chunks (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/optimize/SplitChunksPlugin.js:740:15)
    at SyncBailHook.eval [as call] (eval at create (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:14:16)
    at SyncBailHook.lazyCompileHook (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/Compilation.js:1236:38)
    at hooks.make.callAsync.err (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/Compiler.js:550:17)
    at _err0 (eval at create (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at _addModuleChain (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/Compilation.js:1093:12)
    at processModuleDependencies.err (/mnt/c/GIT/fallback-studio/src/studio-moderna/napsie/node_modules/webpack/lib/Compilation.js:1005:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Missing documentation for publishing to production environment

Hello pwa-studio developers , I want a simple release production documentation. For example, execute the package.json script.

Unable to update logo image

Not able to update logo image using the fallback theme.

Steps to reproduce:

1. Go to src/components, create a new directory with name Logo
2. Go to venia-concept/src/components/Logo and copy index.js and logo.js files to your Logo directory.
3. Add your custom logo.svg file in your Logo directory
4. execute yarn cache clean
5. execute yarn run clean:example-shop
6. execute yarn run watch:example-shop

Expected result:

Front app should display new logo

Actual Result:

Front app logo is still the same coming from venia-concept

Overwrite component

Hi
Im not clear how to overwrite core component. I checked your example and is it mean if I want to overwrite a component (example: login form), I have to find parent component and copy it to my storefront then in the parent component, I will import my child component instead of call core component. (There is no auto fall back method like magento theme ?)
Correct me if I'm wrong.
Thanks

setup and run fallback-studio as a standard user

I work in a controlled environment on Ubuntu 18.04. I have a standard user account (not a sudo user), my companies security policies would not allow me to have sudo permissions. How am I supposed to watch the environment once built.

when I try to run
yarn run watch:example-shop,

I'm prompted for sudo password for my username. I don't see a reason for a sudo operation to open up a storefront on a particular port. pwa-studio runs (I can watch venia storefront) without me being a sudo user.

Is there a way to bypass the sudo privilege, as it is a tedious process to raise a support ticket to my administrator every time when I try to spin up the project.