Not worked by using the latest FuseBox

[soumi-akira]

If I use the latest version of FuseBox, this project doesn't work.
Installing package by using npm i -S <package>, then package.json will result in following json file.

Do you support the latest version of FuseBox?

{
  "name": "fuse-box-vue-seed",
  "version": "1.0.0",
  "description": "Start your Vue.js project with FuseBox",
  "main": "index.js",
  "scripts": {
    "start": "node ./fuse.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fuse-box/fuse-box-vue-seed.git"
  },
  "keywords": [
    "fuse-box",
    "vue",
    "vue.js",
    "TypeScript"
  ],
  "author": "devmondo",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/fuse-box/fuse-box-vue-seed/issues"
  },
  "homepage": "https://github.com/fuse-box/fuse-box-vue-seed#readme",
  "dependencies": {
    "prismjs": "1.14.0",
    "vue": "2.5.16",
    "vue-router": "3.0.1",
    "vuetify": "1.0.19"
  },
  "devDependencies": {
    "fuse-box": "^3.2.2",
    "node-sass": "4.9.0",
    "postcss-selector-parser": "^5.0.0-rc.3",
    "typescript": "2.9.1",
    "uglify-js": "^3.4.0",
    "vue-hot-reload-api": "2.3.0",
    "vue-template-compiler": "2.5.16",
    "vue-template-es2015-compiler": "1.6.0"
  }
}

[nchanged]

What's the problem? What kind of error do you see?

[soumi-akira]

Hi nchanged.

Here are the steps.

1. download source from here
2. update packages version to latest one
   (or copy & paste json I posted)
3. run npm install
4. run npm start
5. goto localhost:8080

There is nothing and console gives this error.

Uncaught TypeError: Cannot read property 'use' of undefined
    at Object.<anonymous> (index.ts:12)
    at c (default:7)
    at Function.r.import (default:7)
    at script.ts:2
    at script.ts:2

this is pointed

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import 'prismjs/prism';
import 'prismjs/themes/prism.css';
import 'prismjs/themes/prism-solarizedlight.css';
import 'vuetify/dist/vuetify.min.css';
import App from './components/App.vue';
import Home from './components/Home.vue';
import Config from './components/Config.vue';

Vue.use(VueRouter);  // <--- this line
Vue.use(Vuetify);
// ~~

[jimshell]

Hello,

I bumped all module versions to @latest yesterday, and everything works fine as far as I could test. You have to upgrade all the modules, otherwise you indeed get errors. I did get a few weird errors first related tu "use" not being defined, but they disappeared (I assume that it was related to cache, so in this case you'd probably want to delete .fusebox completely then start anew)

Hope this helps :)

[jimshell]

npm outdated does help to check versions, once you have upgraded everything, it should return nothing.

[nchanged]

@jimshell awesome! could you submit a PR?

[jimshell]

@nchanged hmmm i'll try to... But i did make some tests, thus altered quite a few files in my local repo, added test .vue files... I'd probably better supply you with the up-to-date package.json file?

[jimshell]

@nchanged @soakr 's package.json is exactly what I ended with after upgrading :)

[soumi-akira]

@jimshell thank you for testing! I tried to check steps I posted before again and this.

1. download source
2. run npm install
3. run npm start
   (browser is opened automatically)
4. update packages version to @latest
5. run npm outdated
   and it shows nothing
