How do I use this?

[thekevinbrown]

Hi there,

When I follow the steps in the readme, I get:

$ npm run luis

> fuse-box-electron-seed@1.0.5 luis <directory>
> luis

Custom config not found. Launching standard configuration.
No root and entry file specified. Estimating 'src' as project root and 'luis.ts' as the entry files.
If you want to use a different entry file, please run process as 'node luis root path/to/luis.ts
<directory>/node_modules/luis/luis.fuse.js
--- FuseBox 3.7.1 ---

--------------------------
Bundle "luis-vendor" 

└──  (0 files,  53 Bytes) default
size: 53 Bytes in 36ms

--------------------------
Bundle "luis-client" 

└──  (0 files,  91 Bytes) default
└── events@0.0.0 8 kB (0 files)
└── fusebox-hot-reload@0.0.0 7.6 kB (0 files)
└── fusebox-websocket@0.0.0 2.9 kB (0 files)
└── module@0.0.0 331 Bytes (0 files)
└── proxyrequire@1.0.21 4.1 kB (0 files)
size: 22.9 kB in 27ms
  → 
-----------------------------------------------------------------
Development server running http://localhost:9001 @ 3.7.1
-----------------------------------------------------------------

19:29:25: HMR is enabled
19:29:37: Client connected

Then when I look at that URL I get a blank page with this in the console:

default/luis.js does not provide a module
s @ luis-vendor.js:7

How can I debug this to get Luis running?

---

Alternatively I've tried to get it working with a standalone react component, but get Typescript errors around setupTestBridge, and that also fails at runtime:

Uncaught TypeError: luis_1.setupTestBridge is not a function
    at Object.<anonymous> (renderer.js:52)
    at c (renderer.js:822)
    at b.require (renderer.js:822)
    at Object.<anonymous> (renderer.js:43)
    at c (renderer.js:822)
    at b.require (renderer.js:822)
    at Object.<anonymous> (renderer.js:23)
    at c (renderer.js:822)
    at b.require (renderer.js:822)
    at Object.<anonymous> (renderer.js:11)

How can I get one of these approaches working?

[tomitrescak]

Hello, thanks for giving this a go. Give me couple days I’m working on a brand new version with new docs. It’s going to be spectacular;) a bit of patience and you won’t regret

[tomitrescak]

Hi, I prepared a starter project with instructions for using a simple catalogue:

https://github.com/tomitrescak/luis/tree/master/src/examples/catalogue

Please wait couple more days for more instructions on how to connect this to Jest tests and how to incorporate Luis under a custom route.

[thekevinbrown]

I tried copying that example including using the RC version of Luis and still get a blank page:

luis-vendor.js:72798 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `_class`.
    in _class (created by inject-_class-with-state)
    in inject-_class-with-state
    in Provider
