Asset precompilation fails after pageflow-scrolled installation

[rbrenner-snoop]

Hello pageflow team,

i am in the midst of migrating our pageflow application to a new VM with updated Node version to run pageflow-scrolled.

I still run in some issues with active admin but for now my main problem persists with the installation of pageflow-scrolled.

After installing the page type according to https://github.com/codevise/pageflow/tree/master/entry_types/scrolled
i wanted to precompile the assets and the compilation step fails. Since the stack trace is quite long i upload a text file with it:
pageflow_scrolled_asset_precompilation_error.txt

My Setup is:
Rails 5.2.8.1
Ruby 2.5.9
webpacker 4.3.0

i add my Gemfile.lock as well as my package.json as a zip here:
pageflow_gemfile_package.zip

Is there anything i am missing? I would appreciate your help. If any other Information is needed im more than happy to provide it.

Thanks in advance and best regards

[tf]

Hi,

the error says that it cannot find the classnames package. Can you check whether pageflow_daad/node_modules/classnames exists? Can you share your yarn.lock file?

All the best
Tim

[rbrenner-snoop]

Hi Tim,

i have separately added classnames via yarn add classnames since it was not mentioned in the yarn.lock file.
This resulted in a bunch of other issues. Here is my yarn.lock file and my new error messages after separately adding classnames
yarn.lock.zip
comilation_error.txt

Besides having the errors, the warnings are interesting as well. Especially the "incorrect peer dependency" of react from pageflow-scrolled. These dependencies should be met by my yarn.lock file.

I am suspicious since i would expect suche dependencies to be installed by the modules already installed.
It seems as there is a major problem with my assets. My old stories which i migrated from the old system are showing and i can edit them. But in my active admin im missing some dropdown values as well as not seeing pageflow-scrolled at all.
There i get an error in my browser console which im am trying to solve in parallel.

Uncaught ReferenceError: $ is not defined
    at base.js:18:3
    at Object.<anonymous> (base.js:14:66)
    at i (bootstrap:19:22)
    at Module.<anonymous> (active_admin.js:1:1)
    at i (bootstrap:19:22)
    at bootstrap:83:10
    at active_admin-d8e2e3d1ee0e9be08c9d.js:2:921

Also i just found out, that the admin interface should probably have a pageflow look and feel to it which it does not have in my installation.

So there is something wrong big time 😅

Thanks and best regards
Ronald

[tf]

Hi,

this looks like a combination of different issues.

1. classnames really appears to be missing as a Pageflow dependency. This went unnoticed so far since there were always other packages that dependended on it. Comparing your yarn.lock to the one in Pageflow's root, it looks like newer versions of those packages no longer require classnames. This is something we should fix, but installing it manually, as you did, should be enough to fix the issue.

2. The compilation error in the linked file, points to ?? being a syntax error. It is not in Node 18 (the Node version currently recommended for Pageflow). So you might be using an older version?

3. Finally the ActiveAdmin problems are caused by a conflict with Pagedlow when ActiveAdmin is run in Webpacker/Skakapacker mode. For historical reasons, we only use ActiveAdmin's Sprockets mode, so we did not run into this so far. Pageflow declares modules like jquery as external to provide interop with the Sprockets world for Pageflow Classic. Since ActiveAdmin tries to import those modules as well in a context where the corresponding globals are not defined, the error occurs. If possible, the quick fix would be to run ActiveAdmin in Sprockets mode. The more correct fix would be to think about another mechanism for Pageflow to depend on these legacy globals.

Hope this helps to get you started.

Tim

[rbrenner-snoop]

Hello Tim,

thanks for your elaborate response!

1. Great. This is settled then.
2. My installed Node version is v20.12.1. This was the whole point of switching the virtual machine since our old VM had a really old Node version installed.
3. I am confused. I thought that i had to run via webpacker since webpacker is required by the new pagetype pageflow-scrolled? Or do i have to separately build assets with Sprockets for ActiveAdmin and the classic Pageflow pagetypes and webpack for pageflow-scrolled?

Thanks and best regards
Ronald

[tf]

