search

Jordaneisenburger / fallback-studio

Magento 2 PWA fallback wrapper to easily create a custom theme on top of PWA Studio
MIT License
113 stars 28 forks source link

Error when copying ProductFullDetail component to own package #1

Closed markoambrozic closed 5 years ago

markoambrozic commented 5 years ago

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.
markoambrozic commented 5 years ago

This was run on a slightly modified project but it should happen on the original also. I've managed to track down the problem to the 'informed' package: import { Form } from 'informed'; - if this is removed and also the Form wrapper in the render function, the project will build but the page will have other issues.

Jordaneisenburger commented 5 years ago

Thanks for reporting the problem! I will look into the issue and check if i can reproduce.

markoambrozic commented 5 years ago

One more piece of information... I've been able work around this problem by removing the informed package from webpack config split chunks optimization list. This then causes the following error:

Uncaught TypeError: Cannot read property 'controller' of undefined
    at eval (index.js?e051:formatted:295)
    at updateContextConsumer (react-dom.development.js?61bb:15278)
    at beginWork (react-dom.development.js?61bb:15466)
    at performUnitOfWork (react-dom.development.js?61bb:19106)
    at workLoop (react-dom.development.js?61bb:19146)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at replayUnitOfWork (react-dom.development.js?61bb:18372)
    at renderRoot (react-dom.development.js?61bb:19262)
(anonymous) @ index.js?e051:formatted:295
updateContextConsumer @ react-dom.development.js?61bb:15278
beginWork @ react-dom.development.js?61bb:15466
performUnitOfWork @ react-dom.development.js?61bb:19106
workLoop @ react-dom.development.js?61bb:19146
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
replayUnitOfWork @ react-dom.development.js?61bb:18372
renderRoot @ react-dom.development.js?61bb:19262
performWorkOnRoot @ react-dom.development.js?61bb:20136
performWork @ react-dom.development.js?61bb:20048
performSyncWork @ react-dom.development.js?61bb:20022
requestWork @ react-dom.development.js?61bb:19891
scheduleWork @ react-dom.development.js?61bb:19705
enqueueSetState @ react-dom.development.js?61bb:11141
Component.setState @ react.development.js?cb92:335
setRouteComponent @ MagentoRouteHandler.js?8b9b:213
_callee2$ @ MagentoRouteHandler.js?8b9b:171
tryCatch @ runtime.js?36d8:62
invoke @ runtime.js?36d8:288
prototype.(anonymous function) @ runtime.js?36d8:114
asyncGeneratorStep @ asyncToGenerator.js?ae7e:3
_next @ asyncToGenerator.js?ae7e:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?ae7e:13
_next @ asyncToGenerator.js?ae7e:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?ae7e:13
_next @ asyncToGenerator.js?ae7e:25
(anonymous) @ asyncToGenerator.js?ae7e:32
(anonymous) @ asyncToGenerator.js?ae7e:21
getRouteComponent @ MagentoRouteHandler.js?8b9b:195
componentDidMount @ MagentoRouteHandler.js?8b9b:104
commitLifeCycles @ react-dom.development.js?61bb:17128
commitAllLifeCycles @ react-dom.development.js?61bb:18530
callCallback @ react-dom.development.js?61bb:149
invokeGuardedCallbackDev @ react-dom.development.js?61bb:199
invokeGuardedCallback @ react-dom.development.js?61bb:256
commitRoot @ react-dom.development.js?61bb:18742
(anonymous) @ react-dom.development.js?61bb:20212
unstable_runWithPriority @ scheduler.development.js?3069:255
completeRoot @ react-dom.development.js?61bb:20211
performWorkOnRoot @ react-dom.development.js?61bb:20140
performWork @ react-dom.development.js?61bb:20048
performSyncWork @ react-dom.development.js?61bb:20022
requestWork @ react-dom.development.js?61bb:19891
scheduleWork @ react-dom.development.js?61bb:19705
scheduleRootUpdate @ react-dom.development.js?61bb:20366
updateContainerAtExpirationTime @ react-dom.development.js?61bb:20394
updateContainer @ react-dom.development.js?61bb:20451
ReactRoot.render @ react-dom.development.js?61bb:20747
(anonymous) @ react-dom.development.js?61bb:20884
unbatchedUpdates @ react-dom.development.js?61bb:20253
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:20880
render @ react-dom.development.js?61bb:20949
(anonymous) @ index.js?b635:37
./src/index.js @ client.js:8964
__webpack_require__ @ client.js:789
fn @ client.js:150
0 @ client.js:8977
__webpack_require__ @ client.js:789
checkDeferredModules @ client.js:46
(anonymous) @ client.js:930
(anonymous) @ client.js:933
react-dom.development.js?61bb:16911 The above error occurred in the <Context.Consumer> component:
    in ForwardRef
    in Select (created by Classify(Select))
    in Classify(Select)
    in div
    in Quantity (created by Classify(Quantity))
    in Classify(Quantity) (created by ProductFullDetail)
    in section (created by ProductFullDetail)
    in ErrorBoundary (created by ProductFullDetail)
    in form (created by Form)
    in Form (created by ProductFullDetail)
    in ProductFullDetail (created by Classify(ProductFullDetail))
    in Classify(ProductFullDetail)
    in Query
    in Product
    in Connect(Product)
    in MagentoRouteHandler
    in Page
    in Route
    in Switch
    in div
    in main
    in Main (created by Classify(Main))
    in Classify(Main)
    in App
    in Connect(App)
    in Route
    in Router
    in BrowserRouter
    in MagentoRouter
    in Provider
    in ApolloProvider
    in VeniaAdapter

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

By adding an ErrorBoundary around the Quantity field we are now able to develop everything else.

Jordaneisenburger commented 5 years ago

So i've tried to reproduce the problem but i've just updated Fallback Studio to be compatible with PWA studio v2.1.0 and i'm not able to reproduce the issue now. As you can see below i copied the suggested file and the needed layz loaded component. You might wanna upgrade to the newest Fallback Studio. This also support graphql schema checking.

Screenshot 2019-04-02 at 22 23 24

Huaoe commented 5 years ago

Hi, I've realized yesterday that the TypeError: Cannot read property 'controller' of undefined is sometimes due to a component (select BTW) not included in a<form> tag cheers

Jordaneisenburger commented 5 years ago

Sounds like this isn't a fallback issue but more an issue from PWA Studio itself or a self created issue. Can you conform this ?