Unable to start Quokka compiler

frankdavidcorona commented 4 years ago

Issue description or question

I already bougth the Pro version and I can't start the compiler in my current project getting the explained above error message. Also already added this config in my package.json

"quokka": {
    "node": "~/.nvm/versions/node/v12.18.3/bin/node"
  },

Also tried adding this extra config:

"quokka": {
    ...,
    "ts": {
      "compilerOptions": {
        "target": "es2015"
      }
    }
  },

but the error persists

Quokka.js Console Output

Quokka 'cases-year.component.ts' (node: v12.18.3, TypeScript: v3.5.3)
 
Platform not supported. 
  at new DOMStorageStrategy ./node_modules/common/DOMStorageStrategy.ts:9
  at ./node_modules/cacheable.decorator.ts:18
  at Object.__decorate ./node_modules/tslib/tslib.js:95
  at Object.<anonymous> ./src/app/core/services/employee.service.ts:59
  at Module._compile internal/modules/cjs/loader.js:1137
  at Module.m._compile ./node_modules/ts-node/src/index.ts:392
  at Module._extensions..js internal/modules/cjs/loader.js:1157
  at Object.require.extensions.<computed> [as .ts] ./node_modules/ts-node/src/index.ts:395
  at Module.load internal/modules/cjs/loader.js:985
  at Function.Module._load internal/modules/cjs/loader.js:878
  at Module.require internal/modules/cjs/loader.js:1025
  at require internal/modules/cjs/helpers.js:72
  at Object.<anonymous> ./src/app/core/services/preload.service.ts:11
  at Module._compile internal/modules/cjs/loader.js:1137
  at Module.m._compile ./node_modules/ts-node/src/index.ts:392
  at Module._extensions..js internal/modules/cjs/loader.js:1157
  at Object.require.extensions.<computed> [as .ts] ./node_modules/ts-node/src/index.ts:395
  at Module.load internal/modules/cjs/loader.js:985
  at Function.Module._load internal/modules/cjs/loader.js:878
  at Module.require internal/modules/cjs/loader.js:1025
  at require internal/modules/cjs/helpers.js:72
  at Object.<anonymous> ./src/app/core/services/index.ts:2
  at Module._compile internal/modules/cjs/loader.js:1137
  at Module.m._compile ./node_modules/ts-node/src/index.ts:392
  at Module._extensions..js internal/modules/cjs/loader.js:1157
  at Object.require.extensions.<computed> [as .ts] ./node_modules/ts-node/src/index.ts:395
  at Module.load internal/modules/cjs/loader.js:985
  at Function.Module._load internal/modules/cjs/loader.js:878
  at require internal/modules/cjs/helpers.js:72
  at Object.<anonymous> src/app/modules/performance/containers/cases-year/cases-year.component.ts:22
  at Module._compile internal/modules/cjs/loader.js:1137

Code editor version

Visual Studio Code v1.48.2

OS name and version

Linux

smcenlly commented 4 years ago

Could you please:

Provide us with sample code of what is happening in cases-year.component.ts?
Provide us with your tsconfig.json file?

If you compile your project with TypeScript and then run node on the compiled cases-year.component.ts file (e.g. node dist/app/modules/performance/containers/cases-year/cases-year.component.js), do you get the same error?

frankdavidcorona commented 4 years ago

@smcenlly In this project we're using a package for make a cache from prev API request called: ngx-cacheable. I'm almost sure that this package it's the issue due to adding comments to the usage this error start to dissapear from different points. Let me explain better: If I removed the usage of this implementation from: ./src/app/core/services/employee.service.ts:59 then the error not notify anymore from this service and jump to another service used in the component an that use this same approach.

This is an example of usage of this package in one of the services that use this component that cuase error:

import { Cacheable, CacheBuster, GlobalCacheConfig } from 'ngx-cacheable';
import { DOMStorageStrategy } from 'ngx-cacheable/common/DOMStorageStrategy';

GlobalCacheConfig.storageStrategy = DOMStorageStrategy;
const cacheBuster$ = new Subject<void>();
// define standard configuration for cache
const cacheConfig = {
    cacheBusterObserver: cacheBuster$,
    ...iCacheConfig,
};

@Cacheable({ ...cacheConfig })
    getProviders(): Observable<any> {
        return this.http
            .post(`${this.baseUrl}/providers`, {})
            .pipe(map(getData));
    }

In another project, when we are not using this package, Quokka return this error:

Quokka 'schedule.component.ts' (node: v12.18.3, TypeScript: v3.5.3)
 
Unexpected token } in JSON at position 1188 
  at parse ./node_modules/tsconfig/src/tsconfig.ts:195
  at readFileSync ./node_modules/tsconfig/src/tsconfig.ts:181
  at Object.loadSync ./node_modules/tsconfig/src/tsconfig.ts:151
  at readConfig ./node_modules/ts-node/src/index.ts:425
  at Object.register ./node_modules/ts-node/src/index.ts:189

Maybe we've missing some config for the package?

smcenlly commented 4 years ago

This is an example usage of this package in one of the services that use this component that causes an error:

We have investigated the ng-cacheable library and can see that the DOMStorageStrategy.ts class that you are using requires some browser-specific runtime components that are not available using Quokka's default runtime. As per our docs, Quokka runs your code in node.js (e.g. using ts-node ./src/app/core/services/employee.service.ts). The ngx-cacheable/common/DOMStorageStrategy.ts is designed to run in a browser environment (not node.js) and relies on the localStorage browser object, which is not available in node. Quokka does allow for a browser-like runtime by configuring JSDOM that adds polyfills for various browser runtime environment options (including localStorage). You may configure JSDOM with Quokka as per our docs to try fix your problem.

In another project, when we are not using this package, Quokka return this error:

It looks like there may be an issue with your tsconfig.json file as this error is occurring when parsing your tsconfig file (see source code). Does your project compile with TypeScript?

For us to assist you further, please provide us with:

A stand-alone code sample (file content) that is not working
Your tsconfig.json for this project.

If you continue to have problems, please try compiling your project with TypeScript and then run node on the compiled code to better determine why your code is not working in Quokka. If you need further assistance, please provide us with a sample repo that includes your package.json, tsconfig.json and code sample that is not working for you so we can replicate your problem ourselves.

smcenlly commented 4 years ago

Closing this issue (assuming our previous comment fixes your problem).

If you're still having problems, please reply and we can re-open the issue.

wallabyjs / quokka