2. Hm, with Node 20 it should be fine. Looking at the compilation error, it appears to be caused by the ?? operator in @tanstack/virtual-core. I updated @headlessui/react (which introduces the dependency to that package) in our setup, but could not reproduce the problem. I'd advise to double check the Node version. Not sure which other part of the tool chain might not like that syntax. If nothing works, you could consider downgrading @headlessui/react to 1.6 which did not yet depend on @tanstack/virtual-core.
3. Pageflow Classic needs Sprockets, Pageflow Next needs Webpacker/Shakapacker. ActiveAdmin can work with both Sprockets and Webpacker. The way Pageflow Scrolled currently uses Webpacker breaks Active Admin with Webpacker. Since ActiveAdmin uses Sprockets by default and already migrated away from Webpacker in recent beta versions, I'd consider sticking with Sprockets here if there is no special reason to use Webpacker with ActiveAdmin.

[rbrenner-snoop]

i switched the ActiveAdmin configuration back to not using webpacker. This solved the errors that occurred in the ActiveAdmin interface.

Additionally i downgraded @headlessui/react to 1.6 as you said. Now the build process finishes and i can add the pageflow scrolled type to an account and create a page with this pagetype. But as soon as i open the Editor i get these errors in the browser console:

editor.js:646 Uncaught TypeError: Cannot read properties of undefined (reading 'widgetTypes')
    at 770 (editor.js:646:10)
    at a (bootstrap:84:22)
    at t (bootstrap:45:15)
    at Array.r [as push] (bootstrap:32:11)
    at pageflow-scrolled-editor-33614b55c77f557fdc55.chunk.js:1:43

test-next:80 Uncaught TypeError: pageflow.startEditor is not a function
    at test-next:80:12

i think i misconfigured something here but have no idea where to look.
Could you give me a hint?
Or is this a problem due to the downgrade?

Here is my config/initializers/pageflow.rb:
pageflow.rb.zip

Thanks and best regards
Ronald

[rbrenner-snoop]

Could it be, that the pageflow-scrolled install documentation misses the //= require statements within the app/assets/javascripts/pageflow/editor.js and app/assets/javascripts/pageflow/application.js? Every other Page-Type includes these. Maybe im completely false here. And i know that pageflow-scrolled is an entry-type and not a page-type. But thats my only idea right now.

[tf]

Pageflow Scrolled does not load app/assets/javascripts/pageflow/editor.js. Its editor code is loaded from the Webpacker pack app/javascript/packs/pageflow-scrolled-editor.js.

Not clear to me why this should be undefined. Is this really the first error that happens?

Could you maybe zip the compiled JS files that are loaded from the packs/js directory when opening the editor? This should include pageflow-scrolled-editor-33614b55c77f557fdc55.chunk.js. Not sure this gets us further. But it lets me at least check whether things look similar in your system and ours.

[rbrenner-snoop]

Hello Tim,

here are the loaded javascript files when i open the Editor for the Scrolled Entry:
loaded_js.zip

These two errors are the first and only errors that happen. I looked into the production.log where everything is fine.

Thanks so far for your excellent help!

Best regards
Ronald

[tf]

Thanks. Could you also share your config/webpacker.yml and config/webpack/environment.js?

[rbrenner-snoop]

of course! There is a console.log in my environment since i had the problems with ActiveAdmin.

webpacker_environment.zip

[tf]

The error means that some code is calling something like:

import {editor} from 'pageflow/editor';
editor.widgetTypes.register(...)
// ^ Cannot read properties of undefined (reading 'widgetTypes')

Looking at your bundle, I see that pageflow/editor is in fact an empty module. I suspect this is caused by a misconfiguration in your webpacker.yml:

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets', 'app/assets/javascripts', 'app/assets/stylesheets', 'app/javascript/pageflow-scrolled/themes/']

This basically tells Webpack to also look into these paths when resolving modules. app/assets/javascripts/pageflow/editor does exist and does not have any exports (because it is a Sprockets file that has nothing to do with Pageflow Scrolled). So it looks like Webpack might give preference to that file over node_modules/pageflow/editor.

Pageflow Scrolled does not require any resolved_paths. We do not want to mix the Sprockets and Webpack worlds in any way here. Try commenting out the resolved_paths option and rebuild your bundle.

[rbrenner-snoop]

This changed something 😄

Now i get a browser alert saying "Error while starting editor."
And my browser console shows Failed to load resource: the server responded with a status of 500 ()

