Sage 9 - npm run build is failing

sage
1

I’m trying to get sage running on my local dev box (Windows 7) so I can play around with it.

I got sage 9 installed. npm install runs without error, but it gives me warnings about skipping optional dependencies fsevents:

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","a

Since it was just a warning, I then tried running npm run build (I haven’t made any changes to the code, I just wanted to make sure this runs - because this is what I run when I do update the code, right??)

That gives me these errors on the command line (am I supposed to be running a separate sass compiler?):

$ npm run build

> sage@9.0.0-alpha.3 build D:\Content\Websites\sage\wp-content\themes\sage-theme
> webpack --progress --config assets/build/webpack.config.js          Hash: 7700b3a22ca624c59726                                                      Version: webpack 2.1.0-beta.22                                                                                                                        Time: 1752ms
                Asset       Size  Chunks             Chunk Names
      scripts/main.js    72.7 kB       0  [emitted]  main
scripts/customizer.js  785 bytes       1  [emitted]  customizer
     scripts/files.js  565 bytes       2  [emitted]  files
  scripts/main.js.map     403 kB       0  [emitted]  main
scripts/customizer.js.map    8.05 kB       1  [emitted]  customizer
 scripts/files.js.map    5.99 kB       2  [emitted]  files
   [3] D:/Dropbox/Content/Websites/sage/wp-content/themes/sage-theme/assets/styles/main.scss 296 bytes {0} [built] [failed] [1 error]
  [12] multi customizer 40 bytes {1} [built]
  [13] multi files 16 bytes {2} [built]
  [14] multi main 52 bytes {0} [built]
+ 11 hidden modules