6. run npm install
7. run npm start
8. goto localhost:8080
   (browser isn't opened automatically and command prompt gives message "If you want to open the browser, please install "opn" package. "npm install opn --save-dev"")

but it shows nothing and console gives same error even if I delete .fusebox ... Could you tell me steps you tried? I'm glad if it start with downloading this project from GitHub.

--

my environment is Windows10 npm : 6.1.0 node : 8.11.3

[jimshell]

I see... hmm I personnaly cloned the repo via git clone then rebased it for my own personal use, but it is not different from downloading the archive.

What you could try to do is the following (I've just remembered that I got rid of the error by doing this)

1. comment both Vue.use(VueRouter); and Vue.use(Vuetify);
2. npm start the project => you will get a bunch of errors related to VueRouter and Vuetify not being "used"
3. quit (shut the dev server down)
4. uncomment both Vue.use
5. npm start again

As I said, I amended the project prior to upgrading the modules, so maybe my modified .tsconfig file plays a role... Let me know if doing the above steps solves the issue (and I couldn't explain why, but this is what I did and I got rid of the "use" error...), otherwise I'll copy my fuse.js and .tsconfig files here...

[jimshell]

I have just lauched the project again - I'm working on a Virtualbox VM running Ubuntu 14.04, so here's the complete sequence and remarks (I have to mention that everything was working fine when I closed the project and shut my VM down yesterday):

1. turned my Ubuntu VM on
2. launched VSC - I use its embed terminal, and was already in the right directory
3. ran npm start => I did get the Uncaught TypeError: Cannot read property 'use' of undefined which I thought I got rid of
4. quit, then commented both Vue.use lines
5. ran npm start again => bunch of errors related to VueRouter and Vuetify, the nav was displayed nevertheless (and was reactive to change in the template or in the script)
6. quit, then uncommented both Vue.use lines
7. ran npm start once again => all fine now, no more errors...

All subsequent npm start now work OK, no errors. This is quite weird. It seems that for it to work, it requires a first build step without the use calls, after wich you can re-enable them and everything works as expected.

Here is my terminal output during the above stepts =>

webdev@UbuntuGnome-14:~/Documents/experiments/fuse-box-vue-seed$ npm start

> fuse-box-vue-seed@1.0.0 start /home/webdev/Documents/experiments/fuse-box-vue-seed
> node ./fuse.js

[17:23:16] Starting 'default'
[17:23:16] Starting 'clean'
[17:23:16] Resolved 'clean' after 46ms
[17:23:16] Starting 'watch-assets'
→Watch ./assets
→Copy to ./dist
→Resolved 3 files
[17:23:16] Resolved 'watch-assets' after 254ms
[17:23:16] Starting 'config'
[17:23:16] Resolved 'config' after 45ms
RUN
--- FuseBox 3.2.2 ---

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

    bundle-static.css
└──  (1 files,  201 Bytes) default
└── fuse-box-css@0.0.1 1.5 kB (0 files)
└── prismjs@1.14.0 26.8 kB (0 files)
└── process@0.0.0 4 kB (0 files)
└── reflect-metadata@0.1.12 51.4 kB (0 files)
└── vue-class-component@6.2.0 8.2 kB (0 files)
└── vue-hot-reload-api@2.3.0 6.3 kB (0 files)
└── vue-property-decorator@6.1.0 8 kB (0 files)
└── vue-router@3.0.1 64.4 kB (0 files)
└── vue@2.5.16 207.3 kB (0 files)
└── vuetify@1.0.19 800.5 kB (0 files)
size: 1.2 MB in 432ms

--------------------------
Bundle "app"

    components/App.vue
    components/Config.vue
    components/Home.vue
    components/Navigation.vue
    components/testcomp/index.js
    components/testcomp/s.scss
    index.js
    bundle-static.css
└──  (8 files,  16.3 kB) default
└── events@0.0.0 9.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)
size: 36.6 kB in 147ms

  --------------

  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?
  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?

  --------------

[17:23:17] Resolved 'default' after 1s 62ms

-----------------------------------------------------------------
Development server running http://localhost:8080 @ 3.2.2
-----------------------------------------------------------------

  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
17:23:18: HMR is enabled
17:23:22: Client connected
^Cwebdev@UbuntuGnome-14:~/Documents/experiments/fuse-box-vue-seed$ npm start

> fuse-box-vue-seed@1.0.0 start /home/webdev/Documents/experiments/fuse-box-vue-seed
> node ./fuse.js

[17:24:53] Starting 'default'
[17:24:53] Starting 'clean'
[17:24:53] Resolved 'clean' after 28ms
[17:24:53] Starting 'watch-assets'
→Watch ./assets
→Copy to ./dist
→Resolved 3 files
[17:24:53] Resolved 'watch-assets' after 145ms
[17:24:53] Starting 'config'
[17:24:53] Resolved 'config' after 41ms
RUN
--- FuseBox 3.2.2 ---
  → Typescript config file:  /tsconfig.json
  → Typescript script target: es5
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports

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

    bundle-static.css
└──  (1 files,  201 Bytes) default
└── fuse-box-css@0.0.1 1.5 kB (0 files)
└── prismjs@1.14.0 26.8 kB (0 files)
└── process@0.0.0 4 kB (0 files)
└── reflect-metadata@0.1.12 51.4 kB (0 files)
└── vue-class-component@6.2.0 8.2 kB (0 files)
└── vue-hot-reload-api@2.3.0 6.3 kB (0 files)
└── vue-property-decorator@6.1.0 8 kB (0 files)
└── vue-router@3.0.1 64.4 kB (0 files)
└── vue@2.5.16 207.3 kB (0 files)
└── vuetify@1.0.19 800.5 kB (0 files)
size: 1.2 MB in 1s 68ms

--------------------------
Bundle "app"

    components/App.vue
    components/Config.vue
    components/Home.vue
    components/Navigation.vue
    components/testcomp/index.js
    components/testcomp/s.scss
    index.js
    bundle-static.css
└──  (8 files,  16.2 kB) default
└── events@0.0.0 9.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)
size: 36.5 kB in 219ms

  --------------

  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?
  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?

  --------------

[17:24:54] Resolved 'default' after 1s 633ms

-----------------------------------------------------------------
Development server running http://localhost:8080 @ 3.2.2
-----------------------------------------------------------------

17:24:55: HMR is enabled
17:24:57: Client connected
^Cwebdev@UbuntuGnome-14:~/Documents/experiments/fuse-box-vue-seed$ npm start

> fuse-box-vue-seed@1.0.0 start /home/webdev/Documents/experiments/fuse-box-vue-seed
> node ./fuse.js

[17:25:21] Starting 'default'
[17:25:21] Starting 'clean'
[17:25:21] Resolved 'clean' after 25ms
[17:25:21] Starting 'watch-assets'
→Watch ./assets
→Copy to ./dist
→Resolved 3 files
[17:25:21] Resolved 'watch-assets' after 159ms
[17:25:21] Starting 'config'
[17:25:21] Resolved 'config' after 31ms
RUN
--- FuseBox 3.2.2 ---
  → Typescript config file:  /tsconfig.json
  → Typescript script target: es5
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports

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

    bundle-static.css
└──  (1 files,  201 Bytes) default
└── fuse-box-css@0.0.1 1.5 kB (0 files)
└── prismjs@1.14.0 26.8 kB (0 files)
└── process@0.0.0 4 kB (0 files)
└── reflect-metadata@0.1.12 51.4 kB (0 files)
└── vue-class-component@6.2.0 8.2 kB (0 files)
└── vue-hot-reload-api@2.3.0 6.3 kB (0 files)
└── vue-property-decorator@6.1.0 8 kB (0 files)
└── vue-router@3.0.1 64.4 kB (0 files)
└── vue@2.5.16 207.3 kB (0 files)
└── vuetify@1.0.19 800.5 kB (0 files)
size: 1.2 MB in 1s 56ms

--------------------------
Bundle "app"

    components/App.vue
    components/Config.vue
    components/Home.vue
    components/Navigation.vue
    components/testcomp/index.js
    components/testcomp/s.scss
    index.js
    bundle-static.css
└──  (8 files,  16.3 kB) default
└── events@0.0.0 9.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)
size: 36.6 kB in 236ms

  --------------

  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?
  → WARNING The contents of /home/webdev/Documents/experiments/fuse-box-vue-seed/src/components/testcomp/s.scss weren't loaded. Missing a plugin?

  --------------