warningWithoutStack @ luis-vendor.js:72798
luis-vendor.js:48707 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `_class`.
    at invariant (http://localhost:9001/luis-vendor.js:48700:15)
    at createFiberFromTypeAndProps (http://localhost:9001/luis-vendor.js:58835:11)
    at createFiberFromElement (http://localhost:9001/luis-vendor.js:58856:15)
    at reconcileSingleElement (http://localhost:9001/luis-vendor.js:61127:23)
    at reconcileChildFibers (http://localhost:9001/luis-vendor.js:61184:35)
    at reconcileChildren (http://localhost:9001/luis-vendor.js:62841:28)
    at updateHostComponent (http://localhost:9001/luis-vendor.js:63302:3)
    at beginWork (http://localhost:9001/luis-vendor.js:64088:14)
    at performUnitOfWork (http://localhost:9001/luis-vendor.js:67751:12)
    at workLoop (http://localhost:9001/luis-vendor.js:67791:24)
luis-vendor.js:65556 The above error occurred in the <div> component:
    in div (created by _class)
    in div (created by _class)
    in _class (created by inject-_class-with-state)
    in inject-_class-with-state
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ luis-vendor.js:65556
luis-vendor.js:48700 Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `_class`.
    at invariant (http://localhost:9001/luis-vendor.js:48700:15)
    at createFiberFromTypeAndProps (http://localhost:9001/luis-vendor.js:58835:11)
    at createFiberFromElement (http://localhost:9001/luis-vendor.js:58856:15)
    at reconcileSingleElement (http://localhost:9001/luis-vendor.js:61127:23)
    at reconcileChildFibers (http://localhost:9001/luis-vendor.js:61184:35)
    at reconcileChildren (http://localhost:9001/luis-vendor.js:62841:28)
    at updateHostComponent (http://localhost:9001/luis-vendor.js:63302:3)
    at beginWork (http://localhost:9001/luis-vendor.js:64088:14)
    at performUnitOfWork (http://localhost:9001/luis-vendor.js:67751:12)
    at workLoop (http://localhost:9001/luis-vendor.js:67791:24)

I can't open source what I'm working on, but all I'm looking to do is replace Storybook with Luis to have the component catalogue. I put my stories alongside my components, so in each component folder it looks like this for example:

components/spinner/
  - index.ts: Exports the pieces of component.tsx that are for public consumption to be able to use the spinner.
  - component.tsx: The actual spinner component implementation.
  - stories.tsx: The stories of the spinner.

I suspect the structure you require about needing stories in certain folders is what's causing the issue...? Hard to say without a more concrete error message what's going on from here.

[tomitrescak]

Kevin, this looks like a fusebox error, not LUIS. Blast the .fusebox folder and run again. I just double checked and following led to successfull view of the luis catalogue:

✝  ~/Downloads $ git clone https://github.com/tomitrescak/luis
Cloning into 'luis'...
remote: Enumerating objects: 360, done.
remote: Counting objects: 100% (360/360), done.
remote: Compressing objects: 100% (207/207), done.
remote: Total 1662 (delta 161), reused 309 (delta 141), pack-reused 1302
Receiving objects: 100% (1662/1662), 1.37 MiB | 282.00 KiB/s, done.
Resolving deltas: 100% (955/955), done.
 ✝  ~/Downloads $ cd luis/src/examples/catalogue
 ✝  src/examples/catalogue $ yarn
yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
✨  Done in 4.53s.
 ✝  src/examples/catalogue $ yarn run luis

Please not that the top menu vis coming next week with options for full screen and mobile resolutions and scaling.

[thekevinbrown]

I've tried blowing away the .fusebox folder and I'm getting another error now. Build is still successful, but I get a blank page with this in the console of the browser.

Uncaught Package not found luis
u @ luis-vendor.js:7
c @ luis-vendor.js:7
b.require @ luis-vendor.js:7
(anonymous) @ luis.ts:1
proxyRequire @ luis.ts:7
(anonymous) @ luis.ts:1
proxyRequire @ luis.ts:7
(anonymous) @ luis.ts:1
c @ luis-vendor.js:7
r.import @ luis-vendor.js:7
(anonymous) @ luis.ts:7
(anonymous) @ luis.ts:7

But I have luis installed, listed in the package.json file, and it's on disk in node_modules...

[tomitrescak]

@thekevinbrown if you do the exact steps then me ... still happening? What fusebox is not great in is the nested node-modules folder. Make sure you did not install modules in the main directory, just the child directory.

I will soon post tutorials on how to include this in your app.

[thekevinbrown]

If I run it on your project it works, if I run it on mine I get that error.

I'll try to create a reproduction case so you can have something more concrete to go off of.

[thekevinbrown]

Here you go: https://github.com/thekevinbrown/luis-reproduction

This is simplified from the Fusebox Electron Seed repo, which I added Luis to (I think correctly, but please let me know if not!).

When you run:

• npm i
• npm start

You should see "I work!" in the electron window, which means the main process is working, generating a window, and the "Spinner" component is correctly rendering. This is the component I'm trying to get to show up in the Luis interface.

Kill the process with Ctrl-C, then:

Expected
npm run luis presents Luis interface on port 9001

Actual

$ npm run luis

> fuse-box-electron-seed@1.0.5 luis /Users/kevin/development/luis-reproduction
> luis

Custom config not found. Launching standard configuration.
/Users/kevin/development/luis-reproduction/node_modules/luis/luis.fuse.js
--- FuseBox 3.7.1 ---
  → Generating recommended tsconfig.json:  /Users/kevin/development/luis-reproduction/src/tsconfig.json
  → Typescript script target: ES2018

--------------------------
Bundle "luis-vendor" 

└──  (0 files,  53 Bytes) default
└── @babel/runtime 11.9 kB (25 files)
└── @semantic-ui-react/event-stack 22 kB (3 files)
└── @tomino/toolbelt 14.2 kB (10 files)
└── circular-json-es6 2.5 kB (1 files)
└── classnames 1.4 kB (1 files)
└── diff-view 26.3 kB (4 files)
└── exenv 1 kB (1 files)
└── keyboard-key 7.3 kB (1 files)
└── lodash 346.2 kB (357 files)
└── luis 116 kB (35 files)
└── mobx-react 51.6 kB (1 files)
└── mobx 171.9 kB (1 files)
└── object-assign 2.2 kB (1 files)
└── process 3.3 kB (1 files)
└── prop-types 28.1 kB (5 files)
└── react-dom 867.4 kB (3 files)
└── react-is 10.9 kB (3 files)
└── react-lifecycles-compat 6.2 kB (1 files)
└── react-split-pane 19.9 kB (1 files)
└── react-style-proptype 32.3 kB (2 files)
└── react 69.4 kB (3 files)
└── scheduler 40.6 kB (6 files)
└── semantic-ui-react 928.5 kB (251 files)
└── shallowequal 1.1 kB (1 files)
└── tslib 11.5 kB (1 files)
size: 2.7 MB in 2s 462ms

--------------------------
Bundle "luis-client" 

    **.stories.js
    luis.js
└──  (2 files,  479 Bytes) default
└── events 8 kB (1 files)
└── fusebox-hot-reload 7.6 kB (1 files)
└── fusebox-websocket 2.9 kB (1 files)
└── module 331 Bytes (1 files)
└── proxyrequire 4.1 kB (1 files)
size: 23.3 kB in 133ms
  → 
-----------------------------------------------------------------
Development server running http://localhost:9001 @ 3.7.1
-----------------------------------------------------------------

11:39:57: HMR is enabled

Accessing the interface on localhost:9001 in Chrome results in:

Uncaught (in promise) TypeError: Cannot read property '1' of null
    at luis-vendor.js:17593
    at Object.setupRouter (luis-vendor.js:17616)
    at Object.renderLuis (luis-vendor.js:15354)
    at Object.<anonymous> (luis.ts:3)
    at c (luis-vendor.js:78111)
    at Function.r.import (luis-vendor.js:78111)
    at proxyrequire@1.0.21:127
    at proxyrequire@1.0.21:127

If I then do rm -rf .fusebox followed by npm run luis I get this (still in Chrome):

luis-vendor.js:7 Uncaught Package not found luis
u @ luis-vendor.js:7
c @ luis-vendor.js:7
b.require @ luis-vendor.js:7
(anonymous) @ luis.ts:1
proxyRequire @ proxyrequire@1.0.21:79
(anonymous) @ luis.ts:1
c @ luis-vendor.js:7
r.import @ luis-vendor.js:7
(anonymous) @ proxyrequire@1.0.21:127
(anonymous) @ proxyrequire@1.0.21:127

[tomitrescak]

Hi, there were several things.

1. In your tsconfig you specified baseUrl: '.' This will not work well if your file "luis.ts" is trying to import "luis" as a package. Pretty much it will try to import itself. If you want to use baseUrl, you need to rename the luis.ts to something else e.g. luis_app.ts and then run yarn luis --root src --run luis_app.ts NOTE It looks like there is a bug in Luis or FuseBox when you specify baseUrl. I could not make it run with baseUr specified, nor I could make it run with a custom file. I will investigate further.

2. You named your files stories.ts. Currently I support test, story and fixture terminology. I can add fixtures as well. This is the experssion in standard LUIS that loads all stories ' !> [luis.ts] + proxyrequire + **/*.fixture.* + **/*.story.* + **/*.test.* + **/__fixtures__/* + **/__stories__/* + **/__tests__/* + **/tests/*

See my result:

[tomitrescak]

Long story short. Remove baseUrl: '.' from tsconfig.json and rename your file to xxx.story.ts and everything will work.

I will let you know soon about my investigation of why custom files and baseUrl do not work.

[tomitrescak]

Hi, so I made a little tweak to config to make sure baseUrl will work in tsconfig.

1. You still have to make sure that you name your stories as .story, .test or .fixture as per documentation. If you want it to be different, just add your own config or convince me to support stories. See above what everything is automatically added or check out the luis.fuse.js config file.

2. You cannot use baseUrl: '.' and then import package from the file named the same way. As a result you need to rename the luis.ts to something else, e.g. "luis_app.ts" and then run lusi as yarn luis --run luis_app.ts

Check out my fork at https://github.com/tomitrescak/luis-reproduction to see the changes I made in the last commit to make it work.

[tomitrescak]

I noted that baseUrl: '.' was not actually added by you but automatically generated by typescript as you have not included tsconfig.json. So if you do not need this setting then all you really need to do is just to rename your files to adhere to requirements.