mjml-app
mjml-app copied to clipboard
Can't open projects or create files with plus or ampersand character(s) in the path
Describe the bug
When creating or opening a project that contains a "special" character nothing is shown. Trying to create a new file in the project displays the error: Error creating file. The interesting thing is that it is able to create and delete projects with a special character in the path, just not open them.
I had a plus (+) character in the path and it looks like issue #225 had the same problem with an ampersand (&) character. I say "special" as plus (+) and ampersand (&) don't work but other special characters, e.g. a dash (-), do. These are both valid characters in a path on Linux, Windows and OSX.
The developer console shows this error which seems pertinent:
index.html#/project?path=D:\SB\Swanbarton Limited\SB - 2755 IFBF 2020\Website + Eventbee\Custom Order Emails\IFBF 2020 MJML Templates:
1 Uncaught (in promise) Error: ENOENT: no such file or directory, scandir 'D:\SB\Swanbarton Limited\SB - 2755 IFBF 2020\Website Eventbee\Custom Order Emails\IFBF 2020 MJML Templates'
It shows that the plus (+) character has been replaces with a space which of cause results in a no such file or directory error.
To Reproduce
Steps to reproduce the behavior:
- Open MJML App on Windows 10
- Click on 'New project'
- Enter a project name with a special character (e.g. "Test+Project")
- Click on 'Choose template'
- Click on 'Create'
- See app with no contents
- Click on 'New file'
- Enter a new file name (e.g. "newfile")
- Click on 'Create file'
- See error
Error creating file - Click on 'View -> Toggle Developer Tools'
- Click on the 'Console' tab
- See error beginning with
Uncaught (in promise) Error: ENOENT: no such file or directory,
Expected behavior
As a new user, I expected to see some content when creating a new project, not a blank area. When I create a new file I expect the file to be created, not a nondescript error.
When creating a new project, it shouldn't say Location is OK if, in fact, it is not.
When creating a new file, it shouldn't say Ready to create <filename>.mjml if, in fact, it is not.
Screenshots

Environment
- OS: Windows 10
- Version: 1809
- OS Build: 17763.864
- App Version: v2.12.0
A quick test (on Windows) shows that grave (`) exclamation mark (!), pound (£), dollar ($), caret (^) open bracket ((), close bracket ()), dash (-), underscore (_), open curly bracket ({), close curly bracket (}), open square bracket ([), close square bracket (]), tilde (~), at (@), semi-colon (;), comma (,) and full stop (.) all work when creating a project.
Hash (#) behaves the same as plus (+) and ampersand (&) in that it creates the project but can't open it.
Percent (%) pops up the following error and fails to create the project:
at decodeURIComponent (<anonymous>)
at C:\Program Files\MJML\resources\app.asar\node_modules\query-string\index.js:147:36
at Array.forEach (<anonymous>)
at exports.parse (C:\Program Files\MJML\resources\app.asar\node_modules\query-string\index.js:138:17)
at decodeQuery (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\useQueries.js:45:52)
at C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\useQueries.js:75:25
at C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\useBasename.js:67:16
at C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:55:14
at Array.forEach (<anonymous>)
at updateLocation (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:54:15)
at C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:119:56
at C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:90:9
at next (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\AsyncUtils.js:51:7)
at loopAsync (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\AsyncUtils.js:55:3)
at confirmTransitionTo (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:80:31)
at transitionTo (C:\Program Files\MJML\resources\app.asar\node_modules\history\lib\createHistory.js:100:5)
Colon (:), question mark (?) and asterisk (*) show the error ENOENT No such file or directory, mkdir <filepath> as you would probably expect given that they are reserved characters
Percent sign "%" is not working on Mac OSX as Project Name
URIError: URI malformed
at decodeURIComponent (
should be fixed by https://github.com/mjmlio/mjml-app/pull/363, the release will come soon