[17:25:23] Resolved 'default' after 1s 625ms

-----------------------------------------------------------------
Development server running http://localhost:8080 @ 3.2.2
-----------------------------------------------------------------

17:25:24: HMR is enabled
17:25:26: Client connected
^Cwebdev@UbuntuGnome-14:~/Documents/experiments/fuse-box-vue-seed$ ^C

It can be noticed that with the first start, I have this =>

RUN
--- FuseBox 3.2.2 ---

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

Whereas with the next starts after I commented/uncommented the "use" lines, I have this =>

RUN
--- FuseBox 3.2.2 ---
  → Typescript config file:  /tsconfig.json
  → Typescript script target: es5
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports

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

For some reason, it seems that at first, the .tsconfig file is not loaded/taken into account...

I'll try to reproduce once more to see if commenting the "use" lines is a "real thing" of if any change in the index.ts main file is enough to "trigger" the proper behaviour...

[soumi-akira]

when I check the second step in your post, there were only one error message in console.

Uncaught TypeError: vue_router_1.default is not a constructor
at Object.<anonymous> (index.ts:15)
at c (default:7)
at Function.r.import (default:7)
at script.ts:2
at script.ts:2

this is pointed

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import 'prismjs/prism';
import 'prismjs/themes/prism.css';
import 'prismjs/themes/prism-solarizedlight.css';
import 'vuetify/dist/vuetify.min.css';
import App from './components/App.vue';
import Home from './components/Home.vue';
import Config from './components/Config.vue';

