YoastSEO.js icon indicating copy to clipboard operation
YoastSEO.js copied to clipboard

Problem with integrating YoastSEO.js using webpack

Open rafalsliwinski3991 opened this issue 8 years ago • 3 comments

I want to integrate YoastSEO.js to my project. I made bundle.js with webpack but get the error like below. My code:

var SnippetPreview = require( "yoastseo" ).SnippetPreview;
var App = require( "yoastseo" ).App;

window.onload = function() {
	var focusKeywordField = document.getElementById( "id_keyword" );
	var contentField = document.getElementById("id_content");

	var snippetPreview = new SnippetPreview({
		targetElement: document.getElementById( "snippet" )
	});

	var app = new App({
		snippetPreview: snippetPreview,
		targets: {
			output: "output"
		},
		callbacks: {
			getData: function() {
				return {
					keyword: focusKeywordField.value,
					text: contentField.value
				};
			}
		}
	});

	app.refresh();

	focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
	contentField.addEventListener( 'change', app.refresh.bind( app ) );
};

Error:

new_bundle.js:35888 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at AssessorPresenter.renderIndividualRatings (new_bundle.js:35888)
    at AssessorPresenter.render (new_bundle.js:35848)
    at App.runAnalyzer (new_bundle.js:27152)
    at App._pureRefresh (new_bundle.js:27004)
    at invokeFunc (new_bundle.js:8919)
    at leadingEdge (new_bundle.js:8929)
    at App.debounced [as _pureRefresh] (new_bundle.js:8994)
    at App.refresh (new_bundle.js:26992)
    at invokeFunc (new_bundle.js:8919)
    at trailingEdge (new_bundle.js:8966)

I have no idea what is wrong. I will be grateful for your help

rafalsliwinski3991 avatar May 17 '17 13:05 rafalsliwinski3991

I get the same error

BrunoMCTeixeira avatar Dec 26 '17 15:12 BrunoMCTeixeira

We are trying to integrate Yoast-seo.js by using Webpack concept and we are facing the same problem.

Did you solve your problem?

Please, could you give me some idea to integrate Yoast-SEO js by using Webpack?

yosat

kiruba21 avatar May 03 '19 11:05 kiruba21

I'm also facing this error in yoastSEO.js using webpack.

import { Researcher, Paper } from "yoastseo";

const paper = new Paper( "Text to analyze", { keyword: "analyze", } ); const researcher = new Researcher( paper );

console.log( researcher.getResearch( "wordCountInText" ) );

var SnippetPreview = require( "yoastseo" ).SnippetPreview; var App = require( "yoastseo" ).App;

window.onload = function() { var focusKeywordField = document.getElementById( "focusKeyword" ); var contentField = document.getElementById( "content" );`

var snippetPreview = new SnippetPreview({
    targetElement: document.getElementById( "snippet" ),
    baseURL: "{{url('/')}}/",
    placeholder:{
        urlPath:"slug goes here"
    }
});

var app = new App({
    snippetPreview: snippetPreview,
    targets: {
        output: "output"
        
    },
    callbacks: {
        getData: function() {
            return {
                keyword: focusKeywordField.value,
                text: contentField.value
            };
        }
    }
});

app.refresh();

focusKeywordField.addEventListener( 'change', app.refresh.bind( app ) );
contentField.addEventListener( 'change', app.refresh.bind( app ) );

};`

consoleerror-yoast

Ramkumarodoo avatar May 03 '19 11:05 Ramkumarodoo