Error with Angular 8 ssr render

DireWereWolf commented 3 years ago

Angular v8

Project build works fine, however when app trying to start with command node dist/server it produces such error:

TypeError: Cannot use 'in' operator to search for 'URLSearchParams' in undefined
at Module.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:49505)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:26542)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13444
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:81
at Object.<anonymous> (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:189)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at eval (webpack:///external_%22@gobistories/gobi-web-integration%22?:1:18)
at Object.@gobistories/gobi-web-integration (/app/dist/server.js:832:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at Object.@gobistories/gobi-web-integration (webpack:///./dist/server/main.js?:48489:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ts (webpack:///./dist/server/main.js?:26269:30)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ngfactory.js (webpack:///./dist/server/main.js?:26222:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/components/job.component.ngfactory.js (webpack:///./dist/server/main.js?:30985:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/job.module.ngfactory.js (webpack:///./dist/server/main.js?:31401:11)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/main.server.ts (webpack:///./dist/server/main.js?:47841:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object.0 (webpack:///./dist/server/main.js?:47872:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at eval (webpack:///./dist/server/main.js?:84:18)
at eval (webpack:///./dist/server/main.js?:87:10)
at Object../dist/server/main.js (/app/dist/server.js:96:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at eval (webpack:///./server.ts?:46:10)
at Object../server.ts (/app/dist/server.js:216:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at /app/dist/server.js:84:18
at Object.<anonymous> (/app/dist/server.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE npm ERR! errno 1

package.json:

"@angular-devkit/build-angular": "^0.803.25",
"@angular/cli": "^8.3.25",
"@angular/compiler-cli": "^8.2.14",
"webpack-cli": "^3.1.2",
 "webpack-node-externals": "^1.7.2"

 "engines": {
      "node": "12.18.3"
    }

webpack.config.js:

module.exports = {
    entry: {
        server: './server.ts'
    },
    resolve: {
        extensions: ['.js', '.ts'],
        alias: {
           '@gobistories/gobi-web-integration$': '@gobistories/gobi-web-integration/dist/index.js',
        }
    },
    target: 'node',
    externals: [
        /(node_modules|main\..*\.js)/,
        nodeExternals({
            whitelist: [
                /^@gobistories\/gobi-web-integration/,
            ]
        })
    ],
    output: {...}
...

angular.json:

 "projects": {
    "...": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],
            "styles": [
              ...
            ],
            "scripts": [
              "./node_modules/@gobistories/gobi-web-integration/dist/index.js"
            ]
            ...

taraldga commented 3 years ago

Hi @DireWereWolf ,

Thanks for reporting the issue! Just to help me figure out whats going wrong here, could you answer a few questions?

What version of @gobistories/gobi-web-intergration are you currently on?
Have you been able to run your code on any earlier versions of @gobistories/gobi-web-intergration
You are trying to just run your development server for your angular project, correct?

Thanks!

DireWereWolf commented 3 years ago

Hi @DireWereWolf ,

Thanks for reporting the issue! Just to help me figure out whats going wrong here, could you answer a few questions?

What version of @gobistories/gobi-web-intergration are you currently on?

Have you been able to run your code on any earlier versions of @gobistories/gobi-web-intergration

You are trying to just run your development server for your angular project, correct?

Thanks!

Sure,

1) "@gobistories/gobi-web-integration": "^6.9.4", 2) We haven't tried previous versions, only this one 3) Yes, we tried to run built version for development server, btw the rest of third-parties which added to config in a same way (I've added config example in issue description) works fine, for example cropperjs. Maybe it will help you figure out the issue, please see croperjs config lines example (we use esm version from their dist)

resolve: {
        extensions: ['.js', '.ts'],
        alias: {
            'cropperjs$': 'cropperjs/dist/cropper.esm.js'
        }
    },
    target: 'node',
    externals: [
        /(node_modules|main\..*\.js)/,
        nodeExternals({
            whitelist: [
                /^cropperjs/,
            ]
        })
    ],

Our build process: 1) ng build --aot --configuration=${PROFILE:-development} && ng run project:server:${PROFILE:-development} 2) webpack --config webpack.server.config.js --progress --colors --mode ${PROFILE:-development} After these we run built version with node dist/server Thats it

taraldga commented 3 years ago

Thank you!

It seems like there is an issue with the fetch polyfill we have been using, causing error on node applications in some instances (https://github.com/github/fetch/issues/821).

I have pushed a new version of @gobistories/gobi-web-intergration, 6.9.8, could you try again with that version?

DireWereWolf commented 3 years ago

@taraldga We've tried to build project with latest package version (6.9.8) and had such error (now it occurs on a build stage, even earlier than we had before)

-----> Installing binaries
       engines.node (package.json):  12.18.3
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 12.18.3...
       Downloading and installing node 12.18.3...
       Using default npm version: 6.14.6

-----> Restoring cache
       Cached directories were not restored due to a change in version of node, npm, yarn or stack
       Module installation may take longer for this build

-----> Installing dependencies
       Installing node modules
       npm ERR! @babel/polyfill not accessible from @gobistories/gobi-web-integration

       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.iQ1wY/_logs/2020-12-18T15_23_28_015Z-debug.log

DireWereWolf commented 3 years ago

@taraldga We've fixed build (problem was on our side, however it doesn't help. Error after fix (mentioned it for the future, if you gonna update some guides or examples

ReferenceError: navigator is not defined
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:8:3041)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:5140)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:27533)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:93:1940)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:62097)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:29931)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13444
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:81
at Object.<anonymous> (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:189)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at eval (webpack:///external_%22@gobistories/gobi-web-integration%22?:1:18)
at Object.@gobistories/gobi-web-integration (/app/dist/server.js:832:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at Object.@gobistories/gobi-web-integration (webpack:///./dist/server/main.js?:48487:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ts (webpack:///./dist/server/main.js?:26269:30)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ngfactory.js (webpack:///./dist/server/main.js?:26222:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/components/job.component.ngfactory.js (webpack:///./dist/server/main.js?:30983:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/job.module.ngfactory.js (webpack:///./dist/server/main.js?:31399:11)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/main.server.ts (webpack:///./dist/server/main.js?:47839:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object.0 (webpack:///./dist/server/main.js?:47870:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at eval (webpack:///./dist/server/main.js?:84:18)
at eval (webpack:///./dist/server/main.js?:87:10)
at Object../dist/server/main.js (/app/dist/server.js:96:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at eval (webpack:///./server.ts?:46:10)
at Object../server.ts (/app/dist/server.js:216:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at /app/dist/server.js:84:18
at Object.<anonymous> (/app/dist/server.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)

We've fixed it on our side, updated server.ts with line global['navigator'] = win.navigator;

After that another error had raised:

ReferenceError: btoa is not defined
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:21804
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:22183
at u (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:22293)
at e.exports (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:23183)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:93:8267)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:93:6808)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:62106)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at Object.i.m.r (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:10:29931)
at i (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13541)
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:94:13444
at /app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:81
at Object.<anonymous> (/app/node_modules/@gobistories/gobi-web-integration/dist/index.js:2:189)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at eval (webpack:///external_%22@gobistories/gobi-web-integration%22?:1:18)
at Object.@gobistories/gobi-web-integration (/app/dist/server.js:832:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at Object.@gobistories/gobi-web-integration (webpack:///./dist/server/main.js?:48487:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ts (webpack:///./dist/server/main.js?:26269:30)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/gobi/components/gobi-view/gobi-view.component.ngfactory.js (webpack:///./dist/server/main.js?:26222:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/components/job.component.ngfactory.js (webpack:///./dist/server/main.js?:30983:10)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/app/job/job.module.ngfactory.js (webpack:///./dist/server/main.js?:31399:11)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object../src/main.server.ts (webpack:///./dist/server/main.js?:47839:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at Object.0 (webpack:///./dist/server/main.js?:47870:18)
at __webpack_require__ (webpack:///./dist/server/main.js?:20:30)
at eval (webpack:///./dist/server/main.js?:84:18)
at eval (webpack:///./dist/server/main.js?:87:10)
at Object../dist/server/main.js (/app/dist/server.js:96:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at eval (webpack:///./server.ts?:47:10)
at Object../server.ts (/app/dist/server.js:216:1)
at __webpack_require__ (/app/dist/server.js:20:30)
at /app/dist/server.js:84:18
at Object.<anonymous> (/app/dist/server.js:87:10)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)

Possible solution could be here, but it should be in a library, please have a look https://stackoverflow.com/questions/23097928/node-js-throws-btoa-is-not-defined-error

taraldga commented 3 years ago

Hi again @DireWereWolf,

Good to hear that it worked to "manually" assign the variable. It seems like you are indeed right about this, and I suppose that the btoa library is something that we should include in the package for SSR solutions.

I was wondering, could you try to install the package in your codebase, and eventual others that might cause issues later and report them to me? That way I can add them to our package itself, so that we better can support SSR in the feature, and possibly save some communication time in the process?

Link to a BTOA for nodeJS: https://www.npmjs.com/package/btoa

DireWereWolf commented 3 years ago

@taraldga We installed btoa, after that defined it in server.ts (before we import AppServerModule) const btoa = require('btoa');

Had the same error, however when we added btoa to global with global['btoa'] = btoa It has been fixed

so the fix was with: 1) btoa install 2) update of server.ts with lines

const btoa = require('btoa');
global['btoa'] = btoa;

Thanks for support

Will you release some updates from your side, or it still should be fixed on client side in the future?

taraldga commented 3 years ago

@DireWereWolf Wonderfull, thanks for updating us! I will try to figure out a way to do this smoother, and update our readme.md.

Gobi-Stories / Gobi-Web-Integration

Error with Angular 8 ssr render #9