playcanvas
Sorry, the latest version of Rollup still has path issues that cause startup anomalies
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
> [email protected] develop
> concurrently --kill-others "npm run watch" "npm run serve"
[1]
[1] > [email protected] serve
[1] > serve dist -C
[1]
[0]
[0] > [email protected] 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
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.
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.
“(!) 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; "
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; } }
I have the same problem, tried a whole bunch of things but with no success.
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});`;
}
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.