Fix error overlay and sass resolving

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -3,13 +3,13 @@ import { absolute } from 'common/utils/path';
 import _debug from 'app/utils/debug';
 import parseConfigurations from 'common/templates/configuration/parse';
 import initializeErrorTransformers from 'sandbox-hooks/errors/transformers';
+import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
 
 import getPreset from './eval';
 import Manager from './eval/manager';
 
 import { resetScreen } from './status-screen';
 
-import { inject, unmount } from 'sandbox-hooks/react-error-overlay/overlay';
 import createCodeSandboxOverlay from './codesandbox-overlay';
 import handleExternalResources from './external-resources';
 

packages/app/src/sandbox/eval/manager.js

@@ -540,6 +540,7 @@ export default class Manager {
 
         const dependencyName = getDependencyName(connectedPath);
 
+        // TODO: fix the stack hack
         if (
           this.manifest.dependencies.find(d => d.name === dependencyName) ||
           this.manifest.dependencyDependencies[dependencyName]
@@ -579,16 +580,22 @@ export default class Manager {
 
   resolveTranspiledModuleAsync = (
     path: string,
-    currentPath: string,
+    currentTModule: ?TranspiledModule,
     ignoredExtensions?: Array<string>
   ): Promise<TranspiledModule> => {
+    const tModule =
+      currentTModule || this.getTranspiledModule(this.modules['/package.json']); // Get arbitrary file from root
     try {
       return Promise.resolve(
-        this.resolveTranspiledModule(path, currentPath, ignoredExtensions)
+        this.resolveTranspiledModule(
+          path,
+          tModule.module.path,
+          ignoredExtensions
+        )
       );
     } catch (e) {
       if (e.type === 'module-not-found' && e.isDependency) {
-        return this.downloadDependency(e.path, currentPath, ignoredExtensions);
+        return this.downloadDependency(e.path, tModule, ignoredExtensions);
       }
 
       throw e;

packages/app/src/sandbox/eval/presets/angular-cli/index.js

@@ -67,7 +67,7 @@ async function addAngularJSONResources(manager) {
 
       const tModule = await manager.resolveTranspiledModuleAsync(
         finalPath,
-        '/'
+        null
       );
 
       await tModule.transpile(manager);
@@ -80,7 +80,7 @@ async function addAngularJSONResources(manager) {
         const finalPath = absolute(join(project.root, p));
         const tModule = await manager.resolveTranspiledModuleAsync(
           finalPath,
-          '/'
+          null
         );
         tModule.setIsEntry(true);
         return tModule.transpile(manager);
@@ -107,7 +107,7 @@ async function addAngularCLIResources(manager) {
 
       const tModule = await manager.resolveTranspiledModuleAsync(
         finalPath,
-        '/'
+        null
       );
 
       await tModule.transpile(manager);
@@ -121,7 +121,7 @@ async function addAngularCLIResources(manager) {
         const finalPath = absolute(join(app.root || 'src', p));
         const tModule = await manager.resolveTranspiledModuleAsync(
           finalPath,
-          '/'
+          null
         );
         tModule.setIsEntry(true);
         return tModule.transpile(manager);

packages/app/src/sandbox/eval/presets/dojo/index.js

@@ -16,10 +16,11 @@ export default function initialize() {
     {
       setup: async manager => {
         const stylesPath = absolute(join('src', 'main.css'));
+
         try {
           const tModule = await manager.resolveTranspiledModuleAsync(
             stylesPath,
-            '/'
+            null
           );
           await tModule.transpile(manager);
           tModule.setIsEntry(true);

packages/app/src/sandbox/eval/transpiled-module.js

@@ -461,7 +461,7 @@ export default class TranspiledModule {
       resolveTranspiledModuleAsync: (depPath: string, options = {}) =>
         manager.resolveTranspiledModuleAsync(
           depPath,
-          options.isAbsolute ? '/' : this.module.path,
+          options.isAbsolute ? null : this,
           options.ignoredExtensions
         ),
       getModules: (): Array<Module> => manager.getModules(),

packages/app/src/sandbox/eval/transpilers/sass/worker/sass-worker.js

@@ -24,7 +24,7 @@ const resolveAsyncModule = (
   { ignoredExtensions }?: { ignoredExtensions?: Array<string> }
 ) =>
   new Promise((r, reject) => {
-    const sendId = Math.random() * 10000;
+    const sendId = Math.floor(Math.random() * 10000);
     self.postMessage({
       type: 'resolve-async-transpiled-module',
       path,

packages/app/src/sandbox/index.js

@@ -78,7 +78,7 @@ requirePolyfills().then(() => {
     sendReady();
 
     setupHistoryListeners();
-    setupConsole();
+    // setupConsole();
   }
 
   if (process.env.NODE_ENV === 'test' || isStandalone) {

packages/sandbox-hooks/.babelrc

@@ -5,8 +5,9 @@ type Suggestion = {
   title: string,
   action: Function,
 };
+const ErrorClass = Error;
 
-export default class SandboxError extends Error {
+export default class SandboxError extends ErrorClass {
   severity: 'error' | 'warning';
   type: string;
   module: Module;