Sorry, the latest version of Rollup still has path issues that cause startup anomalies

Question

Sorry, the latest version of Rollup still has path issues that cause startup anomalies

TonyDua opened this issue 2 months ago · 8 comments

Hello! I just pulled the latest version from your repository into my local repository.
I found that Rollup still has issues, which can result in a blank page with no content after starting the service.
Here is my platform configuration and error log; I will mask my personal local folder path.
I hope you can take the time to resolve this issue, thank you very much!

My platform information is:

Windows 11 23H2 22631.3880
node.js v20.11.1

The error log is:

(base) PS C:\UserData\AI_Workstation\supersplat> npm run develop

> supersplat@1.1.0 develop
> concurrently --kill-others "npm run watch" "npm run serve"

[1]
[1] > supersplat@1.1.0 serve
[1] > serve dist -C
[1]
[0]
[0] > supersplat@1.1.0 watch
[0] > rollup -c -w
[0]
[1]  INFO  Accepting connections at http://localhost:3000
[0] rollup v4.20.0
[0] bundles src/index.ts → dist...
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]     ╷
[0] 104 │ ┌     &:not(.pcui-hidden) {
[0] 105 │ │         display: flex;
[0] 106 │ │     }
[0]     │ └─── nested rule
[0] ... │
[0] 108 │       flex-direction: column;
[0]     │       ^^^^^^^^^^^^^^^^^^^^^^ declaration
[0]     ╵
[0]     node_modules\@playcanvas\pcui\dist\pcui-theme-grey.scss 108:5  @import
[0]     src\ui\style.scss 1:9                                          root stylesheet
[0]
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]      ╷
[0] 1838 │ ┌     &:not(.pcui-hidden) {
[0] 1839 │ │         display: block;
[0] 1840 │ │     }
[0]      │ └─── nested rule
[0] ...  │
[0] 1842 │       margin: 0;
[0]      │       ^^^^^^^^^ declaration
[0]      ╵
[0]     node_modules\@playcanvas\pcui\dist\pcui-theme-grey.scss 1842:5  @import
[0]     src\ui\style.scss 1:9                                           root stylesheet
[0]
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]      ╷
[0] 1838 │ ┌     &:not(.pcui-hidden) {
[0] 1839 │ │         display: block;
[0] 1840 │ │     }
[0]      │ └─── nested rule
[0] ...  │
[0] 1843 │       padding: 0 24px 0 ($element-margin + 2px);
[0]      │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
[0]      ╵
[0]     node_modules\@playcanvas\pcui\dist\pcui-theme-grey.scss 1843:5  @import
[0]     src\ui\style.scss 1:9                                           root stylesheet
[0]
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]      ╷
[0] 1838 │ ┌     &:not(.pcui-hidden) {
[0] 1839 │ │         display: block;
[0] 1840 │ │     }
[0]      │ └─── nested rule
[0] ...  │
[0] 1844 │       height: 24px;
[0]      │       ^^^^^^^^^^^^ declaration
[0]      ╵
[0]     node_modules\@playcanvas\pcui\dist\pcui-theme-grey.scss 1844:5  @import
[0]     src\ui\style.scss 1:9                                           root stylesheet
[0]
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]      ╷
[0] 1838 │ ┌     &:not(.pcui-hidden) {
[0] 1839 │ │         display: block;
[0] 1840 │ │     }
[0]      │ └─── nested rule
[0] ...  │
[0] 1845 │       line-height: 24px;
[0]      │       ^^^^^^^^^^^^^^^^^ declaration
[0]      ╵
[0]     node_modules\@playcanvas\pcui\dist\pcui-theme-grey.scss 1845:5  @import
[0]     src\ui\style.scss 1:9                                           root stylesheet
[0]
[0] WARNING: 17 repetitive deprecation warnings omitted.
[0]
[0] Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
[0] (!) Unresolved dependencies
[0] https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
[0] C:UserDataAI_Workstationsupersplat
ollup-plugin-sassdist/insertStyle.js (imported by "src/ui/style.scss")
[0] created dist in 9.3s
[0] bundles src/sw.ts → dist...
[0] created dist in 1s
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /sw.js
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 8 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /index.html
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 301 in 0 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /manifest.json
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /index.js
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /static/images/screenshot-narrow.jpg
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /static/icons/logo-192.png
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /static/icons/logo-512.png
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 4 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 3 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 2 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 2 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /static/images/screenshot-wide.jpg
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /index
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 301 in 1 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 GET /
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 304 in 1 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 8 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 9 ms
[1]  HTTP  2024/8/16 13:11:53 ::1 Returned 200 in 5 ms
[1]  HTTP  2024/8/16 13:13:21 ::1 GET /sw.js
[1]  HTTP  2024/8/16 13:13:21 ::1 Returned 304 in 1 ms

