Docz: Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope

[guustnieuwenhuis]

Bug Report

Describe the bug

We're using an external model and array of instances of this model in our examples. But we get an error when doing so. Using version 0.12.5, the code worked. But it no longer does on 0.12.13.

To Reproduce

---
name: List
route: /metamodel/organisms/list
menu: Meta Model Organisms
---

import { Playground, PropsTable } from 'docz'
import { List, ListComponent } from "./list.component";

import { Person } from "../../docs/content/person";
import { persons } from "../../docs/content/persons";

import '../../../node_modules/@mgx/tools-component-library/tools-component-library.min.css';

# List Component

## Properties

<PropsTable of={List} />

## Examples

For the examples we use the model described on the [property page](/property).

### Basic implementation

<Playground>
  <ListComponent
    objectClass={Person}
    objects={persons}
    properties={[
      "firstname",
      "lastname",
      "age",
      "gender"
    ]}
  />
</Playground>

import { Model } from '../../metamodel/model';
import { property } from '../../metamodel/property';

export class Person extends Model {

  @property({
    inputType: 'text',
    labelKey: 'First name'
  })
  private _firstname: string;

  @property({
    inputType: 'text',
    labelKey: 'Last name'
  })
  private _lastname: string;

  @property({
    inputType: 'number',
    labelKey: 'Age'
  })
  private _age: number;

  @property({
    inputType: 'select',
    labelKey: 'Gender'
  })
  private _gender: number;

  constructor(id: string, firstname?: string, lastname?: string, age?: number, gender?: number) {
    super(id, `${firstname} ${lastname}`);

    this._firstname = firstname;
    this._lastname = lastname;
    this._age = age;
    this._gender = gender;
  }

  public get firstname(): string {
    return this._firstname;
  }

  public set firstname(firstname: string) {
    this._firstname = firstname;
  }

  public get lastname(): string {
    return this._lastname;
  }

  public set lastname(lastname: string) {
    this._lastname = lastname;
  }

  public get age(): number {
    return this._age;
  }

  public set age(age: number) {
    this._age = age;
  }

  public get gender(): number {
    return this._gender;
  }

  public set gender(gender: number) {
    this._gender = gender;
  }
}

Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>
Could not create Open in CodeSandbox Error: Trying to access a filepath outside our scope
    at resolvePath (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer\dist\utils\resolvePath.js:26:17)
    at files.content.internalImports.map.m (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:45)
    at Array.map (<anonymous>)
    at Object.assembleFiles (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\codesandboxer-fs\src\assembleFiles.js:102:27)
    at <anonymous>


 ERROR  Failed to compile with 1 errors                                             14:22:25
 error  in ./src/metamodel/model.ts

Module build failed (from ./node_modules/happypack/loader.js):
TypeError: Cannot read property 'name' of undefined
    at C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\react-hot-loader\dist\babel.development.js:145:24
    at Array.forEach (<anonymous>)
    at PluginPass.Class (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\react-hot-loader\dist\babel.development.js:136:31)
    at newFn (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\visitors.js:193:21)
    at NodePath._call (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\path\context.js:40:17)
    at NodePath.visit (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\path\context.js:88:12)
    at TraversalContext.visitQueue (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\context.js:118:16)
    at TraversalContext.visitSingle (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\context.js:90:19)
    at TraversalContext.visit (C:\Users\guust.nieuwenhuis\Projects\tools-echo\node_modules\@babel\traverse\lib\context.js:146:19)

 @ ./src/docs/content/person.ts 33:0-46 116:2-7
 @ ./src/metamodel/view/view.component.mdx
 @ ./.docz/app/imports.js
 @ ./node_modules/docz/dist/index.m.js
 @ ./node_modules/docz-theme-default/dist/index.js
 @ ./.docz/app/root.jsx
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/@babel/polyfill/lib/index.js ./.docz/app/index.jsx

Environment

• OS: Windows 10
• Node/npm version: v8.11.3/v5.6.0

Additional context/Screenshots

I've attached a screenshot with our file structure.

[pedronauck]

I think that this is happening because of this import:

import '../../../node_modules/@mgx/tools-component-library/tools-component-library.min.css';

Try to call your module as an relative path instead of absolute import from node_modules

[guustnieuwenhuis]

I've removed that import for the code, but the problem still occures. What I did notice is that the error goes away when I remove the following lines:

import { Person } from "../../docs/content/person";
import { persons } from "../../docs/content/persons";

Side note: the persons file also imports the person file. So the issue must be there.

[Kivylius]

Same error as above and i'm not importing anthing strange. the only thing im importing is import * as Rw from '../../../components'; and this a correct import. Happens on build and dev. Im on windows too. Might be a windows related issue, similar to the #491 pr that merged? Btw my code works it just trowing a LOT of errors.,

[popuguytheparrot]

Same problem on window 10.

[smathson]

Docz is currently broken on Windows due to this bug in codesandboxer: https://github.com/codesandbox/codesandboxer/issues/33.

For some reason the errors before wouldn't prevent the app from working but now Docz won't build on Windows at all. Current workaround is to disable codesandbox with this option in doczrc.js: { codeSandbox: false }

[andrelmlins]

same error here

[Noviny]

Just a note from the codesanboxer docs around some of these errors (which can be found here):

codesandboxer-fs uses the context of the package the target file is from, bases its available npm dependencies on that file's package.json, and will not include files imported from places outside this scope.

Basically, there's a safety measure in codesandboxer which means if you are in one package, you cannot import source files from another package within a mono-repo (instead it expects these to be absolute imports).

Some number of these errors look like this problem, not the struggle with windows.

I created a new issue around this error message to that project so this isn't as painful: https://github.com/codesandbox/codesandboxer/issues/49