text:
RecordRTC and best way and how to save on server

Hi Mauz
Have been playing with your experiments - they are great and very interesting.  Please excuse me but I am not a java script person at all - my limitation is a small (very) bit of jQuery - php etc. I have no problem with so if you have already answered this question I apologise.
So I run the RecordRTC "file/s" on my server I can record video and I can stop, I can then view that video (in terms of your demo page), but how do I/can I send/save the file which I assume is a temp file(?) to the server.
The demo page shows this:
/* stop recording video and save recorded file to disk */
recorder.stopVideo(function(recordedFileURL) {
window.open(recordedFileURL);
});
but is that actually saving the file because my basic understanding is that just opens another window.
Lets say I run the demo on page "record.php" and I have a folder "recordings" how do I get the file into recordings and save it?
Cheers

where is the file save before uploading the server?
Thanks

I am using this in Spring MVC application and not able to obtain blob from post request.
How to do it it Servlets / Spring MVC way.

Whenever i click on start recording, it says RecordRTC is not defined. How can i solve this error? do i have to define it somewhere?

Hi Muaz A/s,
Thanks a lot to provide great solutions for developers, can we implement this in django/python?

Hi Muaz,
it's not working on iphone, is it not compatible with ios or I'm missing something?
Thanks!

IOS doesnt support webrtc without it being within an app.  No browser
support.
On Mar 6, 2018 2:32 AM, "umairm638" notifications@github.com wrote:

Hi Muaz,
it's not working on iphone, is it not compatible with ios or I'm missing
something?
Thanks!
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/muaz-khan/WebRTC-Experiment/issues/48#issuecomment-370719570,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABBTlkSEMTolvNQ6ZfufadR1dBCFlgFxks5tblfDgaJpZM4Au2xH
.

Hi Mauz,
Is there any reference to upload recording using JAVA spring MVC.
Thanks,
Amit

Hi Amit,
 First you have to send blob to your controller and create a file like

mp4, then you can do whatever you want, you can send blob with ajax
I have done this with django (python) but doesn't matter, see only
javascript:
function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true
}).then(function(camera) {
callback(camera);
}).catch(function(error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}
function stopRecordingCallback() {
//video.play();
recorder.camera.stop();
//recorder.destroy();
//recorder = null;
}
var recorder; // globally accessible
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
captureCamera(function(camera) {
setSrcObject(camera, video);
video.play();
recorder = RecordRTC(camera, {
type: 'video',
});
recorder.startRecording();
// release camera on stopRecording
recorder.camera = camera;
document.getElementById('btn-stop-recording').disabled = false;
});
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(stopRecordingCallback);
document.getElementById('btn-play-recording').disabled = false;
document.getElementById('btn-upload').disabled = false;
};
$("#btn-upload").on("click", function(){
this.disabled = true;
document.getElementById('btn-play-recording').disabled = true;
if(!recorder || !recorder.getBlob()) return;
var blob = recorder.getBlob();
uploadBlob(blob);
})
//ajax calling
function uploadBlob(blob) {
var formData = new FormData();
formData.append('video-blob', blob);
formData.append('video-filename', 'demo.mp4');
$.ajax({
url: "{{SITE_URL}}/upload-video/",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#select_recordtype').modal('toggle');
$('#hiddenUrl').val(response.toString());
$('.recorder_box').hide();
var video = $('', {
id: 'video',
src: response,
type: 'video/mp4',
controls: true
});
video.appendTo($('.selected_video'));
$('.selected_video').show();
//alert('Successfully uploaded.');
//$("#record_now").hide().css('display','none');
//$("#pre-video").show().css('display','block');
},
error: function(jqXHR, textStatus, errorMessage) {
alert('Error:' + JSON.stringify(errorMessage));
}
});
}
and in controller only you have to create file:
#file creater
@csrf_exempt
def create_file(request):
if request.method == 'POST':
    filename = request.POST.get('video-filename', '')
    file = request.FILES.get('video-blob', '')
    if file:
            if not os.path.exists('static/video-msg/'):
                    os.mkdir('static/video-msg/')

            with open('static/video-msg/' + filename, 'wb+') as

destination:
for chunk in file.chunks():
destination.write(chunk)
return HttpResponse('Created!')
else:
return HttpResponse("Blob getting Error")
else:
    return HttpResponse("No Request given")

Best Regards,
Kashif AnwarSoftware Engineer
Mobile: +919718577858
On Thu, May 3, 2018 at 3:36 PM, amitrathi1982 notifications@github.com
wrote:

Hi Mauz,
Is there any reference to upload recording using JAVA spring MVC.
Thanks,
Amit
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/muaz-khan/WebRTC-Experiment/issues/48#issuecomment-386247686,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWnstDQ5258jFK2Bfp2rHsq9NV50cXF0ks5tutbCgaJpZM4Au2xH
.

Dear Kashif,
Thanks a lot for your response. It is working now.
Now I am getting one popup when starting recording: Please enable this command line flag: "--enable-usermedia-screen-capturing"
Can you please help me how can I resolve it? Is there anything which can be downloaded automatically if required as page loads or handle programmatically.
Thanks a lot once more for your kind support.

Have you include RecordRTC.js?
Since var recorder is using this js, if so then error shouldn't happen, if
you are getting some other please see something else going wrong, check you
camera permission.
On Fri 4 May, 2018, 3:13 PM amitrathi1982, notifications@github.com wrote:

Dear Kashif,
Thanks a lot for your response. It is working now.
Now I am getting one popup when starting recording: Please enable this
command line flag: "--enable-usermedia-screen-capturing"
Can you please help me how can I resolve it? Is there anything which can
be downloaded automatically if required as page loads or handle
programmatically.
Thanks a lot once more for your kind support.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/muaz-khan/WebRTC-Experiment/issues/48#issuecomment-386552316,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWnstM6F8kffcmj3JbpQ2Qryfi9rAsHOks5tvCKvgaJpZM4Au2xH
.

Hi Kashif,
Thanks for the response. Actually my requirement is to capture a particular window (say mozila/chrome or where this application is running) only with audio. It will also be good if I can capture only that Tab of browser window (If it can happen).
So I did below steps:

I am using "https://www.webrtc-experiment.com/RecordRTC/" demo and chosen "Microphone+Screen".
I have downloaded this HTML at my local and downloaded all the ".JS" (including RecordRTC.js and other dependent JS) to my local from CDN URL.
I ran this sample from localhost, On mozila it is working fine. But in chrome it is showing that popup. "Please enable this command line flag: "--enable-usermedia-screen-capturing" and showing "onMediaCapturingFailed: {name: "NotAllowedError", message: "Invalid state", constraint: undefined, toString: ƒ}" in browser console.  Although in demo it is workiing fine (https://www.webrtc-experiment.com/RecordRTC/).
So my stuck point is should I enable/add some security bypass code or something else.
Please help me here.

Another point is:
When I am doing it on mozila it show one popup to choose which window I want to record/share.
Is there any setting/option where I can set default window to select automatically the window where application is running (current window).
Point 3:
After stopping recording when I play this recording in new tab, it shows one URL: "http://localhost:8080/0eb129a1-1fd6-44a0-b78a-1071689ef5f5".  My expectation here is, can we upload this video on server (As stream) directly even before stoping.
Thanks a lot Kasif once again.

@amitrathi1982 To fix screen capturing issues on localhost or on any https domain:

Download this chrome plugin source code, modify manifest.json for matches attribute only to set your own domain's permissions. Now open chrome://extensions/ and click "Load unpacked extension" button to locate the extension directory.
Otherwise use getScreenId.js. Which requires this plugin installation. However please make sure to run getScreenId only on localhost or on a real HTTPs domain. Don't run getScreenId on jsfiddle or inside-iframes. Iframes are not supported.

Here is a simple demo explains how to use getScreenId with RecordRTC.
Regarding "upload in realtime": the best solution is use a media-server where you will open RTCPeerConnection connections with the server.
RecordRTC accepts timeSlice and ondataavailable options that allows you get blobs instantly and upload to server after fixed intervals. Here is a simple demo. However your server must merge all files into a single file after recording finishes.  Here is a similar demo using ffmpeg on server-side using nodejs. You can check a socketio demo as well.

Dear Mauz,
Thanks for clarification.
I am using below code to get screenId:
getScreenId(function (error, sourceId, screen_constraints) {
// error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
// sourceId == null || 'string' || 'firefox'
if(navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob)) {
    navigator.getDisplayMedia(screen_constraints).then(stream => {
        document.querySelector('video').srcObject = stream;
    }, error => {
        alert('Please make sure to use Edge 17 or higher.');
    });
    return;
}

navigator.mediaDevices.getUserMedia(screen_constraints).then(function (stream) {
    document.querySelector('video').srcObject = stream;

    // share this "MediaStream" object using RTCPeerConnection API
}).catch(function (error) {
    console.error(error);
});

}, 'pass second argument only if you want to capture speakers as well');