The production.log shows the following error:

F, [2024-04-26T08:08:41.383325 #1017252] FATAL -- : [9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]
F, [2024-04-26T08:08:41.383374 #1017252] FATAL -- : [9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38] ActionView::Template::Error (The asset "pageflow/themes/pageflow/preview.png" is not present in the asset pipeline.
):
F, [2024-04-26T08:08:41.383450 #1017252] FATAL -- : [9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     1: json.(theme, :name, :options)
[9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     2:
[9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     3: json.preview_image_url(image_url(theme.preview_image_path))
[9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     4: json.preview_thumbnail_url(image_url(theme.preview_thumbnail_path))
[9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     5: json.stylesheet_path(stylesheet_path(theme.stylesheet_path))
[9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]     6:
F, [2024-04-26T08:08:41.383476 #1017252] FATAL -- : [9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38]
F, [2024-04-26T08:08:41.383523 #1017252] FATAL -- : [9cdb83b8-fdf7-4941-aba6-b2a5eaa02b38] sprockets-rails (3.4.2) lib/sprockets/rails/helper.rb:84:in `compute_asset_path'

I directly added the themes i had for the regular pageflow entry type to pageflow scrolled as it is described here:
https://github.com/codevise/pageflow/blob/master/entry_types/scrolled/doc/creating_themes.md

Do i have to put these in the resolved paths?

[tf]

Let's first see whether you cam get Pageflow Scrolled to work with its default configuration and without extra themes.

The mentioned error is caused by a left-over dependency of Pageflow Scrolled themes on some Sprockets assets. This is a know issue that so far was only documented internally. I now created #2099 to track this here as well.

[rbrenner-snoop]

So how should i handle this now? Remove the themes for pageflow-scrolled and recompile the assets? I am currently trying to create a Page with the default theme so this should not be a problem or is it?

[tf]

The editor loads a list of available themes no matter which theme the current entry uses. This is necessary to make the theme selection dialog in the editor work. Since your custom theme runs into #2099, the editor cannot start. Either create the missing Sprockets assets to work around #2099 for your custom theme or comment out the register call for your custom theme in ScrolledThemesPlugin. I'd advice to do the latter first, so we do not mix up Pageflow Scrolled installation problems with custom theme problems.

[rbrenner-snoop]

We are up to the next error 😅

F, [2024-04-26T10:35:14.283788 #1023048] FATAL -- : [7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]
F, [2024-04-26T10:35:14.283883 #1023048] FATAL -- : [7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97] ActionView::Template::Error (No file type found for collection name 'pageflow_panorama_packages'.):
F, [2024-04-26T10:35:14.284002 #1023048] FATAL -- : [7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     17:   "page_types": <%= page_type_json_seeds(@entry_config) %>,
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     18:   "themes": <%= theme_json_seeds(@entry_config) %>,
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     19:
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     20:   "common": <%= render_json { |json| common_entry_seed(json, @entry) }.html_safe %>,
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     21:
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     22:   "asset_urls": <%= editor_asset_urls %>
[7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]     23: }
F, [2024-04-26T10:35:14.284055 #1023048] FATAL -- : [7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97]
F, [2024-04-26T10:35:14.284180 #1023048] FATAL -- : [7ecabcf2-9a0e-44aa-82fc-9c80cbfdfc97] pageflow (16.0.0) lib/pageflow/file_types.rb:26:in `find_by_collection_name!'

This seems to be caused by the page types i have already installed for pageflow-paged.

Here is how i installed them:

  # Plugins that provide page types and widget types.
  config.plugin(Pageflow.built_in_page_types_plugin)
  config.plugin(Pageflow.built_in_widget_types_plugin)
  # config.plugin(Pageflow::Rainbow.plugin)

  config.plugin(Pageflow::Chart.plugin)
  config.plugin(Pageflow::EmbeddedVideo.plugin)
  config.plugin(Pageflow::InternalLinks.plugin)
  config.plugin(Pageflow::ExternalLinks.plugin)
  config.plugin(Pageflow::LinkmapPage.plugin)
  config.plugin(Pageflow::TimelinePage.plugin)
  config.plugin(Pageflow::ParentPageBox.plugin)

  config.page_types.register(Pageflow::BeforeAfter.page_type)
  config.page_types.register(Pageflow::Panorama.page_type)
  config.page_types.register(Pageflow::TextPage.page_type)

This should is how it is explained within the documentation i think and exactly the way it was on the old system.
Do i have to move these into the entry_type_conig within the block

config.for_entry_type(PageflowPaged.entry_type) do |entry_type_config|
end

?

[tf]

Yes. Same for any widgets that are specific to Paged.

[rbrenner-snoop]

This looks very good already!

I am now able to start the editor and add sections and elements.

But it seems that i can not interact with the elements like writing text within the "heading" or "textblock" element.
This could be caused by this error in the browser console:

Uncaught ReferenceError: jQuery is not defined
    at 8 (external "jQuery":1:18)
    at a (bootstrap:84:22)
    at 397 (vendors~pageflow-scrolled-editor~pageflow-scrolled-frontend~pageflow-scrolled-server-9085e70d423b630ce2ca.chunk.js:1:121175)
    at a (bootstrap:84:22)
    at 195 (contentElements-frontend.js:1:1)
    at a (bootstrap:84:22)
    at 538 (pageflow-scrolled-frontend.js:1:11)
    at a (bootstrap:84:22)
    at t (bootstrap:45:15)
    at Array.r [as push] (bootstrap:32:11)

This could also be caused by this label within the elements themselves:
Element of unknown type "heading"

And if i start the preview there is a server error. In the production.log i find this:

F, [2024-04-26T11:04:42.794932 #1024066] FATAL -- : [907ce2ee-a2ed-414a-a724-51f1c4d7f443] ActionView::Template::Error (ReferenceError: jQuery is not defined):
F, [2024-04-26T11:04:42.795036 #1024066] FATAL -- : [907ce2ee-a2ed-414a-a724-51f1c4d7f443]     32:       </script>
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     33:     <% end %>
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     34:
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     35:     <% ssr_html = @skip_ssr ? '' : render_scrolled_entry(@entry) %>
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     36:
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     37:     <% if !@skip_ssr && (params[:frontend] == 'v2' || @entry.feature_state('frontend_v2')) %>
[907ce2ee-a2ed-414a-a724-51f1c4d7f443]     38:       <%= generated_media_queries_tags_for(ssr_html) %>
F, [2024-04-26T11:04:42.795080 #1024066] FATAL -- : [907ce2ee-a2ed-414a-a724-51f1c4d7f443]
F, [2024-04-26T11:04:42.795099 #1024066] FATAL -- : [907ce2ee-a2ed-414a-a724-51f1c4d7f443] (execjs):45:43

Furthermore the translations seem to be missing.

[tf]

Is the jquery plugin still in your webpack/environment.js? What does it do? Might it be the cause?

[rbrenner-snoop]

Great! Now the editor as well as the Preview seems to work smoothly. Just the translation while image upload are missing, but this is something which is mentioned in the troubleshooting i think.

Do i understand it right, that adding new themes does not work properly for Pageflow Next at the moment?

I still got another Problem with the new installation regarding the selections within ActiveAdmin but thats another Issue for which i would open another Issue if i dont find the solution myself.

Thanks a lot Tim! Great experience every time!

Best regards
Ronald

[rbrenner-snoop]

ok, the steps mentioned in the troubleshooting section do not help for my current translation problem within the Pageflow Next editor. Is there something else im missing?

[tf]

Happy to hear it's working! Adding new themes absolutely works. You only need to add the asset pipeline files mentioned in #2099. Ideally those should either also come from Webpacker or not be needed at all. But for now they are required.

[tf]

Are these the only missing translations in the editor?

[tf]

Ah yes, here Pageflow Scrolled unintentionally relies on translations provided by pageflow-vr. We never noticed since we have that plugin installed in all systems. You should be able to copy those translations to some config/locales/vr.de.yml file to make it work. I created #2100 for future reference.

[rbrenner-snoop]

Thanks! The translations do work now after i created the translation files.

I'll close the issue then now. I'll have to try to add the other themes but you already hinted me on how.

I think my ActiveAdmin Problem is also Pageflow related but i'll open a separate Issue for that.

Thanks a lot and best regards
Ronald