TypeError: undefined is not an object (evaluating 'link.import.querySelector')

[chrisvfritz]

TypeError: undefined is not an object (evaluating 'link.import.querySelector')

Hi,

You are using html imports that are basically not handled by PhantomJS. So I'm afraid you will have to use an other technique to load your html file for the plugin to work.

If the concerned html file is not important for your prerendering, you can try to just ignoreJSErrors: true in the plugin options (see documentation)

[sunshineo]

I found the problem in my index.html file

<script>
      var link = document.querySelector('link[rel=import]');
      var content = link.import.querySelector('.svg-sprite');
      document.head.appendChild(content.cloneNode(true));
  </script>

[sunshineo]

After I commented those out, I got error like this:

/Users/gordon/workspace/CrewGuru/crewguru-web-ng2/node_modules/prerender-spa-plugin/lib/compile-to-html.js:80
                    if (error) throw stdout
                               ^
WARNING: JavaScript error while prerendering: /home
TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.apply')

  phantomjs://code/phantom-page-render.js:26 in onError

What did I do wrong this time?

Hi,

There are many features that are not supported by PhantomJS. HTML imports are one of them. But also many es6 features.

Please try to add core-js polyfill like putting :

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>

At the top of your head.

Or, if you're using CommonJS syntax, just npm install core-js then require('core-js'); in your main document.

[sunshineo]

Hi @jnrdt , thank you very much for the suggestions. I am not very clear about all the concepts though. We simply have a angular2 project (Typescript) created using angular-cli, which I believe uses WebPack. How do I tell if we are using ES6 or CommonJS?

Hi,

Webpack typically can use CommonJS as dependency system. Typescript is a superset of es6 so you will have to do something to make your app work on old browsers (or poor browsers like PhantomJS use in this plugin)

You can just tell Typescript to produce a transpiled code that can work on old browsers. Under the hood, it will use core-js as polyfill. So you can, without any action on Typescript, just inject

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>

In the head of your document (see the official doc)

[max-schu]

i get almost the same error:

undefined is not an object (evaluating 'modules[moduleId].call')

can't find anything similar… still a polyfill issue? i tried including core-js allthough its supposed to be included already.

anybody has a clue/fix?

[drewlustro]

Hello @max-schu !

Errors like those can happen when you have a dependency written in ES6 (perhaps in an ill-maintained Vue plugin module?).

The resulting code is not transpiled by babel into ES5 before PhantomJS tries to evaluate it.

Perhaps try to alter your webpack.config.js like so:

// ....
// rest of webpack config
// ...

module: {
  rules: [
    // ... other rules
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [
        path.join(__dirname, 'src'), 
        path.join(__dirname, 'node_modules', 'vue-offending-plugin'), // <--- FORCE transpile this module
      ],
      exclude: path.join(__dirname, 'node_modules')
    },
    // .. the rest of your rules
  ]
},

// ....
// rest of webpack config
// ...

[drewlustro]

Going to close until @max-schu comes back to help debug.

[max-schu]

sorry for not getting back quicker.
I fixed it by adding babel-polyfill. So i think either your solution or polyfilling helps.

[drewlustro]

Thanks for the info!