//Vue.use(VueRouter);
//Vue.use(Vuetify);

const router = new VueRouter({ // <--- this line
  routes: [
    { path: '/', component: Home },
    { path: '/config', component: Config }
  ]
});

//~~~

and when I finished to check steps you posted, browser shows nothing...

[jimshell]

OK so I think that you could try with my .tsconfig settings (adapt them to your needs, but I added a few elements there) =>

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "noImplicitAny": true,
    "noImplicitUseStrict": false,
    "strictNullChecks": true,
    "noEmitHelpers": false,
    "noLib": false,
    "outDir": "dist/"
  }
}

Now, I've just started over again (shut VM down, fresh restart) => I confirm that an immediate npm start does not work as is, nor any other immediate subsequent attempt. This time, I just added a whitespace in my index.ts main file, THEN it worked immediately.

So it seems that, for some reason, the main entry point (index.ts in my case) needs to be changed/saved prior to start the dev project. I can't tell why...

[jimshell]

Another test showed the following: I actually have to edit/save any typescript code for it to work. This time, I tried to change something in a .vue file (navigation.vue), in the template => did not work. Then I tried to change in the ts script (just added a whitespace then saved) => it worked.

So apparently my ts code is not transpiled/bundled properly straight away, a change, even a non-meaningful one, to some ts code is required. Then it works OK with any subsequent start. Incidentally, I don't get the two green lines

  → Typescript config file:  /tsconfig.json
  → Typescript script target: es5

unless I edit some ts code - which tends to show that at first (cold) start, the tsconfig file is not taken into account...

[jimshell]

Did a few more tests. Its definitely a cache problem.

I tried a rm -rf .fusebox and got a succesful build, working app (and the two tsconfig related lines in terminal output) Then quit and restarted immediately => the "use" error was thrown again...

Since then, I noticed that the error was appearing with each new npm start as long as no change was made to some ts code O_o I'm pretty sure that, before I tried to remove the cache .fusebox folder, all the subsequent starts were OK after I had made a change to some ts code...

This is weird. So, I have no idea why, but it has to see with cache and tsconfig loading on start... :-/

[soumi-akira]

@jimshell marvelous! it worked at last!!

1. download project
2. update packages to @latest
3. add "allowSyntheticDefaultImports": true to tsconfig.json
4. run npm install
5. run npm start

but, as you say, we have to delete .fusebox before every npm start ... it's really weird and inconvenient ...

we can use Sparky task for remove .fusebox like below.

//~~~
Sparky.task("clean-cache", () => Sparky.src("./.fusebox").clean(".fusebox/"));
//~~~
Sparky.task("default", ["clean-cache", "clean", "watch-assets", "config"], () => {
    return fuse.run();
});
//~~~

I don't think it's smart but it works almost perfectly.

[jimshell]

@soakr hey glad that you got there! :)

Yes I thought of a Sparky task indeed, but it feels like it's against Fuse-box' philosophy... It sure will work fine with small projects, but as they get bigger, it will sort of ruin the cache "magic" that helps Fuse-box be so fast.

I can't say if the solution to this is trivial or not, but I'm confident that the Fuse-box team will find a means to achieve perfection. We know that this has to see with newer versions of the used modules, so maybe some plugins (maybe the VueComponentPlugin one?) may require a few changes to work perfectly with the cache system, so that we can keep on relying on it :)

[nchanged]

@jimshell @soakr I would appreciate any help with Vue plugin. A guy who made it disappeared and we got nobody to fix issues.

[jimshell]

@nchanged I see... Well I decided to have a proper look at the plugin anyway, in order to understand what it does and how it does it => let's hope that I can find at least clues that will help solve this.

I'll let you know - I'll fork Fuse-box properly so that I can possibly submit PR's ;)

[jimshell]

@nchanged @soakr @devmondo @Shepless