ERROR in D:/Dropbox/Content/Websites/sage/wp-content/themes/sage-theme/assets/styles/main.scss
Module parse failed: D:\Dropbox\Content\Websites\sage\wp-content\themes\sage-theme\assets\styles\main.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "common/variables";
|
| // Import npm dependencies
 @ multi main

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Dev\\nodejs\\node.exe" "C:\\Users\\abby\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v4.6.0
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! sage@9.0.0-alpha.3 build: `webpack --progress --config assets/build/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sage@9.0.0-alpha.3 build script 'webpack --progress --config assets/build/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sage package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --progress --config assets/build/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs sage
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls sage
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Content\Websites\sage\wp-content\themes\sage-theme\npm-debug.log

And then this ELIFECYCLE error that comes from events.js (is that related to my missing fsevents dependency?) in the npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Dev\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\abby\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@3.10.8
3 info using node@v4.6.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle sage@9.0.0-alpha.3~prebuild: sage@9.0.0-alpha.3
6 silly lifecycle sage@9.0.0-alpha.3~prebuild: no script for prebuild, continuing
7 info lifecycle sage@9.0.0-alpha.3~build: sage@9.0.0-alpha.3
8 verbose lifecycle sage@9.0.0-alpha.3~build: unsafe-perm in lifecycle true
9 verbose lifecycle sage@9.0.0-alpha.3~build: PATH: C:\Users\abby\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;D:\Content\Websites\sage\wp-content\themes\sage-theme\node_modules\.bin;C:\Program Files\VanDyke Software\Clients;C:\ProgramData\Oracle\Java\javapath;C:\dev\utils;C:\Dev\cygwin\bin;C:\Program Files (x86)\Git\cmd;C:\PROGRA~2\Eps13\bin;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\WinMerge;C:\Program Files (x86)\Skype\Phone;C:\Program Files\Common Files\Autodesk Shared;C:\Program Files (x86)\Autodesk\Backburner;C:\Dev\xampp\php;C:\Dev\nodejs;C:\ProgramData\ComposerSetup\bin;C:\Users\abby\AppData\Roaming\Dashlane\4.6.0.17042\bin\Firefox_Extension\{442718d9-475e-452a-b3e1-fb1ee16b8e9f}\components;C:\Users\abby\AppData\Roaming\Dashlane\4.6.1.18109\bin\Firefox_Extension\{442718d9-475e-452a-b3e1-fb1ee16b8e9f}\components;C:\Users\abby\AppData\Roaming\npm;C:\Users\abby\AppData\Roaming\Composer\vendor\bin
10 verbose lifecycle sage@9.0.0-alpha.3~build: CWD: D:\Content\Websites\sage\wp-content\themes\sage-theme
11 silly lifecycle sage@9.0.0-alpha.3~build: Args: [ '/d /s /c',
11 silly lifecycle   'webpack --progress --config assets/build/webpack.config.js' ]
12 silly lifecycle sage@9.0.0-alpha.3~build: Returned: code: 2  signal: null
13 info lifecycle sage@9.0.0-alpha.3~build: Failed to exec build script
14 verbose stack Error: sage@9.0.0-alpha.3 build: `webpack --progress --config assets/build/webpack.config.js`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (C:\Users\abby\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Users\abby\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:829:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid sage@9.0.0-alpha.3
16 verbose cwd D:\Content\Websites\sage\wp-content\themes\sage-theme
17 error Windows_NT 6.1.7601
18 error argv "C:\\Dev\\nodejs\\node.exe" "C:\\Users\\abby\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v4.6.0
20 error npm  v3.10.8
21 error code ELIFECYCLE
22 error sage@9.0.0-alpha.3 build: `webpack --progress --config assets/build/webpack.config.js`
22 error Exit status 2
23 error Failed at the sage@9.0.0-alpha.3 build script 'webpack --progress --config assets/build/webpack.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the sage package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack --progress --config assets/build/webpack.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs sage
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls sage
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
2

it seems to me you’re missing the node-sass library. try running npm i node-sass

3

Thanks, that does make sense.

In the end I wound up resetting my dev (node, composer, webpack) environment and going with sage 8.5 instead. The book is really great and helps me understand what is going on (which I was lost on with 9 since the book wasn’t updated for it). And so now I’ve got everything working with 8.5, going to wait on 9 until it’s out of beta and the instructions are all up to date.

Thanks for replying though! I’m not sure if should somehow mark this thread as no longer an issue for me?

1 Like
4

You can mark Nicolo_Sacchi 's response as the solution using the check box near the like button:

(if it’s there, I’m not sure if it appears in every thread)

5

Hello,

I’m having exactly the same problem.
However the npm i node-sass didn’t work.

Here is my npm log file:
0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Users\\HugoSilva\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using npm@3.10.8 3 info using node@v4.6.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle sage@9.0.0-alpha.3~prebuild: sage@9.0.0-alpha.3 6 silly lifecycle sage@9.0.0-alpha.3~prebuild: no script for prebuild, continuing 7 info lifecycle sage@9.0.0-alpha.3~build: sage@9.0.0-alpha.3 8 verbose lifecycle sage@9.0.0-alpha.3~build: unsafe-perm in lifecycle true 9 verbose lifecycle sage@9.0.0-alpha.3~build: PATH: C:\Users\HugoSilva\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;C:\Users\HugoSilva\personal\hugosilva\web\app\themes\hugosilva\node_modules\.bin;C:\Users\HugoSilva\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\cmd;C:\Program Files\ConEmu\ConEmu\Scripts;C:\Program Files\ConEmu;C:\Program Files\ConEmu\ConEmu;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Skype\Phone;C:\Program Files\Git\cmd;C:\HashiCorp\Vagrant\bin;C:\xampp\php;C:\Program Files\nodejs;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\GnuWin32\bin;C:\Users\HugoSilva\AppData\Roaming\Composer\vendor\bin;C:\Program Files (x86)\Notepad++;C:\Ruby23-x64\bin;C:\Users\HugoSilva\AppData\Roaming\npm;C:\Users\HugoSilva\AppData\Roaming\Composer\vendor\bin;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl;C:\Users\HugoSilva\configurations\bashscripts 10 verbose lifecycle sage@9.0.0-alpha.3~build: CWD: C:\Users\HugoSilva\personal\hugosilva\web\app\themes\hugosilva 11 silly lifecycle sage@9.0.0-alpha.3~build: Args: [ '/d /s /c', 11 silly lifecycle 'webpack --progress --config assets/build/webpack.config.js' ] 12 silly lifecycle sage@9.0.0-alpha.3~build: Returned: code: 2 signal: null 13 info lifecycle sage@9.0.0-alpha.3~build: Failed to exec build script 14 verbose stack Error: sage@9.0.0-alpha.3 build:webpack --progress --config assets/build/webpack.config.js14 verbose stack Exit status 2 14 verbose stack at EventEmitter.<anonymous> (C:\Users\HugoSilva\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:255:16) 14 verbose stack at emitTwo (events.js:87:13) 14 verbose stack at EventEmitter.emit (events.js:172:7) 14 verbose stack at ChildProcess.<anonymous> (C:\Users\HugoSilva\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14) 14 verbose stack at emitTwo (events.js:87:13) 14 verbose stack at ChildProcess.emit (events.js:172:7) 14 verbose stack at maybeClose (internal/child_process.js:829:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) 15 verbose pkgid sage@9.0.0-alpha.3 16 verbose cwd C:\Users\HugoSilva\personal\hugosilva\web\app\themes\hugosilva 17 error Windows_NT 10.0.10586 18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\HugoSilva\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 19 error node v4.6.0 20 error npm v3.10.8 21 error code ELIFECYCLE 22 error sage@9.0.0-alpha.3 build:webpack --progress --config assets/build/webpack.config.js22 error Exit status 2 23 error Failed at the sage@9.0.0-alpha.3 build script 'webpack --progress --config assets/build/webpack.config.js'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the sage package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error webpack --progress --config assets/build/webpack.config.js 23 error You can get information on how to open an issue for this project with: 23 error npm bugs sage 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls sage 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]
Do you have any idea why this is happening. Its a clean install, only changed the url for the website.

6

Having the exact same issue here as well…

7

Also having this issue, I wonder if it is a Windows only issue.

Mine is also a clean install, with no file changes.

I’m also getting several linebreak errors;

‘5:15 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style’

and the fsevents warning mentioned above;

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.14: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”})

8

I was having the same issue yesterday on a Windows machine (with a clean install). I just tried on a Mac and there is no such issue. So, FWIW, I think this is a Windows-only issue.

Note: I haven’t tried anything on Linux.

9

My issue was solved (for now, at least) by creating a .babelrc in the root directory of my theme with the following:

{
“presets”: [“es2015”]
}

10

I also had an issue where I needed to convert line-endings from CRLF (windows default) to LF (unix default). Most text-editors have an option to do this, if you’re not sure what that means.

Don’t take any of this as scripture, I’m still just learning as I go.

11

After much trial and error I was able to find more info.

Despite the error, everything gets compiled nicely, and the error disappears if you have no js errors or warnings.

So it seems its just a default error because it found js errors. With a clean install on windows you should get just the line break error on your js files.
Which you can make disappear with the .babelrc file.

12

The .babelrc trick did not help me at all. Any other ideas, people? Seems like I get all the same errors as you did;

C:\xampp\htdocs\sesongkort\wp-content\themes\sesongkort\assets\scripts\util\camelCase.js
1:60 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style
2:93 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style
3:66 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style
4:12 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style
5:15 error Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style

And so on, and so on in the JS-files in the assets directory.

13

The error is pretty clear and was already discussed by taylor.

14

Sorry, did not see that post. This fixed it for me, easy to fix in Sublime. Thanks for pointing in the right direction, @kalenjohnson

15

I have the same issues.

I created .babelrc and run command again:
npm build run
but it still shows an error like:

Failed at the sage@9.0.0-alpha.3 build script ‘webpack --progress --config assets/build/webpack.config.js’.

I also using Windows 7.

16

taylor’s advise worked perfectly. Thought fixing all files by hand was a pain ;). Cheers anyways!

17

I’ve been struggling with same problem on macOS and Ubuntu, the problem was with my es6 syntax, just look in your dist files for more info :slight_smile: