Building admin assets on Windows leads to javascript errors

[florianmarical]

Q	A
Bug?	YES
New Feature?	NO
Sulu Version	2.1.0
Browser Version	irrelevant

Actual Behavior

I'm sorry for the inconvenience (and my english). I m beginner to Sulu and react. I have install sulu/skeleton and read the documentation. I did : cd assets\admin npm install npm run watch or npm run build

It's work but when I go on any page who have a content type : text_editor I get the follows errors about ckeditor : `plugincollection-load: It was not possible to load the plugin. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-plugincollection-load

plugincollection.js:254:13 plugincollection-load: It was not possible to load the plugin. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-plugincollection-load Object { plugin: n(e) }

CKEditor5.js:214:20 CKEditorError: plugincollection-plugin-not-loaded: The requested plugin is not loaded. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/…rt/error-codes.html#error-plugincollection-plugin-not-loaded {"plugin":"ContextualBalloon"}

I remove all package-locks.json and all node_modules then again i did executed npm install and npm run watch. I get always the javascript errors. I have reinstall sulu/skelleton for test but the same problem I didn't to do edit in the code.

Expected Behavior

I would like to custom admin UI.

Steps to Reproduce

Get the repo navigate to ./assets/admin directory execute npm install or npm run watch refresh one admin page with the type content : text_editor

Possible Solutions

I don't know

[alexander-schranz]

Did you do a sulu update? Then you need also update the package.json file in your skeleton to match the correct version.

Please try the following command to update your build:

bin/adminconsole sulu:admin:download-build

[florianmarical]

I have only install the last version of sulu/skelleton via composer create-project sulu/skeleton my-project -n and I have execute composer update for update package then execute npm install and npm update

Yesterday i have execute :

bin/adminconsole sulu:admin:download-build

That work, but if I execute: npm run watch, I get the same javascripts errors

node version : 10.15.0 npm version : 6.4.1 Php version: 7.3.5

I can change version if you think that fix the problem.

Have a good day

[alexander-schranz]

I'm currently using node 12.18.1 / npm 6.14.5.

What I'm sure is that when switching node versions or do an update I recommend removing all package-lock and node_modules folder. As how npm works they are also created in the vendor/.. directories. So before rebuild I mostly run the following commands in my project root directory to make sure all are dir and files are removed:

rm -rf ./**/package-lock.json
rm -rf ./**/node_modules

# and then go rebuild the admin
cd assets/admin
npm install
npm run build

[florianmarical]

i have change my node version with nvm node : npm: 12.18.1 node: 6.14.5

I have deleted all package-lock.json files and node_modules folders. after run the command : npm run watch or npm run install

the same javascripts errors

I use windows 10 on my local machin. can this be a problem?

I join a capture and my homepage.xml code

`<?xml version="1.0" ?> <template xmlns="http://schemas.sulu.io/template/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/template-1.0.xsd">

<key>homepage</key>

<view>pages/homepage</view>
<controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller>
<cacheLifetime>86400</cacheLifetime>

<meta>
    <title lang="en">Homepage</title>
    <title lang="de">Startseite</title>
</meta>

<properties>
    <property name="title" type="text_line" mandatory="true">
        <meta>
            <title lang="en">Title</title>
            <title lang="fr">Titre</title>
        </meta>
        <params>
            <param name="headline" value="true"/>
        </params>
        <tag name="sulu.rlp.part"/>
    </property>

    <property name="url" type="resource_locator" mandatory="true">
        <meta>
            <title lang="en">URL</title>
            <title lang="fr">URL</title>
        </meta>
        <tag name="sulu.rlp"/>
    </property>

    <property name="introduction" type="text_editor">
        <meta>
            <title lang="en">Introduction</title>
            <title lang="fr">Introduction</title>
        </meta>
    </property>
</properties>

`

i am so sorry inconvenience you. I don't understand the problem (who must to be me :) )

[viliask]

It seems like I have the same problem with npm run build. I also tried to copy public/build from my Ubuntu VM to Windows but with the same result. Checked on sulu/skeleton. Npm ls output: https://justpaste.it/2b4mr.

sulu: 2.1.1 npm: 6.14.7 node: 12.18.3

[viliask]

I found a temporary solution to this issue. The problem seems to be platform dependent. From @alexander-schranz and @danrot, I found out that this process runs smoothly on MacOs and ArchLinux. So I decided to set up a virtual machine based on the ArchLinux distribution. I chose the first better distribution - Manjaro.

Steps to setup:

1. Download an Arch based distribution f.e. Manjaro. https://manjaro.org/download/

2. Install Manjaro on VM

3. Install packages on Manjaro using "sudo pacman -S package-name" command. Packages to install:

   • composer
   • npm
   • nodejs
   • php-gd
   • libnghttp2

4. Set in /etc/php/php.ini:

   • extension = gd
   • memory_limit = -1

5. Install and configure your project: sudo composer install sudo npm i cd assets/admin sudo npm i sudo npm run build

6. Copy public/build dir to your project on Windows/Ubuntu

[florianmarical]

Hello @viliask

thank you for the temporaly solution. I will try that speedy

[danrot]

@viliask I have a really hard time believing that this should not work on Ubuntu... My guess would be that another setting causes something like this, which is not dependant on the distribution you use. Have you tried making a fresh Ubuntu installation in a VM and see if the error occurs there as well?

[niklasnatter]

74 will update the @ckeditor packages. I cannot test this myself, but I am hopeful that this might fix the build on windows machines 🙂

[alexander-schranz]

The windows build problems should be fixed with https://github.com/sulu/sulu/pull/5863 ontop of https://github.com/sulu/sulu/pull/5859

[niklasnatter]

Fixed by https://github.com/sulu/sulu/pull/5859 and https://github.com/sulu/skeleton/pull/96 🎉

Keep in mind to remove all node_modules folders and package-lock.json files in your project if you want to create the build directly via npm. We recommend to use the bin/console sulu:admin:update-build command that automates this process for you 🙂

If the build does not work on your system, you can use the official node docker image to rule out any system-specific problems. The node container cannot execute PHP code and therefore cannot execute the sulu:admin:update-build command. But you can execute the commands that would be executed by the UpdateBuildCommand ::doManualBuild method manually like this:

1. Start a node container with the desired version and map the the current directory into the /var/project folder in the container

docker run --rm --interactive --tty --volume ${PWD}:/var/project node:14.16.0 /bin/bash

# for completion: using another node version is possible by adjusting the tag of the node image
# docker run --rm --interactive --tty --volume ${PWD}:/var/project node:10.24.0 /bin/bash
# docker run --rm --interactive --tty --volume ${PWD}:/var/project node:12.21.0 /bin/bash

2. Cleanup previously created node_modules folders and package-lock.json files

cd /var/project
rm -rf assets/admin/node_modules && rm -rf vendor/sulu/sulu/node_modules && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/node_modules
rm -rf assets/admin/package-lock.json && rm -rf vendor/sulu/sulu/package-lock.json && rm -rf vendor/sulu/sulu/src/Sulu/Bundle/*/Resources/js/package-lock.json

3. Create the administration interface build

cd /var/project/assets/admin
npm install
npm run build

[florianmarical]

awesome, thank you !