Refused to install vue single file components into staging lib

[nmearl]

Hello,

I'm trying to mount a Vuejs app in the render method of the custom DOMWigetView. This Vuejs app relies on .vue single file component files. While everything builds fine locally with yarn run build or npm run build:lib && npm run build:nbextension, when I tried to install the jupyter extension with jupyter labextension install ., I get the following error

ModuleNotFoundError: Module not found: Error: Can't resolve './App.vue' in '/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib'
    at factory.create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/webpack/lib/Compilation.js:535:10)
    at factory (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/neo-async/async.js:2825:7
    at /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn42 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at resolver.doResolve (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn1 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at hook.callAsync (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at fs.stat (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:22:13)
    at process.nextTick (/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)
resolve './App.vue' in '/Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib'
  using description file: /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/package.json (relative path: ./lib)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/package.json (relative path: ./lib/App.vue)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue.json doesn't exist
      as directory
        /Users/nearl/anaconda3/envs/pits_dev/share/jupyter/lab/staging/node_modules/ipycubelab/lib/App.vue doesn't exist

From what I understand, the .vue files are ignored by the typescript compiler, and so the output in the lib directory are just the transpiled .js files, but they still contain references to the .vue files from the original .ts files.

Is there anyway to avoid having jupyter even care about the transpiled files? Building the app results in a dist/index.js file with all the compiled .ts and .vue code inside -- is it necessary to have the tsc output files in the staging directory of the extension installation?

For reference, the efforts I've described can be seen here.

Thanks for any guidance.

[maartenbreddels]

Dear Nicolas,

a very interesting widget (cc @astrofrog ). In case you are interested, together with @mariobuikhuizen and @oscar6echo we are building ipyvuetify (which wraps nearly all vuetify widgets), and we will most likely extract ipyvue from that with the best practices on how to build a Vue based widget. We'll open source that in a few weeks I expect, but that doesn't solve your problem though.
Indeed, Jupyterlab doesn't know what to do with the vue, so I think you should find some way to compile .vue to .js, and it should end up in the lib folder I guess.

cheers,

Maarten

[saraedum]

The lab extension is compiled into ES modules with tsc first and then processed by webpack (but not by the one whose webpack.config you see in your repo.) If I understand things correctly, the problem is that during that webpack step, there is no vue loader which would understand the .vue files. The TypeScript compiler does not care about this initially because it sees your vue shim.
I guess the reason for using tsc for the lab extension is that the output has to be an ES module. For everything else, e.g., the classic nbextension, webpack is used. However, it appears that webpack can not compile to ES modules.

Is there anyway to avoid having jupyter even care about the transpiled files? Building the app results in a dist/index.js file with all the compiled .ts and .vue code inside -- is it necessary to have the tsc output files in the staging directory of the extension installation?

This index.js contains everything but it cannot be used because it's not an ES module. I have not tried yet, but maybe you could actually have success trying to convert it back to ES with something like https://github.com/rollup/rollup-plugin-commonjs; that might not work for the externals though. I guess it's easier to do what @maartenbreddels suggests (if I understand correctly) namely to build your Vue bits into a separate .js package in the lib/ folder that typescript is happy to import and webpack can load.

I am facing the same problem, I'll let you know if I manage to get this to work in a nice way.

[saraedum]

I managed to use an App.vue in the classic notebook and Jupyter Lab. You can have a look at https://github.com/flatsurf/flatsurf-widgets. I am not perfectly happy with it yet but it seems to work alright.
I also tried to get Hot Module Reloading to work for the widget but somehow the outer webpack appears to be interfering with the URLs generated by webpack-dev-server.

[saraedum]

https://github.com/flatsurf/flatsurf-widgets/tree/webpack-hmr adds hot reloading for the classical notebook but it's quite a hack. If someone managed to get hot reloading to work properly, I would be curious for any hints in the jupyter context.

I didn't manage to get hot reloading in Jupyter Lab but at least in the classical notebook it now seems to work fine and without any too evil hacks. The changes are on https://github.com/flatsurf/flatsurf-widgets.