Hi there,

I tried to isolate the behaviour for sure before I go and dig into the VueComponentPlugin: removed any piece of code that could generate troubles (like warnings or so) from my code, etc.

Now I can definitely confirm that there is a problem regarding the tsconfig.json file not being used when starting directly from cache.

The output is then:

RUN
--- FuseBox 3.2.2 ---

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

which show that the tsconfig is not taken into account.

As soon as some ts or js code is modified (useTypescriptCompiler is set to true) in the project, it works OK, showing:

RUN
--- FuseBox 3.2.2 ---
  → Typescript config file:  /tsconfig.json
  → Typescript script target: es5
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports
  → WARNING polyfillNonStandardDefaultUsage has been depreacted in favour of allowSyntheticDefaultImports

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

and the app shows up as expected.

I noticed that even a modification saved in fuse.js itself makes it work !

I have a few questions:

1. is this normal behaviour? I would personnaly think that it is, as if cache is enabled, only the transpiled .js files are cached, which would then explain why tsc is not invoked when starting the app purely from cache (no files have changed since the last start).

2. What would cause subsequent starts from cache not to work? As said, when things do work and I stop the app (ctrl + c, killing the dev server), the cache then should contains working transpiled code. This is very odd that when starting again, it doesn't work straight away... Which would imply a difference between the builds served when tsc has been invoked and those when it was served from cache directly...

3. Thus, as I noticed that even a modification/save of the fuse.js file "triggers" tsc, which then makes the whole app work as expected, does it mean that fuse.js is transpiled and cached as well? And if so, is this the expected/desirable behaviour?

Now the reason why the seed app does not work straight from cache, and requires tsc to be invoked, is obscure to me... Would that be related to how the latest 3.2.2 fusebox work? Because prior to upgrades, everything was working fine regarding builds once the tsconfig.json file was set up properly...

Many thanks for your insight :)

[jimshell]

I diff-ed both the "working" app.js build and the non-working one, and found one difference at the begining of the files =>

working:

