Does not match corresponding path with next.js

[yudi-tan]

I installed react-desktop via npm and then copied one of the code-blocks to test it out in my next.js application but I came across this error:

Error in react-desktop/macOs Module not found: Error: [CaseSensitivePathsPlugin] /Users/yuditan/projects/personal_website/node_modules/react-desktop/src/Box/macOs/index.js does not match the corresponding path on disk box. ModuleNotFoundError: Module not found: Error: [CaseSensitivePathsPlugin] /Users/yuditan/projects/personal_website/node_modules/react-desktop/src/Box/macOs/index.js does not match the corresponding path on disk box. at factoryCallback (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/Compilation.js:276:40) at factory (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/NormalModuleFactory.js:235:20) at applyPluginsAsyncWaterfall (/Users/yuditan/projects/personal_website/node_modules/webpack/lib/NormalModuleFactory.js:70:21) at /Users/yuditan/projects/personal_website/node_modules/tapable/lib/Tapable.js:265:18 at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:156:15) at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:109:7) at that.fileExistsWithCase (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:109:7) at that.getFilenamesInDir (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:97:7) at fs.readdir (/Users/yuditan/projects/personal_website/node_modules/next/node_modules/case-sensitive-paths-webpack-plugin/index.js:63:5) at /Users/yuditan/projects/personal_website/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:70:14 at _combinedTickCallback (internal/process/next_tick.js:95:7) at process._tickCallback (internal/process/next_tick.js:161:9)

[gabrielbull]

Does that file exists?

/Users/yuditan/projects/personal_website/node_modules/react-desktop/src/Box/macOs/index.js

[yudi-tan]

Yup! It exists. These are the steps to recreate this error: 1) Start a new empty npm project with npm init, then "npm install --save react react-dom next react-desktop" 2) Since i'm using next.js, i created a "pages" folder and have an "index.js" in that folder for the main "/" route. Then, I copied the example code from http://reactdesktop.js.org/docs/mac-os/window and this error is shown. I can probably try with create-react-app and see if the same error exists, but it may be a compatability issue with next.js?

[yudi-tan]

So i created a brand new CRA and replaced App.js with the same codeblock from the website and the same error is shown "./node_modules/react-desktop/macOs.js Module not found: /Users/yuditan/projects/personal_website/test/testapp/node_modules/react-desktop/src/Box/macOs/index.js does not match the corresponding path on disk box."

[yudi-tan]

Figured out -- the issue is with case sensitivity. For instance, i modified all the "require" statements in macOs.js such that the file paths (specifically, the folder names) match exactly to those in /src. For instance, instead of "var _macOs = require("./src/Box/macOs");" , by changing it to "var _macOs = require("./src/box/macOs");", fixes this error. However, there are simply too many instances where there is an inconsistency between the capitalization of the file path and the actual folder name. Is there a better way to deal with this?

[gabrielbull]

Can you try the new version, 0.3.5?

[yudi-tan]

0.3.5 fixed the case sensitivity issues but there are some more bugs i found -- 1) i had to manually go to src/TitleBar/macOs/Controls and change the codes from "window && window.devicePixelRatio > 1.5" to "this.window && this.window.devicePixelRatio > 1.5" in order to resolve the new issues. Similarly for minimize.js and resize.js.

Once those issues were resolved, the components finally rendered, but there was still a bug that i'm unable to figure out. In the example code, the component was supposed to be rendered inside the window box while the component was supposed to be the title. And whenever i refresh the next.js server, every is displayed and mounted accurately, just like the example on the documentation website. However, after a split second, it automatically re-renders and things become messed up. I've attached a screenshot of how it looks like after the auto-refresh after a split second. The component now resides in the title and the title can no longer be seen.

[gabrielbull]

If you still experience the second issue, please open a separate issue for it. Thanks.