Invisible recaptcha + webpack + live form

[martinjinda]

Hello guys, we want to use invisible reCaptcha, since the regular one is working perfectly. But we got following error from the compiled js script Nette is not defined.

If I use the script the included directly in main.js with window.Nette or $.nette the form is sent but we don't get any response from Nette. We also have the form included in the snippet (#12).

main.js compiled with webpack

import 'recaptcha.invisible.js';

require('nette.ajax.js');

window.Nette = require('live-form-validation');
window.Nette.initOnLoad();

$.nette.init();
$.nette.ext('unique');

We have (but I tested with Nette 3.0 + reCaptcha 3.2 and it was the same problem).

• Nette 2.4
• contributte/recaptcha 3.1.0
• PHP 7.2

Has anyone run into the same problem? Thank you

[f3l1x]

Hi. Unfortunately I don't know. Maybe others.

[JanGalek]

Hi, I'll look at it this week ;)

[spulakk]

Hello, any news on this issue? I'm getting the same error.

Same Nette and ReCaptcha version, PHP 7.1

[JanGalek]

I investigated, Have you added https://nette.github.io/resources/js/3/netteForms.min.js too ?

ping @martinjinda @spulakk

[JanGalek]

Problem is that it create anonym function so invisibleRecaptcha dont know about this var. I tried add

window.Nette = require('live-form-validation');
window.Nette.initOnLoad();

into invisibleRecaptcha.js and it works.

[spulakk]

I tried adding the snippet at the start of invisibleRecaptcha.js and it didn't change anything for me. Also I was fairly time constrained so I went with my own implementation of ReCaptcha already. Thanks for trying though, hopefully it helps @martinjinda at least.

[JanGalek]

@spulakk ok :)

Problem solved with configuration webpack

ebpack.config.js:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'www'),
    },
    plugins: [
        new webpack.ProvidePlugin({
            Nette: 'live-form-validation'
        }),
    ],
};

of course remove require of live-form-validation

my index.js

Nette.initOnLoad();
import './invisibleRecaptcha'

documentation: https://webpack.js.org/guides/shimming/#shimming-globals

[martinjinda]

Thanks @JanGalek. It's great, we start using live-form-validation-es6 so you don't have to provide plugin in webpack config. And it works.