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

Created on 24 Sep 2018  Â·  9Comments  Â·  Source: Automattic/wp-calypso

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

Build OSS Citizen Windows [Type] Bug

All 9 comments

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

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

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

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

Thanks @stephanethomas I will give it a try and revert

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

@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 '#'.

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

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.

Was this page helpful?
0 / 5 - 0 ratings