Answer 1 · 2024-08-16T07:35:01.000Z

Hi @TonyDua ,

I get these messages too, but on my Mac it doesn't stop working, they're essentially warnings. I will try on a windows machine today.

I believe the warnings originate in the underlying PCUI lib.

Answer 2 · 2024-08-16T07:43:22.000Z

Just to add, these messages shouldn't stop your app from running correctly.

Please make sure you're running with the developer console open and (in Chrome) make sure Application->Service Workers->Update on Reload is enabled.

Answer 3 · 2024-08-18T13:41:06.000Z

“(!) Unresolved dependencies
[0] https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
[0] C:UserDataAI_Workstationsupersplat
ollup-plugin-sassdist/insertStyle.js (imported by "src/ui/style.scss") ”

reason:

—— the error originates in rollup-plugin-sass/dist/index.js , line 89 。 in windows , __dirname returns the path string which is contains "\" , not "/". so concat with "/insertStyle.js" create a error path.

I changed:
"const dirPath = __dirname.replace(/\/g, '/');
imports = import ${insertFnName} from '${dirPath}/insertStyle.js';\n; "

Answer 4 · 2024-08-18T13:48:00.000Z

1838 │ ┌ &:not(.pcui-hidden) {
[0] 1839 │ │ display: block;
[0] 1840 │ │ }
[0] │ └─── nested rule
[0] ... │
[0] 1843 │ padding: 0 24px 0 ($element-margin + 2px);
[0] │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
[0] ╵
[0] node_modules@playcanvas\pcui\dist\pcui-theme-grey.scss 1843:5 @import
[0] src\ui\style.scss 1:9 root stylesheet
"[0]
[0] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in & {}. "

These warning just change XXX.scss follow the prompt —— “rap the declaration in & {}.”

example:

//--------------------------------
.line-box {
&.left-box{
position: absolute;
top: 70px;
}
width: 40%;
height: 50px;
display: flex;
line-height: 50px;
}

//------------changed--------------

.line-box {
&.left-box{
position: absolute;
top: 70px;
}
& {
width: 40%;
height: 50px;
display: flex;
line-height: 50px;
}
}

Answer 5 · 2024-08-18T23:56:59.000Z

I have the same problem, tried a whole bunch of things but with no success.

Answer 6 · 2024-08-19T03:19:06.000Z

It works for me.
Change node_modules\rollup-plugin-sass\dist\index.js Line 87

From:

        if (rollupOptions.insert) {
            imports = `import ${insertFnName} from '${__dirname}/insertStyle.js';\n`;
            defaultExport = `${insertFnName}(${out});`;
        }

To:

       if (rollupOptions.insert) {
            const dirname = __dirname.replace(/\\/g,'/')
            imports = `import ${insertFnName} from '${dirname}/insertStyle.js';\n`;
            defaultExport = `${insertFnName}(${out});`;
        }

Answer 7 · 2024-08-19T09:14:40.000Z

If I change the config to store generated css in a file (instead of embedding it encoded in index.js) then this seems to work on windows.

I like the idea of having a readable css file anyway, so I'll submit a PR with change soon.

Answer 8 · 2024-08-20T08:23:55.000Z

Thank you. It's working on windows now.