7 Replies Latest reply on Feb 8, 2020 5:48 AM by user12023318

    JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.

    user12023318

      Hello Community,

       

      I have a custom component called "tenants-block" with its view model referencing utility module called "accUtils.js" located in the "js" directory of my application called "crudComponents".

      It works fine until I try to build or serve the app with "--release" option. It then fails with the following error:

       

      { Error: Error: ENOENT: no such file or directory, open 'e:/crudComponents/web/js/jet-composites/tenants-block/1.0.0/accUtils.js'

      In module tree:

          tenants-block/loader

            tenants-block/tenants-block-viewModel

       

      It looks like in the "--release" mode the referenced module "accUtils.js" is expected to be placed in the component's "js" directory instead of application's "js" directory.

      I have not had this problem in JET 7.2.

       

      How can I build my app in "--release" mode in JET 8.0?

       

      Wieslaw

        • 1. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
          Duncan Mills-Oracle

          Can you outline the layout on disk?  A custom component should never be trying to reference a js file from outside that component's sub-structure unless that resource is imported via a dependency - generally a resource component type... Otherwise you have broken the encapsulation of the component.

          This may be a case for a JET Pack see: https://blogs.oracle.com/groundside/advanced-components-jet-packs-part-1

          There are a couple more articles to publish in that series, but if you need more info I can accelerate my writing!

          • 2. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
            user12023318

            Now I am aware of JET Pakcs in JET 8.0 - thanks for this informative article!

            My goal in this application is that the same utility module accUtils.js could be used by my component (and my other components that I'm going to create) as well as by my view models in "viewModels" directory.

            How should I structure my app  ( 1) where to place accUtils.js?; 2) should it be wrapped in its own component of the "resource" type? 3) how to reference it? ) to achieve my goal and build my app in both debug and release mode with JET 8.0?

            In my case my component(s) are to be used only inside my application so I could accept to break the encapsulation of the component in the way I have done it.

             

            Here is my project's src directory structure:

            E:\CRUDCOMPONENTS\SRC

            │   index.html

            ├───css

            │   │   app-min.css

            │   │   app.css

            │   │   demo-alta-site-min.css

            │   │

            │   ├───fonts

            │   │       App_iconfont.woff

            │   │

            │   └───images

            │           avatar_24px.png

            │           avatar_24px_2x.png

            │           favicon.ico

            │           oracle_logo.svg

            ├───js

            │   │   accUtils.js

            │   │   appController.js

            │   │   main.js

            │   │   path_mapping.json

            │   │

            │   ├───jet-composites

            │   │   └───tenants-block

            │   │       │   component.json

            │   │       │   loader.js

            │   │       │   README.md

            │   │       │   tenants-block-styles.css

            │   │       │   tenants-block-view.html

            │   │       │   tenants-block-viewModel.js

            │   │       │

            │   │       └───resources

            │   │           └───nls

            │   │                   tenants-block-strings.js

            │   │

            │   ├───viewModels

            │   │       about.js

            │   │       customers.js

            │   │       dashboard.js

            │   │       incidents.js

            │   │

            │   └───views

            │           about.html

            │           customers.html

            │           dashboard.html

            │           incidents.html

            └───themes

                └───alta

                    └───common

            • 3. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
              Duncan Mills-Oracle

              When using Packs and Resource components the layout might be like this (just showing from jet-composites downwards)

               

              + jet-composites
                + tenants
                  component.json //for the pack
                  + block
                    loader.js //will register the tenants-block html tag
                    component.json //for the composite component
                    block-view.html
                    ...
                  + utils //folder for the resource component
                    component.json
                    accUtils.js //shared utility code
              

               

              With this structure in place both the viewModel of the tenants-block component and any random viewModels in the main app can use the following in their define() block.. > tenants/utils/accUtils

              The tenants requirejs path will be automatically generated and injected for you when you issue an ojet build.

               

              The component.json of the pack would mention both components:

               

              {
                "name":"tenants",
                "type":"pack",
                "version":"1.0.0", 
                "dependencies":{
                  "tenants-block":"1.0.0",
                  "tenants_utils":"1.0.0"
                }
              }
              

               

              The component.json of the tenants-block component would change very slightly to:

              {
                "name":"block",
                "pack":"tenants",
                "version":"1.0.0"
                ...
              }
              

              And the component.json for the resource component would look a little like this:

              {
                "name":"utils",
                "pack":"tenants",
                "version":"1.0.0"
                "type":"resource",
                "publicModules":[
                  "accUtils"
                ]
              }
              

              The publicModules metadata just advertises that the accUtils is OK to use outside of the pack - e.g. you're declaring that as a public API for your component set rather than it being intended for internal use by the pack only

              • 4. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
                user12023318

                I wanted to start with the simplest scenario where I have two standalone components with dependency between them. However the application still fails to build in „--release” mode.

                 

                jet version

                Oracle JET Command Line Interface, version: 8.0.0

                node version

                v11.15.0

                npm version

                6.7.0

                 

                1. Create a new application:

                ojet create myWebApp –template=navdrawer

                cd myWebApp

                 

                2. Create first (utility) component:

                ojet create component widget-utils

                 

                3. Modify widget-utils component to be a „resource” type component with utility module named utils.js:

                  3.1 Disk layout of the widget-utils component:

                E:\MYWEBAPP\SRC\JS\JET-COMPOSITES\WIDGET-UTILS

                component.json

                README.md

                utils.js

                └───resources

                └───nls

                widget-utils-strings.js

                 

                3.2 Modify component.json of widget-utils component to be a „resource” type and to expose „utils.js” module:

                {

                  "name": "widget-utils",

                  "version": "1.0.0",

                  "type":"resource",

                  "publicModules":[

                   "utils"

                  ],

                  "jetVersion": "^8.0.0"

                }


                3.3 „utils.js” content:

                define([],

                   function () {

                   return { message: "Hello from widget-utils resource component." };

                   }

                );


                4. Create second (widget) component:

                ojet create component widget-1 


                4.1 Disk layout of the widget-utils component:

                E:\MYWEBAPP\SRC\JS\JET-COMPOSITES\WIDGET-1

                component.json

                loader.js

                README.md

                widget-1-styles.css

                widget-1-view.html

                widget-1-viewModel.js

                └───resources

                └───nls

                widget-1-strings.js


                4.2 Modify component.json of „widget-1” component to reference „widget-uitls” component:

                {

                "name": "widget-1",

                "version": "1.0.0",

                "jetVersion": "^8.0.0",

                "dependencies": {

                "widget-utils": "1.0.0"

                },

                "displayName": "A user friendly, translatable name of the component.",

                "description": "A translatable high-level description for the component.",

                "properties": {},

                "methods": {},

                "events": {},

                "slots": {}

                }

                 

                4.3 Modify „widget-1-viewModel.js” to reference „widget-utils” component in its „define” function:

                'use strict';

                define(

                ['knockout', 'ojL10n!./resources/nls/widget-1-strings', 'ojs/ojcontext', 'widget-utils/utils', 'ojs/ojknockout'],

                function (ko, componentStrings, Context) {

                function Widget1Model(context) {

                var self = this;

                var busyContext = Context.getContext(context.element).getBusyContext();

                var options = { "description": "Web Component Startup - Waiting for data" };

                self.busyResolve = busyContext.addBusyState(options);

                self.composite = context.element;

                self.messageText = ko.observable('Hello from widget-1 component');

                self.properties = context.properties;

                self.res = componentStrings['widget-1'];

                self.busyResolve();

                };

                return Widget1Model;

                });

                 

                5. Building the appliation in debug mode seems to work:

                E:\myWebApp>ojet build

                Warning: Command is missing platform. Default to web.

                Cleaning staging path.

                Running before_build hook.

                Copy files to staging directory.

                Copy finished.

                Copy library files to staging directory.

                Copy finished.

                Copy reference components to staging directory.

                Copy finished.

                Copy local web components

                Copy local web components finished

                Optimizing svg into SVG sprites.

                Svg optimization task finished.

                Compiling sass...

                Sass compile finished.

                Task index.html cdn bundle injection finished.

                Running theme injection task.

                Task index.html theme path injection finished.

                Running theme copy task.

                Theme copy task finished.

                Running injection tasks.

                Task main.js paths injection finished.

                runAllComponentHooks

                runAllComponentHooks for component: "src/js/jet-composites/widget-1/component.json"

                Running after_component_build hook.

                runAllComponentHooks for component: "src/js/jet-composites/widget-utils/component.json"

                Running after_component_build hook.

                Running after_build hook.

                Build finished.

                 

                 

                6. Building the appliation in „--release” mode fails:

                E:\myWebApp>ojet build --release

                Warning: Command is missing platform. Default to web.

                Cleaning staging path.

                Running before_build hook.

                Copy files to staging directory.

                Copy finished.

                Copy library files to staging directory.

                Copy finished.

                Copy reference components to staging directory.

                Copy finished.

                Copy local web components

                Copy local web components finished

                Optimizing svg into SVG sprites.

                Svg optimization task finished.

                Compiling sass...

                Sass compile finished.

                Task index.html cdn bundle injection finished.

                Running theme injection task.

                Task index.html theme path injection finished.

                Running theme copy task.

                Theme copy task finished.

                Running injection tasks.

                Task main.js paths injection finished.

                Running injection tasks for es5.

                Running before_release_build hook.

                Task main.js paths injection finished.

                Running component requirejs task.

                Running before_component_optimize hook.

                { Error: Error: ENOENT: no such file or directory, open 'E:/myWebApp/web/js/jet-composites/widget-1/1.0.0/widget-utils/utils.js'

                In module tree:

                widget-1/loader

                widget-1/widget-1-viewModel

                  at Object.openSync (fs.js:448:3)

                  at E:\myWebApp\node_modules\requirejs\bin\r.js:28332:19

                at E:\myWebApp\node_modules\requirejs\bin\r.js:3059:39

                at E:\myWebApp\node_modules\requirejs\bin\r.js:2999:25

                at Function.prim.nextTick (E:\myWebApp\node_modules\requirejs\bin\r.js:28083:9)

                at Object.errback (E:\myWebApp\node_modules\requirejs\bin\r.js:2998:26)

                at Object.callback (E:\myWebApp\node_modules\requirejs\bin\r.js:2984:23)

                at Object.then (E:\myWebApp\node_modules\requirejs\bin\r.js:3038:23)

                at build (E:\myWebApp\node_modules\requirejs\bin\r.js:28289:12)

                at runBuild (E:\myWebApp\node_modules\requirejs\bin\r.js:30302:17)

                at Object.execCb (E:\myWebApp\node_modules\requirejs\bin\r.js:1946:33)

                originalError:

                { Error: ENOENT: no such file or directory, open 'E:/myWebApp/web/js/jet-composites/widget-1/1.0.0/widget-utils/utils.js'

                at Object.openSync (fs.js:448:3)

                at Object.readFileSync (fs.js:348:35)

                at Object.readFile (E:\myWebApp\node_modules\requirejs\bin\r.js:3658:27)

                at Object.readFileAsync (E:\myWebApp\node_modules\requirejs\bin\r.js:3672:32)

                at Function.require._cacheReadAsync (E:\myWebApp\node_modules\requirejs\bin\r.js:28102:25)

                at E:\myWebApp\node_modules\requirejs\bin\r.js:27671:48

                at E:\myWebApp\node_modules\requirejs\bin\r.js:3041:37

                at E:\myWebApp\node_modules\requirejs\bin\r.js:2989:25

                at Function.prim.nextTick (E:\myWebApp\node_modules\requirejs\bin\r.js:28083:9)

                at Object.callback (E:\myWebApp\node_modules\requirejs\bin\r.js:2988:26)

                errno: -4058,

                syscall: 'open',

                code: 'ENOENT',

                path:

                  'E:/myWebApp/web/js/jet-composites/widget-1/1.0.0/widget-utils/utils.js',

                fileName:

                  'E:/myWebApp/web/js/jet-composites/widget-1/1.0.0/widget-utils/utils.js',

                moduleTree: [ 'widget-1/widget-1-viewModel', 'widget-1/loader' ] } }

                (node:5128) UnhandledPromiseRejectionWarning: Error: Error: ENOENT: no such file or directory, open 'E:/myWebApp/web/js/jet-composites/widget-1/1.0.0/widget-utils/utils.js'

                In module tree:

                widget-1/loader

                widget-1/widget-1-viewModel

                  at Object.openSync (fs.js:448:3)

                  at E:\myWebApp\node_modules\requirejs\bin\r.js:28332:19

                at E:\myWebApp\node_modules\requirejs\bin\r.js:3059:39

                at E:\myWebApp\node_modules\requirejs\bin\r.js:2999:25

                at Function.prim.nextTick (E:\myWebApp\node_modules\requirejs\bin\r.js:28083:9)

                at Object.errback (E:\myWebApp\node_modules\requirejs\bin\r.js:2998:26)

                at Object.callback (E:\myWebApp\node_modules\requirejs\bin\r.js:2984:23)

                at Object.then (E:\myWebApp\node_modules\requirejs\bin\r.js:3038:23)

                at build (E:\myWebApp\node_modules\requirejs\bin\r.js:28289:12)

                at runBuild (E:\myWebApp\node_modules\requirejs\bin\r.js:30302:17)

                at Object.execCb (E:\myWebApp\node_modules\requirejs\bin\r.js:1946:33)

                (node:5128) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise

                which was not handled with .catch(). (rejection id: 1)

                (node:5128) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero

                exit code.


                It looks to me that in the „--release” mode „widget-1” component "expects" to have „widget-utils/utils.js” inside „widget-1” directory.

                How can I successfully build this application in „--release mode”? Any help would be appreciated.

                • 5. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
                  user12023318

                  It looks to me that in the „--release” mode „widget-1” component "expects" to have „widget-utils/utils.js” inside „widget-1” directory.

                  Is this a bug in JET 8 or am I doing something wrong?

                  • 6. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
                    Duncan Mills-Oracle

                    Resource components should be inside a Pack not singletons (stand alone) so If you put these components into the same pack then it will work.

                    • 7. Re: JET 8.0 - an app with custom component referencing an utility module fails to build/serve in "--release" mode.
                      user12023318

                      Resource components should be inside a Pack not singletons (stand alone) so If you put these components into the same pack then it will work.

                      I have finally made it work using the pack. Many thanks for your help!

                       

                      Here is the solution that has worked for me:

                       

                      Disk layout for jet-composites directory
                      E:\MYWEBAPP\SRC\JS\JET-COMPOSITES
                      └───my-pack
                          │   component.json
                          │
                          ├───widget-1
                          │   │   component.json
                          │   │   loader.js
                          │   │   README.md
                          │   │   widget-1-styles.css
                          │   │   widget-1-view.html
                          │   │   widget-1-viewModel.js
                          │   │
                          │   └───resources
                          │       └───nls
                          │               widget-1-strings.js
                          │
                          └───widget-utils
                              │   component.json
                              │   README.md
                              │   utils.js
                              │
                              └───resources
                                  └───nls
                                          widget-utils-strings.js
                      

                       

                      my-pack\component.json
                      {
                        "name": "my-pack",
                        "version": "1.0.0",
                        "jetVersion": "^8.0.0",
                        "type": "pack",
                        "dependencies": {
                            "my-pack-widget-utils": "1.0.0",
                            "my-pack-widget-1": "1.0.0"
                        }
                      }
                      

                       

                      my-pack\widget-1\component.json
                      {
                          "name": "widget-1",
                          "version": "1.0.0",
                          "jetVersion": "^8.0.0",
                          "pack": "my-pack"
                      }
                      

                       

                      my-pack\widget-utils\component.json
                      {
                        "name": "widget-utils",
                        "version": "1.0.0",
                        "type":"resource",  
                        "jetVersion": "^8.0.0",
                        "pack": "my-pack"
                      }