Bundle misses modules

[vadimdemedes]

I'm not sure if it's the right title for the issue, let me know if there's a better one.

I've used x0 on my main laptop and it worked fantastic, but when I tried setting it up on another one, I can't get it to work. I constantly see this error:

❯ x0 build demo
 x0  @compositor/x0
 x0  ⠧ building static sitewebpack:///../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js?:269
var tt = acorn__WEBPACK_IMPORTED_MODULE_0__["default"].tokTypes;
                                                       ^

TypeError: Cannot read property 'tokTypes' of undefined
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js?:269:56)
    at Module.../n/lib/node_modules/@compositor/x0/node_modules/buble/dist/buble.es.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:534:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/node_modules/react-live/dist/react-live.es.js?:26:63)
    at Module.../n/lib/node_modules/@compositor/x0/node_modules/react-live/dist/react-live.es.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:2849:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/src/LiveEditor.js?:11:18)
    at Object.../n/lib/node_modules/@compositor/x0/src/LiveEditor.js (/Users/vadimdemedes/Projects/dist/TEMP/App.js:5361:1)
    at __webpack_require__ (/Users/vadimdemedes/Projects/dist/TEMP/App.js:30:30)
    at eval (webpack:///../n/lib/node_modules/@compositor/x0/src/scope.js?:30:19)

I've tried reinstalling Node.js via multiple methods (official package, homebrew, n) and even reproduced the same issue in a fresh Docker container ($ docker run --rm -it node bash). Steps are all the same and taken from the official readme:

1. $ npm i -g @compositor/x0
2. $ mkdir demo
3. $ vim index.js and insert this:

import React from 'react'

export default class extends React.Component {
  render () {
    return (
      <h1>Hello</h1>
    )
  }
}

4. $ x0 docs --open
5. I get the same error output either in browser console or in terminal when using x0 build.

I've also made a video how I reproduce this in a Docker container: https://www.dropbox.com/s/0ktvsx1n2bkmwma/x0.mov?dl=0.

I thought it might have something to do with module resolution and global modules, but since it fails in an isolated Docker container, it might be a bug in x0.

Unfortunately I had to give up that other laptop with working x0 for repair, so I can't find the differences now. Would appreciate any ideas on what might be wrong with my set up :)

Thank you for an amazing piece of software!

[johno]

Thanks for the detailed issue!

I've gut a hunch it has to do with the global install, it seems to cause some weirdness with webpack module resolution. Could you try installing the x0 package locally and run via npm scripts and confirm whether that works or not?

npm init -y
npm i -D @compositor/x0

{
  "scripts": "x0 docs"
}

[vadimdemedes]

Tried that, x0 took a really long time (more than 3 minutes) to finish and resulted in a very long error log, which hints at webpack not being able to resolve basically any modules of x0 - https://gist.github.com/vadimdemedes/2b5d1bf80e1646c7f078ff71f6e40d71.

Ran $ npm doctor, seems fine:

❯ npm doctor
Check                               Value                        Recommendation
npm ping                            OK
npm -v                              v6.4.1
node -v                             v8.12.0
npm config get registry             https://registry.npmjs.org/
which git                           /usr/bin/git
Perms check on cached files         ok
Perms check on global node_modules  ok
Perms check on local node_modules   ok
Verify cache contents               verified 1911 tarballs

[johno]

I'm just realizing it looks like your file (index.js) isn't in the docs directory? Is that the case?

x0 can't handle the route of your project currently, it expects to be handed a directory of js/md/mdx files. It looks like it might be trying to build your node_modules since its globbing from the root.

This might fix it maybe (if your index.js is in the root):

mkdir docs && mv index.js docs/

[vadimdemedes]

Hm, nope it's definitely in the same directory I'm executing x0 from:

~/Projects
❯ cd demo

~/Projects/demo
❯ ls
index.js	node_modules	package.json	yarn.lock

~/Projects/demo
❯ cat index.js
import React from 'react'
import superb from 'superb'

export default class extends React.Component {
  render () {
    return (
      <h1>Hello</h1>
    )
  }
}

~/Projects/demo
❯ npx x0 .
[Same error log]

[mokkymiah]

I am also having the same problem. Did you find a solution?

[vadimdemedes]

I didn't, unfortunately. Glad it's not just me!

[johno]

I was able to reproduce this error as well, so that will help with debuggin. It appears to be an issue with some dependency resolution deep down the tree. Going to try to dive in this weekend to see what's up because I'm not sure this is a quick fix unfortunately.

[vadimdemedes]

Thanks @johno, let me know if you need any help!

[vadimdemedes]

@johno I was able to consistently reproduce the errors with resolution when importing evergreen-ui package, so it must be something there, I'll dig in more this weekend.

[vadimdemedes]

Ok, so it became even more weird now.

This works fine:

$ mkdir demo
$ cd demo
$ echo "import Evergreen from 'evergreen-ui'" > index.js
$ yarn add evergreen-ui
$ x0 . --open

Notice, there's no package.json here. I have no idea where Yarn installs evergreen-ui, but there's no node_modules in that directory after yarn add.

But, if you perform the same procedure, but add echo '{}' > package.json before yarn add, which will install it in local node_modules, x0 will always fail.

[johno]

Thanks for digging @vadimdemedes!

Super weird. For x0 I believe it's a regression in react-live/buble that is causing the tokTypes error. We've seen the same thing in MDX Deck and seems to be in a few other repos.

Doesn't seem to explain the issue with Evergreen since they don't seem to have those same deps. When it errors with Evergreen is it the same tokTypes error?

[johno]

I think this might be related: bublejs/buble#159

[johno]

That fixes it for me (pinning to buble@0.19.4).

npm i -S buble@0.19.4

As a temp patch, I'll pin the dep in x0 until this get worked out upstream.