10 Replies Latest reply on May 22, 2019 9:25 AM by Duncan Mills-Oracle

    Error adding sass to a JET project

    Ivan Dikanev

      Hello,

       

      I'm trying to use theming in my Jet 6.2.0 application.

      When I issue ojet add sass  command, its execution fails with the following:

       

      2119 warn qunit-reporter-junit@1.1.1 requires a peer of qunitjs@* but none is installed. You must install peer dependencies yourself.

      2120 verbose stack Error: node-sass@4.7.2 postinstall: `node scripts/build.js`

      2120 verbose stack Exit status 1

      2120 verbose stack     at EventEmitter.<anonymous> (C:\Users\idikanev\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)

      2120 verbose stack     at EventEmitter.emit (events.js:189:13)

      2120 verbose stack     at ChildProcess.<anonymous> (C:\Users\idikanev\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)

      2120 verbose stack     at ChildProcess.emit (events.js:189:13)

      2120 verbose stack     at maybeClose (internal/child_process.js:970:16)

      2120 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)

      2121 verbose pkgid node-sass@4.7.2

      2122 verbose cwd C:\home\temp\MyApp

      2123 verbose Windows_NT 10.0.17134

      2124 verbose argv "C:\\soft\\nodejs\\node.exe" "C:\\Users\\idikanev\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "node-sass@4.7.2" "--save-dev"

      2125 verbose node v10.15.2

      2126 verbose npm  v6.9.0

      2127 error code ELIFECYCLE

      2128 error errno 1

      2129 error node-sass@4.7.2 postinstall: `node scripts/build.js`

      2129 error Exit status 1

      2130 error Failed at the node-sass@4.7.2 postinstall script.

      2130 error This is probably not a problem with npm. There is likely additional logging output above.

      2131 verbose exit [ 1, true ]

       

      To me it looks like an issue with SASS installation but in JET it's wrapped in ojet add sass command.

      Could you please provide some guidance on how to resolve this?

        • 1. Re: Error adding sass to a JET project
          John 'JB' Brock-Oracle

          Please try running the npm install manually and see if that works for you.

           

          npm install node-sass@4.7.2

           

          We've seen this happen before with some networks.  Doing the manual install often helps.

          • 2. Re: Error adding sass to a JET project
            Ivan Dikanev

            Hello John,

            Thanks for suggestion.

             

            I tried to run ojet add sass command again and ran npm install node-sass@4.7.2 separately.  The result is the same and it looks like it is npm install node-sass@4.7.2 causes the problem.

            The important part of the attached console trace is

            gyp verb check python checking for Python executable "python2" in the PATH

            gyp verb `which` failed Error: not found: python2

            gyp verb `which` failed     at getNotFoundError (C:\home\temp\MyApp1\node_modules\which\which.js:13:12)

            gyp verb `which` failed     at F (C:\home\temp\MyApp1\node_modules\which\which.js:68:19)

            gyp verb `which` failed     at E (C:\home\temp\MyApp1\node_modules\which\which.js:80:29)

            gyp verb `which` failed     at C:\home\temp\MyApp1\node_modules\which\which.js:89:16

            gyp verb `which` failed     at C:\home\temp\MyApp1\node_modules\isexe\index.js:42:5

            gyp verb `which` failed     at C:\home\temp\MyApp1\node_modules\isexe\windows.js:36:5

            gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)

             

            The same trace can be found if I run npm install node-sass@4.7.2 For some reason python is required to build something during the installation.

            But at the same time the command npm install node-sass ran smoothly and installs  node-sass@4.12.0

             

            It probably solves the issue unless JET relies on the specific version of sass.

            Then couple of questions remain:

            1) Do I need to run JET with SASS 4.7.2 to build "supported" solution?

            2) Does ojet add sass  command do anything besides doing npm install? (I guess it does)

            • 3. Re: Error adding sass to a JET project
              John 'JB' Brock-Oracle

              Hi Ivan,

               

              The Python error is because the install will try and "build" the binary if it can't install it directly.  Now that you have node-sass installed by itself, try the ojet add sass one more time and see if it will pickup that you already have a version installed.  I believe it will.

              • 4. Re: Error adding sass to a JET project
                JacobA-ALV

                I've just started trying out Oracle JET and I'm seeing a similar error. I was able to independently install (globally) the latest version of node-gyp and node-sass after reading the install suggestions on their sites and other locations. I'm on Windows 10, had Visual Studio 2017 Pro already installed, and installed Python 2.7 and npm configured python2.7 and msvs_version 2017.

                 

                I can run node-sass on a simple scss file and get the proper css output.

                 

                I think the trouble is in the version node-sass that ojet is currently pointing to. We start out with some warnings about deprecated modules like hawk, sntp, cryptiles, boom, and hoek and jump right into the first error.

                 

                Cannot download "https://github.com/sass/node-sass/releases/download/v4.7.2/win32-x64-64_binding.node"

                HTTP error 404 Not Found

                 

                Compare that URL to the version used on my working install of the latest node-sass https://github.com/sass/node-sass/releases/download/v4.12.0/win32-x64-64_binding.node

                 

                When my gyp output goes from info to ERR! it seems to be in failing to see my build environment or configuring and building sass 4.7.2 where 4.12.0 worked fine for me. My error output finishes up just like yours.

                 

                Is there a way we can get ojet to use a newer working version of node-sass instead of that specific version which seems broken and no longer buildable?

                 

                Thanks!

                Jacob

                • 5. Re: Error adding sass to a JET project
                  Ivan Dikanev

                  No, ojet add sass does not work. It tries to install saas 4.7.2 and it does not care if another version is installed or not.

                  I attached the console trace again. It shows the following:

                  1) ojet create MyApp --template=navdrawer

                  2) cd MyApp

                  3) npm install node-sass

                  4) ojet add sass

                   

                  I have the same situation as Jacob's (Windows 10, Python error, etc.)

                  P.S. To me it feels if we need the exact version of sass then it should be just packaged together with the rest of JET just like Knockout and RequireJS libraries.

                  • 6. Re: Error adding sass to a JET project
                    Ivan Dikanev

                    Small update on my attempt to resolve this issue.

                    I updated JET to  a newly released version 7.0.0 and could successfully add sass functionality to my project (which increased the initial size of the generated project from 131Mb to 142 Mb). Now the node-sass version is 4.11.0

                    It solves my problem under my circumstances since I'm not bound to a particular JET version.

                    • 7. Re: Error adding sass to a JET project
                      John 'JB' Brock-Oracle

                      Glad to hear it's working now Ivan.

                       

                      The size of the environment is the full development environment, not the size of your final app.  that would be the size of just the /web fold after a "build --release" command.  A Starter Template app when build with defaults is about 20mb.

                       

                      --jb

                      • 8. Re: Error adding sass to a JET project
                        JacobA-ALV

                        I was also able to follow the instructions for the FixItFast App demo after installing the latest (7.0.0) version of ojet-cli.

                         

                        I first attempted to use `npm install -g @oracle/ojet-cli@latest --save` and then uninstalled and re-installed because the ojet add sass command was failing in my existing FixItFast attempt from last week with an error, "toolingModule.addsass" is not a function. After proving that it worked fine in a new FixItFast app I resolved the error by upgrading the older project's oraclejet and oraclejet-tooling modules to 7.0.0.

                         

                        Thank-you for the update!

                        Jacob

                        • 9. Re: Error adding sass to a JET project
                          John 'JB' Brock-Oracle

                          Just to close this out in case others are using JET 6.2.0 and are unable to move up to 7.0.0.

                           

                          The node-sass version is hardcoded on purpose.  The CSS (and .scss) files that ship with a version of JET are created with a specific version of node-sass which has been notorious for changing things between versions in a breaking way.  At least they use to.  They seem to have gotten better with this most recent 4.11.0 release.

                           

                          With this said, it appears that the v4.7.2 release of node-sass is no longer available in binary form, for some operating systems and that is blocking the "add sass" feature in JET 6.2.0. (v7.0.0 works because we updated to node-sass 4.11.0).  To manually change the node-sass version to a newer version, you can go to the following file and change the v4.7.2  number to v4.11.0 and then try the "add sass" command again.

                           

                          The file is located in the global npm path.  By default this is normally located under something like (on Windows)

                           

                          <user root>/AppData/Roaming/npm/node_modules/@oracle/oj-cli/node_modules/@oracle/generator-oraclejet/generators/add-sass/index.js

                           

                          In this file, you will find a line that looks like

                           

                          function _npmInstallNodeSass(generator) {
                            try {
                              generator.npmInstall(['node-sass@4.7.2'], { saveDev: true });
                              return Promise.resolve(generator);
                            } catch (err) {
                              return Promise.reject(commonMessages.error(err, 'install node-sass'));
                            }
                          }
                          

                           

                          Change the "node-sass@4.7.2"  to be "node-sass@4.11.0"

                           

                          Save the file and re-run the "ojet add sass" command.

                           

                          In JET v7.0.0 and higher, we've made the file a little bit more accessible and moved it into the project itself instead of setting it at the global level.  The node-sass version string can be found at:

                           

                          <project root>/node_modules/@oracle/oraclejet-tooling/lib/addsass.js

                           

                          Hope this helps others in the future.

                           

                          --jb

                          1 person found this helpful
                          • 10. Re: Error adding sass to a JET project
                            Duncan Mills-Oracle

                            For completeness, on Mac OS/X the same file is generally: /usr/local/lib/node_modules/@oracle/ojet-cli/node_modules/@oracle/generator-oraclejet/generators/add-sass/index.js

                            1 person found this helpful