Build: Windows: File to import not found or unreadable: ssetsstylesheetsshared_utils.scss.

[flexpeace]

Steps to reproduce

1. Followed instructions to build project by typing npm start

What I expected

To build successfully

What happened instead

hild mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/lib/loader.js??ref--6-3!client/login/wp-login/style.scss:
    Entrypoint mini-css-extract-plugin = *

    ERROR in ./client/login/wp-login/style.scss (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/lib/loader.js??ref--6-3!./client/login/wp-login/style.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    $image-height: 47px;
    ^
          File to import not found or unreadable: E:ReactProjectswp-calypso
    ssetsstylesheetsshared_utils.scss.
          in E:\ReactProjects\wp-calypso\client\login\wp-login\style.scss (line 1, column 1)
    Error:
    $image-height: 47px;
    ^
          File to import not found or unreadable: E:ReactProjectswp-calypso
    ssetsstylesheetsshared_utils.scss.
          in E:\ReactProjects\wp-calypso\client\login\wp-login\style.scss (line 1, column 1)
        at options.error (E:\ReactProjects\wp-calypso\node_modules\node-sass\lib\index.js:291:26)
i ｢wdm｣: Failed to compile.

Ready! You can load http://calypso.localhost:3000/ now. Have fun!

Browser / OS version

Google chrome

Screenshot / Video

Context / Source

[alisterscott]

Hi @flexpeace

We have a bootstrap environment which runs vagrant locally and sets everything up for you.

This works on Windows and there is a PR open to use a new version of Ubuntu for the guest operating system - would you like to give it a try?

https://github.com/Automattic/wp-calypso-bootstrap/pull/14

[stephanethomas]

As an aside, I suspect this might be related to https://github.com/Automattic/wp-calypso/pull/27272.

[stephanethomas]

Indeed, this error comes from the fact that we're not correctly using path.join() here.

[stephanethomas]

I've created https://github.com/Automattic/wp-calypso/pull/27418 to address that issue, you can give it a try if you want.

[flexpeace]

Thanks @stephanethomas I will give it a try and revert

[flexpeace]

@stephanethomas @alisterscott The issue is still persisting, the fix didn't work me. Another user has reported this #27418

[Aurelain]

@stephanethomas I believe the actual problem with the line here is that path.join() should not be used. I substituted the data parameter like this and the scss errors disappeared:

data: "@import 'assets/stylesheets/shared/_utils.scss';",

Later edit: this change seems to have negative side-effects. Upon the second npm start, a JavaScript heap error is encountered. Clearing the cache in the build folder will fix this, but this proves that my proposed syntax is not ok.

Unfortunately, I still couldn't render the project in the browser, probably because of an unrelated issue. Chrome console error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#

[stephanethomas]

Thanks for your comment @Aurelain! I've updated https://github.com/Automattic/wp-calypso/pull/27418 accordingly. I'm encountering the exact same browser console error though 😥.

Upon the second npm start, a JavaScript heap error is encountered. Clearing the cache in the build folder will fix this, but this proves that my proposed syntax is not ok.

You can also fix that JavaScript heap out of memory error by allocating more memory with:

set NODE_OPTIONS=--max-old-space-size=2048 && npm start

[patrickmelville]

I tried to get things running on windows 10 today with the same error listed here. It looks like there are several issues floating around specific to windows 10. I ended up working around windows all together by installing the ubuntu terminal as an app for Win 10.

Instructions here did the trick.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[cuemarie]

👋 Hey folks! Since this issue has been inactive for quite some time, KitKat has made the decision to close it.

• Internal reference, for more on this decision: pdqkMK-14B-p2

If you think this issue warrants another look, here are some next steps!

1. Report anew: A new report with more current details and steps to replicate may be the best way to renew attention on this issue. Feel free to refer back to this closed issue in your report!
2. Reopen: If you feel the issue still matches the context/history here, you can also reopen the issue and add fresh logs, screenshots and steps to reproduce.

Thanks for your involvement!