It is capturing screen successfully but audio (Microphone) is not being captured.
I read above that to capture, we need to pass 2nd paramater (pass second argument only if you want to capture speakers as well). So which type of this parameter will be . Is that booelan "true" or else. I passed "true" but audio not captured.
Full function where I merged above code is given here:  I know you might be busy in some important task, but please get few moment and take a look:
function captureAudioPlusScreen(config) {
// Firefox screen capturing addon is open-sourced here: https://github.com/muaz-khan/Firefox-Extensions
// Google Chrome screen capturing extension is open-sourced here: https://github.com/muaz-khan/Chrome-Extensions/tree/master/desktopCapture
console.log("captureAudioPlusScreen function called..");
if(DetectRTC.browser.name === 'Firefox' || isLocalHost()) {
**getScreenId(function (error, sourceId, screen_constraints) {
// error    == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
// sourceId == null || 'string' || 'firefox'
	                    console.log("sourceId-->"+sourceId + " : "+screen_constraints);

	                    if(sourceId && sourceId != 'firefox') {
	                        screen_constraints = {
	                            video: {
	                                mandatory: {
	                                    chromeMediaSource: 'screen',
	                                    maxWidth: 1920,
	                                    maxHeight: 1080,
	                                    minAspectRatio: 1.77
	                                }
	                            }
	                        };

	                        if (error === 'permission-denied')
	                        	return alert('Permission is denied.');
	                        if (error === 'not-chrome')
	                        	return alert('Please use chrome.');

	                        if (!error && sourceId) {
	                            screen_constraints.video.mandatory.chromeMediaSource = 'desktop';
	                            screen_constraints.video.mandatory.chromeMediaSourceId = sourceId;
	                        }
	                    }

	                    navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
	                    navigator.getUserMedia(screen_constraints, function (stream) {
	                    	console.log(" document.querySelector('video').src--"+ document.querySelector('video').src);

	                    	  config.onMediaCaptured(stream);

	                            addStreamStopListener(stream, function() {
	                                config.onMediaStopped();
	                            });
	                      //  document.querySelector('video').src = stream;

	                        // share this "MediaStream" object using RTCPeerConnection API
	                    }, function (error) {
	                      console.error('getScreenId error', error);
	                      alert('Failed to capture your screen. Please check Chrome console logs for further information.');
	                    });
	                },'pass second argument only if you want to capture speakers as well');
            }**

            window.postMessage('get-sourceId', '*');
        }

Hello Mauz,
Thanks for your help. Now I am able to save audio and video using getScreenId.js.
I am using timeSlice option and set 20 seconds to upload data to server in chunks.
Code:
options.ondataavailable = function(blob) {
button.blobs.push(blob);
uploadBlob(blob, new Date().getTime());
};
In this case only first is opening in VLC player and subsequent files are not opening. Even  first file size is around is 800KB and after that around  600 KB.
Can you please guide here what I am missing.
To send file on server, code is:
//ajax calling
function uploadBlob(blob, fileName) {
var formData = new FormData();
formData.append('video-blob', blob);
formData.append('video-filename', "Demo_"+fileName+".mp4");
$.ajax({
url: "http://localhost:8080/services/recording/upload.html",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
button.blobs.pop(blob);
console.log("After length-"+button.blobs.length);
},
error: function(jqXHR, textStatus, errorMessage) {
alert('Error:' + JSON.stringify(errorMessage));
}
});
}

@amitrathi1982 are you able to capture speakers? You may need to use CDN link or getScreenId script from this repo: https://github.com/muaz-khan/getScreenId
BTW, you need to merge all files using ffmpeg. Or maybe you can try this on nodejs server:
// i donno if this works on nodejs
var file = new Blob(arrayOfAllPieces, {
     type: 'video/webm'
});
// write file to disk using fs.write

Did you check these demos?

https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs
https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg

Hi Mauz,
Good morning!
After merging, only first file (first 20 second recording) has audio and other (after 20 second) are silent..
Details are here:
As I mentioned above I am using timeSlice option and set 20 seconds to upload data to server in chunks. So there is around 3 files for 1 minute recording.
When I run directly only first file opened but not others. Now  I merged all the recordings and after merging a single file is created and it runs successfully. But here is the issue in audio of subsequent files.
After merging, only first file (first 20 second recording) has audio and other (after 20 second) are silent.
Is there issue in sending recording file. I am missing something  in subsequent files  while sending to  server?
Thanks again Mauz.

Hi Muaz!
I get some issues when using your above snippets, notably, I get a 405 (Method not allowed) error on client side when attempting to execute the save.php script. The server gives me a 404 error for the POST request on save.php. Is there something I need to do to set up some kind of routing for the POST request?

Hello Muaz, Everyone,
Can you please help me in merging resulted multiple .mp4 files in to one.
Right now I am using FFMPEG by below commands:
Step1: Convert all files one by one in to intermediate file-
1. ffmpeg -i E:\recordings\Demo_1525840692968.mp4 -qscale:v 1 intermediate1.mpg
2. ffmpeg -i E:\recordings\Demo_1525840703000.mp4 -qscale:v 1 intermediate2.mpg
3. ffmpeg -i E:\recordings\Demo_1525840707080.mp4 -qscale:v 1 intermediate3.mpg
Step 2: Merge intermediate files to one single "mpg" format file-
ffmpeg -i concat:"intermediate1.mpg|intermediate2.mpg|intermediate3.mpg" -c copy intermediate_all.mpg
Step 3: Convert last merged "mpg" format file to .mp4
ffmpeg -i intermediate_all.mpg -qscale:v 2 output.mp4
Can you please suggest single command to merge these or less steps.
I used below command too. It show merged but when play, only first file merged and play.
Thanks,
Amit

BTW, one last comment. You can replace RecordRTC code with this lib and it will play complete recording after when it is merged:

https://github.com/streamproc/MediaStreamRecorder

PS. I need to test RecordRTC-timeSlice myself before making a comment about it. I'll add a similar demo to RecordRTC git as well. [timeSlice+ffmpeg]

Thanks a lot Muaz.
I will try it.
Your views always valuable for me. Thanks once again.

Hi Muaz,
Thanks for thee hint.
Can I use it for “record-audio-plus-screen”. I found one sample for multiple streams using :
var mediaConstraints = {
audio: true,
video: true
};
So to capture screen too what I need to modify.
https://www.webrtc-experiment.com/msr/MultiStreamRecorder.html
Thanks,
Amit
From: Muaz Khan [mailto:notifications@github.com]
Sent: Friday, May 11, 2018 5:59 PM
To: muaz-khan/WebRTC-Experiment WebRTC-Experiment@noreply.github.com
Cc: K, Amit (MIND) Amit.K@mind-infotech.com; Mention mention@noreply.github.com
Subject: Warning!!!PossibleSpam Re: [muaz-khan/WebRTC-Experiment] RecordRTC and best way and how to save on server (#48)
BTW, one last comment. You can replace RecordRTC code with this lib and it will play complete recording after when it is merged:

https://github.com/streamproc/MediaStreamRecorder

PS. I need to test RecordRTC-timeSlice myself before making a comment about it. I'll add a similar demo to RecordRTC git as well. [timeSlice+ffmpeg]
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/muaz-khan/WebRTC-Experiment/issues/48#issuecomment-388349518, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AJKbj9UYk9TwXK7YWmrXNdxLMN_duVThks5txYQggaJpZM4Au2xH.

The information contained in this electronic message and any attachments to this message are intended for the exclusive use of the addressee(s) and may contain proprietary, confidential or privileged information. If you are not the intended recipient, you should not disseminate, distribute or copy this e-mail. Please notify the sender immediately and destroy all copies of this message and any attachments. WARNING: Computer viruses can be transmitted via email. The recipient should check this email and any attachments for the presence of viruses. The company accepts no liability for any damage caused by any virus/trojan/worms/malicious code transmitted by this email. www.motherson.com

Dear Muaz,
Thanks a lot for all the help and support you are doing. GREAT WORK!!!!!
I have a question. My requirement is to capture the video which is playing in a browser through javascript for a certain time period. Now once i capture it in a blob variable, how do i save this into a disk? Could you please let me know the code to provide a path and save the file in a disk? Thanks in advance.

Just get blob like:
$("#btn-upload").on("click", function(){
this.disabled = true;
document.getElementById('btn-retake').disabled = true;
document.getElementById('btn-play').disabled = true;
if(!recorder || !recorder.getBlob()) return;
var blob = recorder.getBlob();
uploadBlob(blob);
})
and define uploadBlob like:
function uploadBlob(blob) {
var formData = new FormData();
formData.append('video-blob', blob);
formData.append('video-filename', 'demo.mp4');
$.ajax({
url: "/save-video/",
type: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
$(".opacity_overlay_box").show();
},
success: function(response) {
$(".opacity_overlay_box").hide();
location.reload(true);
},
error: function(response) {
alert('Error:' + response);
$(".opacity_overlay_box").hide();
}
});
}
and then save it on backend,
if you are using PHP then:
move_uploaded_file($_FILES["video-blob"]["tmp_name"],
"upload/" . $_POST["video-filename"]);
Or do according your backend language.
Best Regards,
Kashif AnwarSoftware Engineer
Mobile: +919718577858
On Tue, Oct 9, 2018 at 6:06 PM SIVAPRASAD03 notifications@github.com
wrote:

Dear Muaz,
Thanks a lot for all the help and support you are doing. GREAT WORK!!!!!
I have a question. My requirement is to capture the video which is playing
in a browser through javascript for a certain time period. Now once i
capture it in a blob variable, how do i save this into a disk? Could you
please let me know the code to provide a path and save the file in a disk?
Thanks in advance.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/muaz-khan/WebRTC-Experiment/issues/48#issuecomment-428174441,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWnstMU2NS2MzaHjjZTkSm_lBMNwjQv-ks5ujJg-gaJpZM4Au2xH
.

Hi Muaz,
I can able to save video file in remote server successfully. But the problem is video captured in iphone chrome browser is overlapping as below. Can you please help on this. This is happening for only iphone and for Android and desktop its working absolutely fine.

Thanks,

hey, how is it already?? any solution for the overlapping issues in the iphone??

Hi everyone,
I was able to get video file saving (in the code below, at the root directory) using a python flask server. If anyone is interested in the replicating, I've listed it below. Thank you Muaz for the amazing  WebRTC library!
JavaScript Client Side
  async function stopRecordingCallback() {
      video.srcObject = null;

      let blob = await recorder.getBlob();

      video.src = URL.createObjectURL(blob);
      recorder.stream.getTracks(t => t.stop());

      console.log(blob);

      var formData = new FormData();
      formData.append('video-blob', blob, 'test.webm');

      xhr('/finish', formData, function (fName) {
	  console.log("Video successfully uploaded!");
      });
  }

  async function xhr(url, data, callback) {
      console.log('calling xhr');
      var request = new XMLHttpRequest();
      request.onreadystatechange = function () {
	  if (request.readyState == 4 ** request.status == 200) {
	      console.log('callback?');
	      callback(location.href + request.responseText);
	  }
      };
      console.log('sending over...');
      console.log(data);
      request.open('POST', url);
      request.send(data);
  }

