Uncaught ReferenceError: Translator is not defined when using Webpack Encore

[ptyskju]

I am using Symfony 4.1 with installed Webpack Encore. Translator is properly imported by
var Translator = require('bazinga-translator');
but I am receiving that error in my console: Uncaught ReferenceError: Translator is not defined Translator is located correctly in app.js file.

[dirmax]

Hello, try this

In base.html.twig add before main application javascript file

<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script src="{{ url('bazinga_jstranslation_js'  }}"></script>

<script src="{{ asset('build/app.js') }}"></script> <-- builded javascript file

In webpack.config.js add this

module.exports = Encore.getWebpackConfig();
module.exports.externals = [{
        'bazinga-translator': 'Translator'
    }
];

And compile

yarn encore production

[Uneo7]

Tip : To use the bundle with VueJs & Encore, add this line before new Vue : Vue.prototype.$translator = Translator; Now we can use {{ this.$translator.trans('string') }} in our components.

[manuelkiessling]

For me, simply adding bazinga-translator to the autoProvideVariables function call of the Encore object in file webpack.config.js, after extending base.html.twig as described by @dirmax, also did the job:

Encore.autoProvideVariables({
    'bazinga-translator': 'Translator'
})

[degregar]

I have the same error when I try SSR. I've already set autoProvideVariables and tried to conditionally load with if (typeof window === 'undefined') { const Translator = require('bazinga-translator'); }

Nothing worked so far. How should I fix that?

[degregar]

For now I've made a quick workaround:

1. Define new variable in the file I want to use Translator const TranslatorBackup = require('bazinga-translator');

2. Check if I have my old variable, if not, use new one: {typeof Translator === "undefined" ? TranslatorBackup.trans(item.value) : Translator.trans(item.value)}

I've tried to define it above the class I'm rendering this in, but it throws same errors.

[timwhite]

If you don't mind dumping your languages, and loading ALL languages into your built file, then the following webpack works without any extra script tags in the twig templates.

// Load the Translator from the composer version
export const Translator = require('../../vendor/willdurand/js-translation-bundle/Resources/js/translator');
// Make it global
global.Translator = Translator;
// Load the default config
require('./bazinga/translations/config');
// Load each language here. When we add more languages, we need to add them here.
require('./bazinga/translations/en');

I'm using the dump command bin/console bazinga:js-translation:dump --format=js --merge-domains assets/js/bazinga to put the files in a useful spot for webpack, and to just dump out the JS versions (with merged domains to again shrink the folder structure)

[Schyzophrenic]

For those interested, and thanks to other comments, I made it work in a separate component as described here: https://github.com/willdurand/BazingaJsTranslationBundle/issues/254#issuecomment-663666450

It allows to keep all the js managed by Webpack.

[flora-le]

Hello, try this

In base.html.twig add before main application javascript file

<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script src="{{ url('bazinga_jstranslation_js'  }}"></script>

<script src="{{ asset('build/app.js') }}"></script> <-- builded javascript file

In webpack.config.js add this

module.exports = Encore.getWebpackConfig();
module.exports.externals = [{
        'bazinga-translator': 'Translator'
    }
];

And compile

yarn encore production

Thank you so much it's working ! I had Translator undefined in Symfony 6.2

There is just a parenthesis missing here <script src="{{ url('bazinga_jstranslation_js') }}"></script>

I run npm run watch and Translator is defined now, great!

[kasali]

Hello, try this

In base.html.twig add before main application javascript file

<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script src="{{ url('bazinga_jstranslation_js'  }}"></script>

<script src="{{ asset('build/app.js') }}"></script> <-- builded javascript file

In webpack.config.js add this

module.exports = Encore.getWebpackConfig();
module.exports.externals = [{
        'bazinga-translator': 'Translator'
    }
];

And compile

yarn encore production

i have the same issue. Here my implementation :

{% block javascripts %}
   {{ parent()}}
       <script type="text/javascript" src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
    <script>
        console.log("translator.min.js should be loaded now");
    </script>  
    <script type="text/javascript" src="{{ asset('js/translation/messages.js') }}"></script>
    <script type="text/javascript" src="{{ path('bazinga_jstranslation_js', { 'domain': 'messages', '_format': 'js' }) }}"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
    <script src="{{ asset('/js/styles/datatable.js') }}"></script>
{% endblock %}