(function(FuseBox){FuseBox.$fuse$=FuseBox;
FuseBox.target = "browser";
// allowSyntheticDefaultImports
FuseBox.sdep = true;
FuseBox.pkg("default", {}, function(___scope___){
[...]

not working:

(function(FuseBox){FuseBox.$fuse$=FuseBox;
FuseBox.target = "browser";

FuseBox.pkg("default", {}, function(___scope___){
[...]

So the problem comes from FuseBox.sdep = true; not being there when starting right from the cache...

Any idea? Thank you

EDIT: I forgot to mention that both vendor.js files are always similar.

[nchanged]

@jimshell I think it has been fixed in the fuse-box@next version. Can you try it?

[jimshell]

OK I've just bumped to fuse-box@next and ran some tests.

I still have exactly the same behaviour. Works after a rm -fr .fusbox or any modification to a .ts/js file, not straight from the cache.

Now I have an new error in terminal (that doesn't prevent the app from working though):

Errors for vendor bundle
  → ERROR Asset reference "bundle-static.css" has failed to resolve in module "default"

What is FuseBox.sdep = true; intended to do? The problem lies here...

[nchanged]

@jimshell that's https://fuse-box.org/page/configuration#allowsyntheticdefaultimports

If you nuke everything including cache? Because I've never had this problem

[jimshell]

@nchanged Hi sorry for replying late.

When you say "nuke everything", does it include anything else than .fusebox and node_modules?

[nchanged]

@jimshell that means what you just said ;-) nothing else

[jimshell]

@nchanged OK Thank you

I just did that. No change.

I've just cloned another, new copy of the fuse-box-vue-seed project in order to try and track the origin of the issue. I've first upgraded fuse-box to @next. Got an error related to postcss, so I've just upgraded this one too. Another error, so I'll go from the bottom up that way, upgrading just what's required to get rid of the errors, then I'll let you know if I still have the same behaviour...

[jimshell]

OK, so: after fuse-box was upgraded to @next, I had to upgrade postcss-selector-parser@lastest, and vue-hot-reload-api@latest, and I got rid of the specific errors.

Everything else in the package.json file was left unchanged. EDIT : no other file was edited.

I still have the same behaviour. Removing .fusebox each time make the build successful and the app working as expected (no errors, no warnings in console).

I can't understand this delta between a freshly built app.js and a "cache built" one, missing that FuseBox.sdep = true; assignment...

[nchanged]

@jimshell oh I see, could you take a look at the issue and submit a PR to fix it? That seems like an easy one.

Could you reproduce it first? I can pitch in.

[jimshell]

@nchanged Hello :)

That seems like an easy one.

Hmmm well it's not obvious at all to me... :-/ Do you have any idea where I should look? I diffed fuse-box v2.3.1 and v3.2.2, and there are quite a few additions in BundleRessource.ts where the FuseBox.sdep = true; assignement takes place ; now, I can't really figure out where in the VuePlugin things "break", as it lays in the init() method...

I must mention that I'm very new to Fuse-Box ^^

[nchanged]

Could you list the steps required to reproduce this bug?

[jimshell]

Sure I can, here there are:

1. clone the fuse-box-vue-seed repo

2. upgrade (at least) fuse-box@next

3. upgrade postcss-selector-parser@lastest, and vue-hot-reload-api@latest as well - as soon as those three packages are all upgraded, the demo app can work properly "as is" (no modifications needed)

4. (optional) install opn to launch the browser upon start

5. npm start => works straight away

6. quit

7. npm start again => doesn't work: js error Uncaught TypeError: Cannot read property 'use' of undefined that prevents the app from working / tsconfig.json not loaded during build / FuseBox.sdep = true; not there at the begining of app.js

8. quit and rm -rf .fusebox OR edit some js/ts code (either in fuse.js or in a .vue file's <script>) => works / tsconfig.json loaded during build / FuseBox.sdep = true; present at the begining of app.js

9. and so on...

Please let me know if you notice the same behaviour as @soakr and I, and if you have any idea of the origin of this differential between valid cache / invalid cache builds...

Thank you :)

[nchanged]

@jimshell just did all that. yarn add fuse-box@next postcss-selector-parser@latest vue-hot-reload-api@latest

Then i've edited fuse.js

REMOVED

polyfillNonStandardDefaultUsage: true,

Replaced with:

allowSyntheticDefaultImports: true,

Everything is working, start/stop no problems whatsoever. Could you change the option?

[jimshell]

@nchanged hmmm I'll have to try it again...

I did replace polyfillNonStandardDefaultUsage: true, with allowSyntheticDefaultImports: true, a few days ago on my main repo, before I upgraded the packages actually.

I'll give it another try and will let you know...

[jimshell]

@nchanged

OK you're totally right: it works as expected now that I have added allowSyntheticDefaultImports: true, in fuse.js => actually, I had removed polyfillNonStandardDefaultUsage: true, in fuse.js, and only added allowSyntheticDefaultImports: true, in my tsconfig.json file.

So lesson learnt: (@soakr you should too be interested in this to avoid removing the cache upon each start via a task =>) allowSyntheticDefaultImports: true can be set in tsconfig.json (especially not to get errors with VSC) but it must be set in the FuseBox.init call. I'm not sure if this is documented (and I missed it) or not, but maybe it would be worth it, especially for noobs like myself... ^^

Many thanks for your help on this!

Now, I still have this error in terminal (which does not prevent the app from working perfectly) =>

Errors for vendor bundle → ERROR Asset reference "components.css" has failed to resolve in module "default"

It showed up when I upgraded to fuse-box@next, was not there with fuse-box@latest (3.2.2)...

EDIT: I've just downgraded to fuse-box@latest (3.2.2) and no more errors in terminal while buidling. And everything works as expected regarding start/stop! Yay! :)

I've made similar changes in my personal, modified app/repo (allowSyntheticDefaultImports: true, in fuse.js and downgraded to fuse-box@latest), and there too, everything workds as expected.

Many thanks! :)

Now I'll have to figure out how to have hmr work with css/scss modifications as mentioned in #18 ... Wish me luck! ^^

Many thanks again for your help, patience, and great availability :)

[nchanged]

@jimshell great. That's probably was there from the start, the latest version just logs it. I would appreciate a PR that fixes it all (option key and latest deps). I don't have much time ATM.

Thanks!

[jimshell]

@nchanged Sure :) ! I will start again from clean shortly (not now, 11:40pm here, nor tomorrow as I will be away from my desk, but probably on Thursday), and submit a PR :)

Thank you!

[jimshell]

@nchanged Here it is :)