Python Server-Side

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = ""

@app.route('/finish', methods=['POST'])
def finish():
    print('finish method on python server')
    if request.method == 'POST':
        video_file = request.files['video-blob']
        video_file.save(os.path.join(app.config['UPLOAD_FOLDER'], 'test.webm'))
        return 'Got video file!'

I hope this helped anyone else struggling!

@amitrathi1982 To fix screen capturing issues on localhost or on any https domain:

Download this chrome plugin source code, modify manifest.json for matches attribute only to set your own domain's permissions. Now open chrome://extensions/ and click "Load unpacked extension" button to locate the extension directory.
Otherwise use getScreenId.js. Which requires this plugin installation. However please make sure to run getScreenId only on localhost or on a real HTTPs domain. Don't run getScreenId on jsfiddle or inside-iframes. Iframes are not supported.

Here is a simple demo explains how to use getScreenId with RecordRTC.
Regarding "upload in realtime": the best solution is use a media-server where you will open RTCPeerConnection connections with the server.
RecordRTC accepts timeSlice and ondataavailable options that allows you get blobs instantly and upload to server after fixed intervals. Here is a simple demo. However your server must merge all files into a single file after recording finishes. Here is a similar demo using ffmpeg on server-side using nodejs. You can check a socketio demo as well.

I tried timeSlice and ondataavailable like this and I got error which is "could not determine type of stream"
First blob is working but others getting "could not determine type of stream" error.
Can you help me ?
timeSlice:5000,
ondataavailable: function (blob) {
uploadFile(blob);
}
and uploadFile function like this
function uploadFile(recordedBlob) {
var formData = new FormData();
formData.append('video-blob', recordedBlob);
        formData.append('video-filename', getFileName(fileExtension));

        // upload using jQuery
        $.ajax({
            url: '/n/blob/file-save', // your server URL
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (response) {
                if (response.success) {
                    // alert("Kayıt başarılı." + response.url);
                }
                else {
                    alert(response);
                }
            }
        });
    }

Is it same as youtube streaming saving feature?

How to save  record data every 5 minutes duration in cloud service i.e. AWS

repo: muaz-khan/WebRTC-Experiment


text:
Issue: webhook not used

current docker image ( ghcr -> muety -> telepush)

tried to set secretUrl for setWebhook, thingy did still want me to send /api/updates .. inacceptable (!)

from the go code it should be
/api/updates_YOURcustomTOKEN
(    the default is /api/updates , just if any one googles this   )

since the thingy did not show the message from source code ( currently LINE 138 , Updates from Telegram are accepted under '/api%s'. Set the webhook accordingly (see https://core.telegram.org/bots/api#setwebhook)\n", botConfig.GetUpdatesPath( )
nginx was (ab)used and curl was used to set the webhook

relevant parts (nginx):
location /api/ {

    location = /api/updates {
        deny all; return 403;
    }
    location ~ ^/api/messages$ {
         return 404;
         access_log /dev/null;
    }

      location = /api/updates_customstring {
      rewrite  ^/api/updates_customstring$ /api/updates break;
      client_max_body_size 4M;

      proxy_http_version 1.1;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_cache_bypass $http_upgrade;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $http_connection;
      proxy_pass http://upstream_signals ;
      proxy_set_header Host $host;
      proxy_redirect     off;

      }
}

relevant parts(curl)
# clear webhook
curl -F "url=" https://api.telegram.org/bot<YOURTOKEN>/setWebhook
curl -F "url=https://<YOURDOMAIN.EXAMPLE>/api/updates_customstring" https://api.telegram.org/bot<YOURTOKEN>/setWebhook

Your Question was ?

why is the thingy not using the setUrl parameter ( used in docker compose: APP_URL_SECRET: customtokenthingy)
are PR's welcome to document at least the /api/updates endpoint ?

regards

Sorry, I think I can't reproduce this. Everything working fine for me.
ferdinand@ferdinand:/tmp$ docker run -it --rm -e APP_TOKEN=foo -e APP_URL_SECRET=bar ghcr.io/muety/telepush
2023/05/09 20:26:38 error: failed to read store from /srv/data/store.gob
2023/05/09 20:26:38 Read existing gob store from file
2023/05/09 20:26:38 Environment: production
2023/05/09 20:26:38 Version: 3.3.1
2023/05/09 20:26:38 Using webhook mode
2023/05/09 20:26:38 Updates from Telegram are accepted under '/api/updates_bar'. Set the webhook accordingly (see https://core.telegram.org/bots/api#setwebhook)
2023/05/09 20:26:38 Listening for HTTP on 0.0.0.0:8080.

Can you show your compose file?

(
update: the image was re-tagged on the local machine , so it was effectively using the old webhook2telegram,
so at least the endpoint issue is "solved" for the current version,
so why was it re-tagged / down-graded ?
main problem with with the "real current" image: if sending the  the suggested "default" json
curl -XPOST -H 'Content-Type: application/json'      -d '{ "text": "another_test_tokURL_default *Hello World!* (yes, this is Markdown)" }' https://my-custom-url.tld/api/messages/Your-Tic-Tac-Token

the thingy returns
2023/05/09 21:12:46 error: telegram api returned status 400: 'Bad Request: can't parse entities: Can't find end of the entity starting at byte offset 38'

this is why the "older" version is in place at this point  , markdown parsing breaks even with the example
)
compose.yml is "normal"
version: '3'

services:
  webhook2telegram:
#    image: n1try/webhook2telegram
#    image: ghcr.io/muety/webhook2telegram:latest
    image: ghcr.io/muety/telepush
    container_name: ${APP_URL}
    hostname: ${APP_URL}
    restart: unless-stopped
#    working_dir: /var/www/html
    volumes:
      - ${STORAGE_ROOT:-/storage_global/data/}/${APP_URL}/botdata:/srv/data
    env_file:
        - .env
    command:    /bin/ash -c "apk add grep ; /bin/sh /app/entrypoint.sh 2>&1 | grep --line-buffered -v -e 'polling for updates' -e 'got unknown command' "
    entrypoint: /bin/ash -c "apk add grep ; /bin/sh /app/entrypoint.sh 2>&1 | grep --line-buffered -v -e 'polling for updates' -e 'got unknown command' "
    environment:
      VIRTUAL_HOST: ${APP_URL}
      VIRTUAL_PORT: 8080
      VIRTUAL_PROTO: http
      LETSENCRYPT_HOST: ${APP_URL}
      LETSENCRYPT_EMAIL: ${LETSENCRYPT_EMAIL}
      SSL_POLICY: Mozilla-Modern
      SSH_PORT: ${SSH_PORT}
      APP_MODE: ${APP_MODE:-webhook}
      APP_TOKEN: ${APP_TOKEN:-YouHaveToSetYourToken}
      APP_URL_SECRET: ${APP_URL_SECRET:-incomingtgwebhookting}
    ports:
#      - ${SSH_PORT:-0}:22
      - "127.0.0.1:${LOCAL_PORT:-55553}:8080/tcp"
    logging:
      driver: ${DOCKER_LOG_DRIVER:-json-file}
      options:
        max-size: ${DOCKER_LOG_MAX_SIZE:-20m}
        max-file: ${DOCKER_LOG_MAX_FILE:-10}

networks:
  default:
    external:
      name: ${NGINX_NETWORK:-nginx-proxy}

Telegram complains because the text you're trying to send is invalid Markdown. You have two opening _ (italic text), but only one closing.

source: gharchive/issue

authors: benchonaut muety

repo: muety/telepush

license: MIT

license_type: permissive

license_source: github-api


text:
[Documentation] Releases page return Error. How to get to v4 documentation?

https://material-ui-pickers.dev/releases

How to get to v4 documentation?

https://next.material-ui-pickers.dev/

repo: mui-org/material-ui-pickers


text:
[1.0] Don't distribute the test files

It just makes picking the right import harder in the IDE.

The regression was introduced between v1.0.0-beta.45 and v1.0.0-beta.46.

I think it's coming from #10964.

authors: lookfirst oliviertassinari

repo: mui-org/material-ui


text:
MUI Next - CssBaseline support for simple typography styles

Bug Report
All text must be wrapped in <Typography>, otherwise default typography theming does not render correctly. But this is difficult because wrapping everything in <Typography> causes component sizes to readjust and flicker on render.
Steps to Reproduce

Use the example examples/nextjs-next
Modify the theme in getPageContext.js with:

  palette: {
    type: 'dark',
    background: {
      default: '#000'
    },

Add to index.js:

Hello

    ...

Outcome

Hello
 renders with black text, not visible on background.
Does not use a default typography variant.

Attempted workaround

Wrap everything in <Typography>:

    <Typography>
      <Dialog open={open} onClose={handleClose}>
       ...

Hello

    </Typography>

This does not work, because it causes the component sizes to readjust and flicker on render

Expected Behavior

Default typography theming injected into root

This does not work, because it causes the component sizes to readjust and flicker on render

I don't follow. How this is not working? If you want to wrap the whole DOM with the Typography component, you should set component="div" .

@oliviertassinari
Thanks, this is helpful.
This still makes a problem:

Default Theme colors are automatic with {classes.root}
We have to add <Typography component='div'> to every page render function for default Typography

If you told me that it's simply not automatic, then that makes sense.
However, when you use:
 palette: {
    type: 'dark',
    background: {
      default: '#000'
    },

It produces unexpected behavior, because the theme colors are automatically applied with {classes.root}, but the corresponding default typography colors computed as a result of type: 'dark', are not automatically applied
So if one part of it is automatic, but the other part is not, then we must add <Typography component='div'> to the render() function for all pages which becomes redundant and increases indent.
The examples do not instruct:

"please add <Typography component='div'> to all render functions, otherwise your computed Typography theme colors will not be used even though your other Theme colors will be used, we will only do half of it automatically"

So reading this you want the fact that Typography theme changes and styling won't apply to text, not inside Typography?

we must add  to the render() function for all pages which becomes redundant and increases indent.

@Yzrsah It's what the _app.js component of Next.js is for.

the theme colors are automatically applied

It's automatic, because the Next.js example uses our CssBaseline component in _app.js.

Warning: validateDOMNesting(...):
 cannot appear as a descendant of
.

@joshwooding What do you think of changing the default Typography variant mapping from 'p' to 'span' for the body1 and body2 variants?

@oliviertassinari The CssBaseline is not using the default typography colors computed in the theme

@oliviertassinari The CssBaseline is not using the default typography colors computed in the theme
It's not in the examples, there is nothing about <Typography component='div'> there, and the default typography colors are not implemented correctly in the examples
If this can produce unexpected behavior: "Page theme colors are used, but typography theme colors are not used", then why not add it to the Examples? The examples do not have <Typography component='div'> in _app.js

The CssBaseline is not using the default typography colors computed in the theme

@Yzrsah No, the CssBasline component is not handling typography whatsoever. This was a design decision taken a years ago. We have designed each component to work in isolation, not relying on any global CSS. This drastically helps people to cherry-pick our components and use them independently from the existing element on the page.
However, we do need some global CSS reset when handling the top layout of the page. The CssBasline component was introduced for this use case. So I would tend to agree with you. I think that we should update the component implementation to handle simple typography styles.

@oliviertassinari Thank you so much

I tested with commit #14729
Using examples/nextjs-next - It flickers
The typography styles from CssBaseline display on initial render, but then revert back to unstyled after flicker
Same repro, just using
Hello

@Yzrsah I don't understand what you are saying. If you could provide a reproduction, it would help. As far as I know, the problem is fixed now with #14729.

@oliviertassinari The Reproduction is the same 3 steps listed in the first post
Following those 3 steps, the text will display using the CssBaseline typography style, but then flicker and revert back to unstyled

I don't see that.

@oliviertassinari It's definitely partially working, because I see a flicker of the correct typography theming, before it reverts.
For index.js I used:
  return (

Hello

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Super Secret Password</DialogTitle>
        ...

And there's no <Typography component='div'> in _app.js
It works as expected with <Typography component='div'>, just not with CssBaseline alone

@oliviertassinari It's definitely partially working, because I see a flicker of the correct typography theming, before it reverts.
For index.js I used:
  return (

Hello

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Super Secret Password</DialogTitle>
        ...

And there's no <Typography component='div'> in _app.js
It works as expected with <Typography component='div'>, just not with CssBaseline alone

@oliviertassinari It's definitely partially working, because I see a flicker of the correct typography theming, before it reverts.
For index.js I used:
  return (

Hello

      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Super Secret Password</DialogTitle>
        ...

And there's no <Typography component='div'> in _app.js
It works as expected with <Typography component='div'>, just not with <CssBaseline /> alone

@oliviertassinari Can you please re-open the issue?
It is definitely not working. It shows the same flickering on multiple machines. I tested on a different dev setup.

@oliviertassinari Can you please re-open the issue?
It is definitely not working. It shows the same flickering on multiple machines/browsers
I re-tested on a different dev setup and different machines.
@oliviertassinari If it's working for you, then can you please post the working reproduction?
It flickers for me in all reproductions, so I am not sure how it's possible that it works for you.

@oliviertassinari Can you please re-open the issue?
It is definitely not working. It shows the same flickering on multiple machines/browsers
I re-tested on a different dev setup and different machines.
If it's working for you, then can you please post the working reproduction?
It flickers for me in all reproductions, so I am not sure how it works for you.

@oliviertassinari Can you please re-open the issue?
It is definitely not working. It shows the same flickering on multiple machines/browsers. I re-tested on a different dev setup and different machines.

@oliviertassinari Can you please re-open the issue?
It is definitely not working. It shows the same flickering on multiple machines/browsers. I re-tested on a different dev setup and different machines.
@joshwooding What results do you see?

@Yzrsah Could you create a repro that we could clone and test locally? This would help a lot.

I’ll have a look when I get some free time (probably the evening)

It is definitely not working. It shows the same flickering on multiple machines/browsers. I re-tested on a different dev setup and different machines.

@Yzrsah Your Next.js integration must be wrong. I have used your reproduction instructions with our /nextjs-next example, no problem. Do you have a video of the flickering? Maybe it's just how the brower loads the web font: #14296.

Could you provide a simple repository for the reproduction?

It works for me too

Here is the test repo, https://github.com/Yzrsah/mui-nextjs-next
"This text may be invisible on the background"

@oliviertassinari

Do you have a video of the flickering?

By "flickering" I meant: The second render switches back to unthemed.
with NextJS we see a fast initial render using SSR, and then a second render update after props resolved and scripts have finished loading on the client side.
The first render displays with the correct font, colors, and theme.
The second render removes it.
When I add a <Typography component='div'> to _app.js, the second render works correctly.

Maybe it's just how the brower loads the web font: #14296.

I don't think this one caused it, as it displays correctly on the initial SSR render, so browser has finished loading font

@Yzrsah This custom font loading going one. If you the dev tool open with disabled caching, your browser needs to download the font first before it can display it.
You can use #14296 solution if you want to solve that problem.

@oliviertassinari The theme provider switches back to a different set of also typography COLORS
The theme colors are not even related to the web font. It is not possible that #14296 is the issue.
The font is already downloaded and I verified that #14296 is not occurring in Dev Tools.
I am describing to you a completely different scenario here which is different from #14296.

The first render has all web-fonts loaded already and they displays correctly
Then after the client-side update, the default theming and colors for typography stops rendering permanently

It's not a "Delayed Font Loading" problem. It's a "Switches Back To Unthemed Colors Permanently" problem.
The issue is not resolved and we have now closed an incomplete issue which has bugs with NextJS rendering.
Can you please re-open the issue?

@oliviertassinari The theme provider switches back to a different set of also typography COLORS
The theme colors are not even related to the web font. It is not possible that #14296 is the issue.
The font is already downloaded and I verified that #14296 is not occurring in Dev Tools.
I am describing to you a completely different scenario here which is different from #14296.

The first render has all web-fonts loaded already and they displays correctly
Then after the client-side update, the default theming and colors for typography stops rendering permanently

It's not a "Delayed Font Loading" problem. It's a "Switches Back To Unthemed Colors Permanently" problem.
The issue is not resolved and we have now have an incomplete and partially working feature which has bugs with NextJS rendering.
Can you please re-open the issue?

@oliviertassinari The theme provider switches back to a different set of also typography COLORS
The theme colors are not even related to the web font. It is not possible that #14296 is the issue.
The font is already downloaded and I verified that #14296 is not occurring in Dev Tools.
I am describing to you a completely different scenario here which is different from #14296.

The first render has all web-fonts loaded already and they displays correctly
Then after the client-side update, the default theming and colors for typography not wrapped in <Typography> stops rendering permanently

It's not a "Delayed Font Loading" problem.
It's a "Reverts permanently back to default theming and colors for text not wrapped in <Typography>" problem.
The issue is not resolved and we have now have an incomplete and partially working feature which has bugs with NextJS rendering.
Can you please re-open the issue?

@Yzrsah I'm sorry, I don't understand.

@oliviertassinari

@Yzrsah Wait for the next alpha release.

@oliviertassinari
Alpha 3 resolved the problem and the CssBaseline is now working perfectly with correct typography and theming on both client and server render.
Thank you again.

Alpha 3 resolved the problem and the CssBaseline is now working perfectly with correct typography and theming on both server and client renders.
Thank you again.

@Yzrsah This is great news 🎉.

authors: Yzrsah eps1lon joshwooding oliviertassinari


text:
[Select] Select onBlur after load when open is controlled and initially true

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯
Select calls onBlur immediately when open={true}

Expected Behavior 🤔
Select should not call onBlur immediately when open={true}

Steps to Reproduce 🕹
We are generating a select box via portal that removes itself after a blur event or losing focus.
There are instances that we would like the select menu to start open initially.
When the control is set initially to true, the onBlur event is called immediately causing the select box to be removed.
CodeSandbox Issue
I can avoid calling the onBlur if I have a "loading" tag:
CodeSandbox Workaround

Your Environment 🌎

Tech
Version

Material-UI
v3.9.2

React
v16.8.6

Browser
Chrome v77.0.3865.90

TypeScript
No

I also tested this with using the effect to open the menu. It seems to call onBlur as well. So I would say that any programmatic opening of the select menu causes the onBlur event to fire.

Independent of the specific events: What are you trying to solve?

The main component we use this in is a spreadsheet component created using canvas. We use material ui form elements as a pop over single field editor to edit the information when double clicking into the field. We use the onBlur event or the clickaway event to say that the field is done editing and should be saved which removes the popover editor.
We also use this same select component in our full forms without auto opening.
If there was an instance where I would want to open the select dropdown programmatically, it would call onBlur immediately which we use to run field validations. We would want to avoid showing a "missing required field" error immediately on opening if possible.
I understand the use cases can be slim and there is a current workaround.

If there was an instance where I would want to open the select dropdown programmatically, it would call onBlur immediately which we use to run field validations.

It sounds like you're not really thinking in react. You don't "programmatically" (you probably meant imperatively) close the select. What you do is flip the open prop with some global state managment.
I guess my main question is why onClose isn't enough. We should already cover every close use case in blur events.

We use material ui form elements as a pop over single field editor to edit the information when double clicking into the field.

This is also not very clear to me. You're using a Select component which is a type of input where the user selects a value from a pre-defined list. Are you maybe looking for some sort of combobox? We have integration examples with popular combobox libraries in https://material-ui.com/components/autocomplete/#autocomplete and are currently working on complete autocomplete without any 3rd party library.

It sounds like you're not really thinking in react. You don't "programmatically" (you probably meant imperatively) close the select. What you do is flip the open prop with some global state managment.

Yes. We use the React.useState hook to control the open prop on whether or not to display the select field. We also use the useState hook to control the open prop on the menu for the select component.
Our use case is this: We have a canvas spreadsheet component that doesn't support editing. It does support events and will emit events for double clicking back up to our wrapper component we created. When the wrapper component receives a double click event, we set some variables on the shownEditField to determine location, size, variables, type, etc. When that state value is set, we display a popup directly over the field that we are editing like you would see in other spreadsheets.
Our select component is a set list that you choose one value or (if it is a multiselect) you choose multiple values.
We have a lot of customers use TAB to exit a field in a spreadsheet. So our onBlur event needs to save and close the editing popup. We have also recently received feedback that customers would like the select to automatically open when editing in the spreadsheet view (hence the need for starting the menu isOpen state to true).
In addition to using this select component as a standalone editor for a single field, we also use the field component in a full form with other fields. We do not want to start all the select fields in the form with isOpen as true and we do not have a blur event in the form to close the form.
We also have several validations being ran against the fields for required, length, value combinations, etc. We run a lot of those validations during onBlur. We then display error messages as helper text. When onBlur is called immediately as the menu opens, we have some validations run and show an error when there is none.
That being said, I am only presenting our use case and a bug that I found with the component. The onBlur gets called immediately when the open prop is initially set to true (shown in my original post codesandbox). That is unexpected behavior as you are still in the field. It is expected that the field completely loses focus before calling onBlur.
If you have additional questions, I would be happy to answer them. Our use case is unique and I doubt many other people would use a standalone field like we do.

@ccmartell Can you confirm that the onBlur behavior matches your expectations in v4.5.1 (after #17299)?

If you have additional questions, I would be happy to answer them. Our use case is unique and I doubt many other people would use a standalone field like we do.

Why is onClose not sufficient? It should cover blurring. Be aware the blur events bubble in react (unlike in the DOM). If you actually have the requirement that any blur event in the subtree should close then this means switching between items would blur.

I'm closing as the problem do no longer manifest on v4.5.1. It's not meant to stop the discussion.

Sorry for the delay.

@ccmartell Can you confirm that the onBlur behavior matches your expectations in v4.5.1 (after #17299)?

I can confirm that the behavior in v4.5.1 matches my expectations.

What solution do you use? Did you build it from scratch? If you did built it from scratch, what features did you need and what's missing in the solution offered by the third parties? Thanks.

We use a fork of Canvas Datagrid and our own code. The field editor was lacking for our use (we use a lot more than just strings and text) but we really liked the virtualization that's present through using a canvas spreadsheet rather than trying to use a react virtualization library.

Why is onClose not sufficient? It should cover blurring. Be aware the blur events bubble in react (unlike in the DOM). If you actually have the requirement that any blur event in the subtree should close then this means switching between items would blur.

Currently the issue we have with onClose running the onBlur event is that we want to see a preview of the updated values prior to closing the editor completely. This is mainly used for comboboxes that you want to select a value and then slightly change or add to the selected value.
We are planning on changing our combobox solution in the near future. The proposed solution actually allows the use of onClose running the onBlur events.

authors: ccmartell eps1lon oliviertassinari


text:
[Switch] ref attribute is not the root element

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯
When attempting to use the width of a Switch component, I don't get the width of the surrounding span.
Expected Behavior 🤔
When getting the offsetWidth of the Switch's ref, it should be the width of the entire component.
Steps to Reproduce 🕹
Attempt to use the ref component and retrieve the width. Set a component to marginLeft to share that width. (I've also reset the margin).
https://codesandbox.io/s/gifted-joliot-gxzni
Context 🔦
I would expect the helper text to align with the label of the switch (see codesandbox example)
I noticed that the ref was pointing to SpanBase: https://github.com/mui-org/material-ui/blob/7f4b81ffb7b76f73319b38f1b9f287f43c74e6d0/packages/material-ui/src/Switch/Switch.js#L162-L187
Perhaps the ref should be the span and an 'innerRef' would point to the SpanBase? I'm unsure of the right way forward. Maybe I'm misinterpreting what "root" should be, however I would like to get the width of the Switch itself, parent span CSS included.
Your Environment 🌎

Tech
Version

Material-UI
v4.9.1

React
v16.12.0

Browser
Chrome

@williamscs Nice catch! I'm not sure it was done deliberately. https://github.com/mui-org/material-ui/commit/8a13bc294e0#diff-8d33bd694cc029cf64dd1749dfc57438R117.
@eps1lon What do you think of moving the ref to the root as a bug fix?

@eps1lon What do you think of moving the ref to the root as a bug fix?

And we need to fix our conformance test. The docs we generate from the test don't reflect the behavior correctly.

I will create a PR on this and try and fix it.

@williamscs @oliviertassinari @eps1lon if you don't mind I will pick it up

@michaldudak This one might be relevant to your exploration on the unstyled slider.

I actually fixed this unknowingly while implementing the Switch using unstyled primitives: https://github.com/michaldudak/material-ui/blob/6129be7828141ac751549445d1614cd85f8e5938/packages/material-ui/src/Switch/Switch.js#L359

authors: TommyJackson85 captain-yossarian eps1lon michaldudak oliviertassinari williamscs


text:
[Transition] Reveal component, transitions when components scroll into view

A Reveal component that tracks the "visiblity" of an element and triggers a specific transition.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡
Common use case is to implement a "reveal"-effect when certain elements scroll into view. Since I love working with @material-ui and it comes with it's own set of transitions wouldn't be great to have a Reveal components that triggers a certain transition when the element scrolls into view and is compatible with material-ui/core Transitions (and react transition group)?
Examples 🌈
I imagine a Reveal component with the following API:
<Reveal TransitionComponent={Slide} TransitionProps={{direction: "left", timeout: 1000}}>

Hello World

</Reveal>

Of course the Reveal component would track elements position via IntersectionObserver.
Motivation 🔦
I know that there are libraries that do this similarly but e.g. react-reveal is not maintained anymore or react-awesome-reveal comes with its own solution on building custom transitions.
I could contribute a solution by myself if this is interesting at all!

@maerzhase This sounds like a great idea. We need to improve the transitions for Material-UI. @gevorgmakaryan considering you have some experience building this animation for https://github.com/gevorgmakaryan/thefront-preview. Which solution would you recommend?

It seems that there is a dependency on #16663.

Since #16663 got closed, I guess we don't tackle this one?

@maerzhase These are different issues and almost independent. We could built the useIntersectionObserver hook and keep it private.

authors: maerzhase oliviertassinari


text:
[examples] SSR example for Remix

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡
Examples folder would contain example of using MUI with Remix framework. I have already tried it, spent an entire day on it but with no luck. I tried both ServerStyleSheet and emotion cache. I couldn't get it to work. Always saw a flash of unstyled page.
Examples 🌈
No response
Motivation 🔦
Remix is a promising new framework

@mnajdova I didn't want make a pull request to your repo so I'll tell you my observations here.
The CacheProvider needs to actually be in the entry.client.tsx wrapping the RemixBrowser and not in the root.tsx. If it's in root.tsx, it won't correctly fill up the shared cache.
One more interesting thing is that constructStyleTagsFromChunks generates the whole html and not just styles tags so if you pass that to the generateFullPage, you end up with meta tags and styles inside of the body tag.

@mnajdova I didn't want make a pull request to your repo so I'll tell you my observations here.

It's fine, I already scaffolded a PR https://github.com/mui-org/material-ui/pull/29952

The CacheProvider needs to actually be in the entry.client.tsx wrapping the RemixBrowser and not in the root.tsx. If it's in root.tsx, it won't correctly fill up the shared cache.

Hmm, how can I then send the cache from the server to the client? Let me double check this.

One more interesting thing is that constructStyleTagsFromChunks generates the whole html and not just styles tags so if you pass that to the generateFullPage, you end up with meta tags and styles inside of the body tag.

Ok, this may be related to the warning I have in https://github.com/mui-org/material-ui/pull/29952 I will check.

Hmm, how can I then send the cache from the server to the client? Let me double check this.
It needs to be both in entry.client.tsx and entry.server.tsx.

I have a "working" example. But fixing the warning is kinda messy and it was just my first idea.
To fix the cache it needs to look like this
entry.client.tsx
const clientSideCache = createEmotionCache();

hydrate(
  <CacheProvider value={clientSideCache}>
    <RemixBrowser />
  </CacheProvider>,
  document
);

entry.server.tsx
const cache = createEmotionCache();

// ...

let initialMarkup = renderToString(
  <CacheProvider>
    <RemixServer context={remixContext} url={request.url} />
  </CacheProvider>
)

// ...

And to "fix" the warning issue I did the following
function renderFullPage(html: string, css: string) {
  const extractBodyTag = html.match(/]*>([\s\S]*)<\/body>/);
  const extractHeadTag = html.match(/]*>([\s\S]*)<\/head>/);
  return `
    <!DOCTYPE html>

        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        ${css}
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet" />
	      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet" />
	      ${extractHeadTag ? extractHeadTag[1] : ''}

        ${extractBodyTag ? extractBodyTag[1] : ''}

  `;
}

Thanks, I've updated the PR. Can you double-check again if everything works? I couldn't find issues at this moment.

Seems fine to me at first glance. You actually integrated that idea with regex :)) I'll test it locally later but I think it's okay

I am not sure if that is the best idea, but I don't have any better... I was also surprised that it contained all the HTML.

It's definitely not. I'm sure someone can come up with something better later. But the improtant thing is that it's working. Thank you very much for your cooperation.

I think I broke something trying to fix some lint issues, I will take a look again tomorrow on it.

Sure, if you need help, let me know

I gave it a go few days ago and I made a repo.
https://github.com/duvet86/remix-mui

@duvet86 Are you getting className mistmach between the server and the client?

No, no errors or warnings. I took inspiration from here

Thanks for linking it, I will take a look.

@duvet86 I used some of the logic, it is closer to what Remix official shows around styled-components - https://remix.run/docs/en/v1/guides/styling so it is fine by me 👍
I added all sources, under ./src instead of styled as you had, apart from that the logic is more or less the same.

Sadly I'm having issues with using for example Tailwind CSS with @duvet86 example. Styles of MUI takes precedence and I found no way to fix it. StyledEngineProvider doesn't work.

@jansedlon did you try using prepend in the emotion cache? Also make sure to inject the styles of emotion before the styles of Tailwind CSS for the SSR scenario.

@mnajdova  Yes but sadly that doesn't work at all. After the first render, EmotionGlobal throws an error Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node. It's cause by CssBaseline.

Hmm, maybe we should move to using insertionPoint https://github.com/emotion-js/emotion/pull/2521/files and specify where exactly we want the node to be injected. The prepend is anyway softly deprecated. Would you like to try this?

@mnajdova Yes but sadly that doesn't work at all. After the first render, EmotionGlobal throws an error Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node. It's cause by CssBaseline.

Does adding prepend doesn't work?

You should be able to import the tailwind.css stylesheet here https://github.com/mui-org/material-ui/pull/29952/files#diff-509c240e9d98e5ba1dc539adb6570462d8754c9fb40d625bc08d838a460ba700R29 no?

Adding prepend doesn't work?

It doesn't. I will play with it later. If I find a solution, I'll post it.

Following the Remix philosophy of "less JavaScript, more browser", the TailwindCSS/MUI integration issue that @jansedlon mentions and that I can reproduce can seemingly be fixed with a slight modification of the Tailwind config to produce different CSS: Either add important: true to your Tailwind config or important: "#app" and wrap your entire React app in

, see https://tailwindcss.com/docs/configuration#important

authors: axel-xitaso duvet86 jansedlon mnajdova


text:
Cant load custom fonts with nextJS

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯
I have been trying to load custom fonts in MUI for my nextJS project. But it errors out. According to the docs we need a loader for it parse custom fonts but I haven't been able to find any information related to that. How should I configure Next and MUI to load the fonts?
The only workaround I have been able to find is to define the font family through a global css file.  But then the fonts don't work inside components.
Here's my code for theme.ts
import { createTheme } from '@mui/material';
import proximaRegular from './public/fonts/Proxima-Nova.ttf';
import proximaBlack from './public/fonts/Proxima-Nova-Black.otf';
import proximaSBold from './public/fonts/Proxima-Nova-SBold.ttf';

const theme = createTheme({
  typography: {
    fontFamily: 'ProximaRegular, ProximaBlack, ProximaSBold, Arial, Roboto',
  },
  palette: {
    background: {
      default: '#FFD600',
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
              @font-face {
          font-family: 'ProximaRegular';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaRegular}) format('ttf');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }

        @font-face {
          font-family: 'ProximaBlack';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaBlack}) format('otf');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }

        @font-face {
          font-family: 'ProximaSBold';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: url(${proximaSBold}) format('ttf');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }
      `,
    },
  },
});

export default theme;

and here's the error I'm getting during the process
error - ./public/fonts/Proxima-Nova-Black.otf
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Expected behavior 🤔
The custom fonts should be loaded
Steps to reproduce 🕹
Steps:

import the custom fonts inside theme.ts
Create the appropriate style Overrides for them
Build the app.

Context 🔦
No response
Your environment 🌎

`npx @mui/envinfo`
System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
  npmPackages:
    @emotion/react: ^11.7.0 => 11.7.0
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.59
    @mui/material: ^5.2.3 => 5.2.3
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.2.0
    @mui/system:  5.2.3
    @mui/types:  7.1.0
    @mui/utils:  5.2.3
    @types/react: ^17.0.37 => 17.0.37
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: ^4.5.2 => 4.5.2

I'm using Chrome v96

This should help - https://stackoverflow.com/questions/60134693/why-is-my-local-font-not-being-applied-with-emotion-global-styling You can define the font face using link and reference it then in the global styles. If I need to guess the URLs are not correct.

I tried defining them into the global css file and then had MUI try to access them inside typography.fontFamily but it doesn't seem to work. As when I check the fonts they aren't applied

I figured out the problem, I was defining the formats of the font incorrectly, which was why they weren't loading. For others here's how this'll work
in your global css define the fonts
@font-face {
  font-family: 'ProximaRegular';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Nova.ttf') format('truetype');
  unicoderange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF;
}

@font-face {
  font-family: 'ProximaBlack';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Npva-Black.otf') format('opentype');
  unicoderange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF;
}

@font-face {
  font-family: 'ProximaSBold';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/Proxima-Nova-SBold.ttf') format('truetype');
  unicoderange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF;
}

and then refer them inside your theme object as how you do for regular fonts
Thanks

@Altair2169 one note though, there is no such thing as unicoderange, try unicode-range, also I don't think you should every font as font-weight: 400, it could break some third party library if you'd use it

authors: Altair2169 mnajdova vileen


text:
[CssBaseline] Add key to theme overrides type definition

Should fix #11015 (but I have no idea what I'm doing). Followed how other <Component>ClassKey were implemented, with the difference of not modifying the CssBaselineProps as it doesn't extend from the StandardProps as rest of the components.

@roosmaa Thanks, that should do it :)

source: gharchive/pull-request

authors: oliviertassinari roosmaa


text:
[docs] No more links to component implementations in documentation

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡
In the past, the documentation would have links to the component implementation.
This was really helpful to dig into the code a bit more, especially when designing component style overrides, as the source code is really helpful for this.
I would like to propose reintroducing these links again throughout the documentation and perhaps even having them in a unified location within the docs.
While I understand, that the implementation should not matter for a library to be used, there are often situations where it is still extremely helpful - especially in the cases of style overrides.
The current alternative of always navigating through the source tree on github works as well of course, but is cumbersome and I really miss the simplicity of the links in the past.
Examples 🌈
No response
Motivation 🔦
As described above:

Simplify looking up the implementation for some components to understand inner workings which are not (or only in rare cases) documented
Simplify creating style overrides by having easy access to the base implementation

Hi, thanks for your suggestion.

In the past, the documentation would have links to the component implementation.

I explored component docs in v4 website but I couldn't find links to the source code of the implementations. Can you post a link as an example?

The current alternative of always navigating through the source tree on github works as well of course, but is cumbersome and I really miss the simplicity of the links in the past.

Your suggestion is likely to be a nice addition to the docs, but I think it is considered a very low priority, so I am not sure if or when we will put the effort. In the meantime, as you already said, I'd suggest searching for a component name in https://github.com/mui-org/material-ui/find/v5.1.0

These links were very helpful in the past. They were found on the API page for the component, e.g.
https://v4.mui.com/api/button/
Search "implementation" to find the link near the bottom of the page.

It could perhaps be added a chip as well:

Yea, I find it frustrating. I used it all the time. Now I have to search manually in packages. Please add this small piece. It was making a difference to many people!
In MUI v5:

In MUI v4:

authors: abryzak hbjORbj kasparsiricenko mbrookes olee

repo: mui/material-ui


text:
[Autocomplete] Keyboard arrow key option selection broken with custom PopperComponent and renderInput

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Steps to reproduce 🕹
Link to live example:

Simplified Sandbox example
On MUI Docs

Steps:

Click on autocomplete component.
Focus should now be on the input field.
Press arrow key down until highlighting the last option at bottom of the list.
Press arrow key down once more.
Top options are not visible and are hidden behind the input field.

Current behavior 😯
When having an autocomplete with a custom renderInput andPopperComponent as highlighted in autocomplete docs, keyboard navigation is not working as expected. When the option selection wraps from the last to the first element using arrow keys, the option is hidden under the input field.
Expected behavior 🤔
When the first option is selected after being navigated via the keyboard from the last option, the options list should look like the state when first rendered/opened. (option should be visible)
Context 🔦
I am trying to tackle a few usability tickets and was able to track the source of this bug to MUI. Since our implementation is mutated from the autocomplete examples provided I am assuming this is an undesired/uncaught bug, since it impacts usability and user experience.
Your environment 🌎

npx @mui/envinfo
  Don't forget to mention which browser you used.

- Tested on Google Chrome, on OSX with most recent updates for both.

  Output from `npx @mui/envinfo` goes here.

- Tested / recreated on sandbox linked above, don't know how to run npx commands on there 🤷

Good catch, thanks for reporting this. Would you like to contribute to the project by taking a deeper look at it?

@michaldudak, no worries. I will pass for now on taking a deeper look, currently pretty busy at work, etc. Just wanted to highlight the bug with the hope that it would be addressed.

Sure, no problem. Perhaps someone else from the community will take a stab at this.

sure, i don't mind

@RyanBarclay sure, I don't mind.
Alternatively you could send a PR to @sai6855's branch or contribute directly to his PR (after you get permissions).

authors: RyanBarclay michaldudak sai6855


text:
Family Link | Guidebooks | Overview

https://youtu.be/mP3sPxKk1Lg

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!


text:
[joy-ui] Add Upload component

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡
Upload the file by selecting or dragging
When you need to upload one or more files.
When you need to show the process of uploading.
When you need to upload files by dragging and dropping.
Avatars  component for uploading avatar image
Examples 🌈
No response
Motivation 🔦
No response

Heya @mohammad19974, thanks for the suggestion! Added the "waiting for 👍" to gauge the community's interest in having this component — it help us prioritize! :)

hello,
I think adding an upload component would be a great idea.
It would be really helpful especially when creating forms. Also, It could simply for all of us the implementation of file uploads.

authors: EyaOuenniche danilo-leal mohammad19974


text:
[Popover] Popover does not lock the scroll on mobile.

Steps to reproduce
Link to live example: https://mui.com/material-ui/api/popover/
The scroll is not properly locked when Popover is opened. The bug can be reproduced on mobile devices in Chrome or Safari.
Steps:
https://github.com/mui/material-ui/assets/95311814/e96182ab-eee3-4384-992a-d1c434ac8c8f

Open the page with Popover on mobile.
Start scrolling.
Press the "Open Popover" button.
Keep scrolling.
Observe that the scroll is not locked.

Current behavior
If you scroll the page on mobile and then click on the Popover button the scroll is not locked.
Expected behavior
The scroll should be locked when Popover is opened on mobile.
Context
No response
Your environment
The bug can be reproduced on the official MUI website. It was tested on iPhone 15 in Safari and Chrome.
Search keywords: Popover scroll lock mobile

Duplicate of #5750

authors: ZeeshanTamboli alfaodine


text:
Material UI v6 + Remix + Vite running with “Prop className did not match” error

Steps to reproduce
Execute the following repository,

https://github.com/onozaty/remix-prisma/tree/mui-v6

Steps:

Open with DevContainer
npm run dev
Open http://127.0.0.1:5173/ in your browser

Current behavior
The following will appear in your browser's console
chunk-NUMECXU6.js?v=cbdf64e9:521 Warning: Prop `className` did not match. Server: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-5iifl-MuiPaper-root-MuiAppBar-root" Client: "MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionStatic css-nt0iva-MuiPaper-root-MuiAppBar-root"
    at header
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Paper2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:1478:17)
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at AppBar2 (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:4366:17)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Box3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3025:19)
    at div
    at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-56J7IAOU.js?v=cbdf64e9:528:45
    at Container3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:4495:19)
    at App
    at body
    at html
    at Layout (http://127.0.0.1:5173/app/root.tsx:9:3)
    at RenderedRoute (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4279:5)
    at RenderErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4239:5)
    at DataRoutes (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5270:5)
    at Router (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:4624:15)
    at RouterProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:5085:5)
    at RemixErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:7146:5)
    at RemixBrowser (http://127.0.0.1:5173/node_modules/.vite/deps/@remix-run_react.js?v=cbdf64e9:8692:46)
    at DefaultPropsProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3404:3)
    at RtlProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3380:3)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3336:5)
    at ThemeProvider2 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-POD3YRTN.js?v=cbdf64e9:3487:5)
    at ThemeProviderNoVars (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:858:10)
    at ThemeProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@mui_material.js?v=cbdf64e9:940:3)
    at MuiProvider (http://127.0.0.1:5173/app/mui.provider.tsx:12:3)

Expected behavior
Expect no errors in the browser console.
Context
This did not occur with Material UI v5.
The code for v5 is as follows.

https://github.com/onozaty/remix-prisma/tree/mui-v5

When I upgraded from Material UI v5 to v6, I initially got the following error with npm run dev.
3:39:56 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material"
|- /workspaces/remix-prisma/node_modules/@mui/icons-material/esm/index.js:1
export { default as Abc } from './Abc';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53536:15)
    at async ssrImport (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53392:16)
    at async eval (/workspaces/remix-prisma/app/routes/customers+/index.tsx:5:31)
    at async instantiateModule (file:///workspaces/remix-prisma/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5)

To avoid this, the following settings are added in vite.config.ts.
  ssr: {
    noExternal: [/^@mui\//],
  },

Now the screen itself can be displayed, but there is an error in the browser console.
Your environment

npx @mui/envinfo
  System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    npm: 10.7.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  6.1.2
    @mui/icons-material: ^6.1.2 => 6.1.2
    @mui/material: ^6.1.2 => 6.1.2
    @mui/private-theming:  6.1.2
    @mui/styled-engine:  6.1.2
    @mui/system:  6.1.2
    @mui/types:  7.2.17
    @mui/utils:  6.1.2
    @types/react: ^18.2.20 => 18.3.3
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.1.6 => 5.5.3

Search keywords: Remix Vite

Same here.
v6.0.2 works like v5 without any vite.config.ts updates.
My workaround (only works for v6.1.2, not for v6.1.1) is to update vite.config.ts as below:
  ssr: {
    noExternal: [process.env.NODE_ENV === 'development' ? '@mui/icons-material' : /^@mui\//],
  },

In my case, remix vite:dev needs @mui/icons-material, and remix vite:build needs /^@mui\//. 🤯

Hey @onozaty, thanks for the report, and sorry for the late reply.
I'm unable to run your repro. May I ask you to provide further details (maybe a video) on how to run it? I'm stuck so far as I'm unclear where I should run npm run dev. Running it on remix-prisma doesn't work. I've never used DevContainer before so I'm not familiar with it.
Thanks @s-hashimo for chiming in, about your investigation:

"v6.0.2 works like v5 without any vite.config.ts updates."

This checks out as some minor ESM changes were introduced in 6.1.0 for the icons package

"My workaround (only works for v6.1.2, not for v6.1.1)"

This doesn't make sense as no changes to the icons package were introduced in 6.1.2, could it be a caching issue on your side that's installing stale packages?

could you provide a minimal repro of the behavior you're experiencing? This would help debug whatever is happening.

Thanks for replying. 😃
Here is my minimal? repro: https://github.com/s-hashimo/remix-vite-mui
And here are the commands to reproduce:
npm i
npm run dev

Warning: Prop className did not match. Server: "MuiTypography-root MuiTypography-h4 css-11pxkfa-MuiTypography-root" Client: "MuiTypography-root MuiTypography-h4 css-ys13zx-MuiTypography-root" Error Component Stack

It's based on the following two packages:

https://github.com/mui/material-ui/tree/f56770186cef04959ef733fffddd1b86683cecda/examples/material-ui-remix-ts
https://github.com/remix-run/remix/tree/9f06bfb7397daa8a3719552e2cbda7c4c8d06a38/templates/express

I suppose that the type=module in package.json causes "SyntaxError: Unexpected token 'export'".

Hey @onozaty, thanks for the repro.
I spent some time debugging this, but unfortunately, I still haven't figured out what's happening. I checked that the className mismatch warning also happens when using v5.16.6 (the latest v5 version) with the app you shared. Do you know of a v5 version in which this didn't happen?
We've had similar issues with next: https://github.com/mui/material-ui/issues/29428
I'm not seeing this error in our Remix example: https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts, so if it's a possibility for you to start using that, then it might help. It might also help to compare with your current setup.
If you confirm that this is also happening in v5, I think we can accept the issue as a remix integration improvement.

Thank you for working on this issue.

I spent some time debugging this, but unfortunately, I still haven't figured out what's happening. I checked that the className mismatch warning also happens when using v5.16.6 (the latest v5 version) with the app you shared. Do you know of a v5 version in which this didn't happen?

This did not occur in v5.16.7.
Below is the branch that confirmed it.

https://github.com/onozaty/remix-prisma/tree/mui-v5

We've had similar issues with next: #29428
I'm not seeing this error in our Remix example: https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts, so if it's a possibility for you to start using that, then it might help. It might also help to compare with your current setup.

This example provided by MUI does not use Vite.
The templates provided by Remix use Vite, and it is common practice to use Vite.
I think it will be easier for Remix users to use MUI if it becomes Vite-compatible as a template for MUI.
Thanks.

I get the SyntaxError: Unexpected token 'export' error here as well: node 20.17.0, remix 2.14.0, vite 5.4.10 and upgrading from mui 5.16.7 to 6.1.7. With node 22.11.0, the error changes to the below. Looks like in node 20 it's trying the import as cjs, but on node 22 it tries it as esm, and it's failing in either case:

Directory import '/Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@6.1.7_@mui+material@6.1.7_@emotion+react@11.13.3_@types+react@18.3.12_rea_fjnihmbedo2nhrt4stuurnmvmi/node_modules/@mui/material/utils' is not supported resolving ES modules imported from /Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@6.1.7_@mui+material@6.1.7_@emotion+react@11.13.3_@types+react@18.3.12_rea_fjnihmbedo2nhrt4stuurnmvmi/node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
Did you mean to import "@mui/material/node/utils/index.js"?
at finalizeResolution (node:internal/modules/esm/resolve:251:11)
at moduleResolve (node:internal/modules/esm/resolve:913:10)
at defaultResolve (node:internal/modules/esm/resolve:1037:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12)
at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:599:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38)
at ModuleJob._link (node:internal/modules/esm/module_job:132:49

Hmm I tried this and the errors changed a little:
-    "@mui/icons-material": "5.16.7",
-    "@mui/material": "5.16.7",
-    "@mui/system": "6.1.7",
+    "@mui/icons-material": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/icons-material",
+    "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/material",
+    "@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/32a26054/@mui/system",

Node 20:

Unexpected token 'export'
at wrapSafe (node:internal/modules/cjs/loader:1378:20)
at Module._compile (node:internal/modules/cjs/loader:1428:41)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
at cjsLoader (node:internal/modules/esm/translators:346:17)
at ModuleWrap. (node:internal/modules/esm/translators:286:7)
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at nodeImport (file:///Users/samir/Projects/client-portal/node_modules/.pnpm/vite@5.4.

Node 22:

Cannot find module '/Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@https+++pkg.csb.dev+mui+material-ui+commit+32a26054+@mui+icons-material_@cgxqzfntsowwhxpfsrw3v3vtae/node_modules/@mui/icons-material/esm/Abc' imported from /Users/samir/Projects/client-portal/node_modules/.pnpm/@mui+icons-material@https+++pkg.csb.dev+mui+material-ui+commit+32a26054+@mui+icons-material@_cgxqzfntsowwhxpfsrw3v3vtae/node_modules/@mui/icons-material/esm/index.js

it looks like we have to do both of those for the icons package as well to get rid of this issue.

👍 yes, full esm support for node.js is planned for v8.

To clarify, does this mean it won't be usable until v7, or is there an earlier patch coming?

@mikezx6r may I ask you which package manager are you using?
@Janpot can you think of a way to workaround this in the meantime?
I tried patching, but couldn't get it working with npm (and couldn't repro with yarn or pnpm)
In the meantime, if anyone wants to give it a try, I think following a similar approach as this comment might work, let us know.

I am using npm. Will take a look at link to see if it helps.On Dec 3, 2024, at 14:32, Diego Andai @.***> wrote:
@mikezx6r may I ask you which package manager are you using?
@Janpot can you think of a way to workaround this in the meantime?
I tried patching, but couldn't get it working with npm (and couldn't repro with yarn or pnpm)
In the meantime, if anyone wants to give it a try, I think following a similar approach as this comment might work, let us know.
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

@DiegoAndai  I've read the comment, but it claims that icons-material has already been fixed.
In my case, that's the ONLY package that is giving me issues. Here's a link to a small project that demonstrates the issue.
https://github.com/mikezx6r/react-router-mui-icon-issue
Let me know if there's anything else I can do for this, or if I didn't understand the suggestions in the comment correctly

@Janpot can you think of a way to workaround this in the meantime?

I haven't tested this, but since you're already patching, you could try to patch the icons package and remove its exports field in the package.json. Then add this alias to your vite config.
I'm sorry, I'll still be out a bit longer (paternity leave). Should be back by January.

In my case, that's the ONLY package that is giving me issues.

If the icons package is the only one giving issues, have you tried pinning it to a previous version? That might work, and you can unpin it once v7 is released. This package won't receive significant updates in v6, so I don't expect you missing anything if you pin it to a previous version that works.
Let me know.

@DiegoAndai pinning icons-material to v5 solved my problem 👍
Thanks for the suggestion!

I'm glad to hear that @samausir. I think you should also be able to use v6.0.2.
When v7 comes out, you should be able to migrate to it and not have this issue.

Can confirm v6.0.2 works too 👍

@DiegoAndai
Hi mate,
We have the same issue with jest (ESM).
Details:

/Users/chengjia/Projects/apra-amcos-portals-frontend/node_modules/@mui/icons-material/esm/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as Abc } from "./Abc.js";
                                                                                ^^^^^^

SyntaxError: Unexpected token 'export'

It happens after upgraded to v6.0.2
Thanks

Still happening. I just tested it with a clean project. See the issue: #44822

authors: DiegoAndai Janpot cjnoname lvisb mikezx6r onozaty s-hashimo samausir


text:
[core] Save a few bytes

This is a follow-up on #34289, I'm giving up on the idea of having title !== '' && title !== node an invalid value. We can be less opinionated about the best practice. Instead:

I believe we can shorten the logic
While I am at it, I'm continuing the migration to use screen as much as possible that Sebastian started. It's supposed to be simpler to work with.

What's the rationale behind using screen in favor of render result methods?

What's the rationale behind using screen in favor of render result methods?

@michaldudak The rationale was that it's easier to work with, meaning when you write a new test, it's easier to access a global variable than to go up to the render() to get your helper, and then go down to use it. This problem alone could be solved by writing something like const mountingPoint = render( but we never mount two components at the same time (I assume nor will we ever need to), so why not move this even one scope further up?
@eps1lon Does it match with the value you envision?
I can revert the changes in the tests if we are not comfortable with them.

What's the rationale behind using screen in favor of render result methods?

render results will break once you introduce a Portal. screen is easier to c&p around.

:+1: I'm fine with this change. My only concern is that it doesn't really fall into the "Save a few bytes" label. Could we make it a separate PR?

authors: eps1lon michaldudak oliviertassinari


text:
[docs-infra] Revamp the product switcher design

[x] I have followed (at least) the PR section of the contributing guide.

Still a work in progress.
Might fix: https://github.com/mui/material-ui/issues/41183

Looks amazing. We need to fix the keyboard navigation.

We need to fix the keyboard navigation.

Yeah, so, that's technically fixed compared to the production version (you can tab through the options), as I switched from using the Menu to using Popper + MenuList. However, I understand that to be inaccurate as in menus, we should be able to navigate via arrow keys instead of tabs (afaik). I had tried using Menu Items, still with the Menu, to see if I'd get all of that for free, but for some reason, that wasn't working properly.

Uhm, I can do it by focusing on the docs button and then pressing enter.
https://github.com/mui/material-ui/assets/67129314/feddc6fd-fe6a-42f5-bb1f-9b4008d04756
Pressing esc while the button is focused doesn't close the Popper, though (something else to fix, I guess).

Oh, I was trying from the home page 😅
https://github.com/mui/material-ui/assets/7225802/834f6c87-b0bb-4ab1-87d7-05fa20cb5d8b

Yeah, it's expected not to work on the marketing page's navbar—I haven't touched the code there given I'm considering removing the Docs button altogether (https://github.com/mui/material-ui/pull/42540).

Even better!

Should the navigation use arrows or tabs? IMO, arrows feel more natural, though I'm not sure what the best approach is.

So, it's not even a matter of feeling, but rather accuracy to the the ARIA patterns specs. The prod implementation, using the Menu component, didn't have any keyboard navigation interaction working at all. I tried some different approaches on this PR (like using the Menu Item as the base component for the ProductItem custom component), to see if I'd get keyboard navigation for free from these Material UI components, but nope, it continued to not work (couldn't figure out yet exactly why). On the flip side, using the Popper, together with the Menu List (inspired by this), sort of fixed the keyboard nav issue (we can now focus on the menu button, open the popover, and tab through the menu items), but that isn't accurate to the menu pattern specs. That said, I'm unsure what's the best solution here: keep it as I've implemented here, or figure out why the Menu arrow keys keyboard nav is not properly working. I think having at least the Tab-based keyboard nav unlocked is an improvement we could put out. Next step could be to make it accurate by changing it to arrow keys instead. Unless someone has a clear idea on how to fix all of this and make it accurate to the specs right away!

I think we could use some animations and micro-interactions to spice things up a bit

Uhm... will think about it. 🤔

It's missing a few things like

ESC to close
When you tab outside of it it should close.
Arrow key navigation
I just had a quick look but I think the popup is missing an aria role too, maybe not.

But in any case, neither of them are accessible currently, and this is an improvement. So I think it could be shipped.

ESC to close

It does close on esc if you're focused on a menu item; it doesn't otherwise because opening the popover doesn't automatically put focus on the first menu item (something that I was expecting to get for free from the Material components; there's something strange).

Arrow key navigation

That and tab navigation or that and then remove tab navigation (i.e., you can only navigate through via arrow keys)? That's the fundamental question I had with this PR.
Popup role is missing yeah, good catch 👍

Looks fantastic @danilo-leal!
We're looking to divide the Toolpad section into Studio and Core in the upcoming month - I'm assuming we could do something like this when the time comes?

@bharatkashyap yeah, exactly—looks great!

The keyboard navigation is broken because you're breaking the contract with the MenuList children it's expecting an array of elements (one element per item to focus) and you provide a single Box component
Since the material-ui MenuList does not allow to manage nested component, I'm not able to do the structure

If I do so, the li components get the focus and so pressing Enter will not trigger the link.
It might be doable with base-ui since

Menu Item components don't have to be direct children of a Menu component. You can wrap them in any component needed to achieve the desired appearance.

https://mui.com/base-ui/react-menu/#wrapping-menu-items
Feel free to revert my commits

Wouldn't use the current shape of the Base UI component now—maybe in the near future once the revamped Menu API is more ironed out & released. In any case, the only problem I see with your changes is what I said in the comment above: the Menu List is an ul tah and it's invalid HTML to have it with any other children other than li. The current markup is:

I tried doing <MenuList component="div" ... /> and changing the forwarded type, but then TypeScript is just unhappy for a few reasons there. Not sure what's the fix for this yet. 🤔

TypeScript is just unhappy for a few reasons there. I'm not sure what the fix for this is yet. 🤔 Afraid it requires changing the whole thing 😖

TS aspect is fixed :)

@alexfauquette love it, thank you! Let me know if this is good to go 😃

authors: aarongarciah alexfauquette bharatkashyap colmtuite danilo-leal


text:
Visually separate props form component Id and name

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡
Currently, the right panel shows everything together. We should have some visual separation based on the type of items.
Moreover, we should also separate UI props from data props.

i'm going to separate some "layout" props in this PR https://github.com/mui/mui-toolpad/pull/804, but it still doesn't look great, I can still at least try to improve the spacing there.

Moreover, we can also look into separating UI props from data props.

We would need something like property categories to do something like this, so we could group them by category. But this would mean every prop would need to have its own category, which I'm not sure would make sense in every case.
So for now I just tried to make the order of the props in each component a bit more logical, but if we want to categorize and split thing I guess we can do it separately.

repo: mui/mui-toolpad


text:
Update microsoft-azure-sb-connector.adoc

Documentation for send operation timed out exception

Since Diane already added this to the manual, I'm closing this PR. Thanks, Ale!

Wait, I don't have permissions! @dhirsch1 please close this PR.

I am not able to close this PR either. I approved the changes to see if that would let me close it but it did not work.

I think the originator might have to close it - Alejandro.

authors: alejandrodifiore dhirsch1 martinpaoloni

repo: mulesoft/docs-mule-runtime


text:
请求支持quest2浏览器

VR设备自带的浏览器。
如果没设备的话可能不太好支持，先占个坑。。。

UA:
Mozilla/5.0 (X11; Linux x86_64; Quest 2) AppleWebKit/537.36 (KHTML, like Gecko) OculusBrowser/24.4.0.22.60.426469926 SamsungBrowser/4.0 Chrome/106.0.5249.181 VR Safari/537.36

repo: mumuy/browser