Support: Node modules (import/require) for generated file with bundled JS lib about laravel-js-localization HOT 18 OPEN

My solution to that problem is to use the command without including Lang.js

1. Assuming my output is : /resources/assets/js/messages.js

// Generate the messages without the lib
php artisan lang:js --no-lib

// Install `Lang.js` as a standalone package
npm install lang.js
// or
yarn add lang.js

2. Create a file in /resources/assets/js/lang.js

// Inside my /resources/assets/js/lang.js
import lang from 'lang.js';
import messages from 'js/messages';

const Lang = new lang({
    messages
});

export default Lang;

3. Now you can use Lang wherever you need

import Lang from `js/lang`; // ES6, with webpack configured to resolve `js => /resources/assets/js`
var Lang = require('path/to/your/lang.js'); // Alternatively

Lang.get('my.translation');
// ...

from laravel-js-localization.

Having similar problems.

gulpfile essentials:

mix.browserify('app.js');

app.js:

require('./language.js');

Browser:

Uncaught TypeError: Lang is not a constructor

It throws the exception at line 2 here (from language.js):

(function () {
    Lang = new Lang();

Using version 1.3.2 of Laravel-JS-Localization (which includes Lang.js 1.3.3)

from laravel-js-localization.

Will check today.

On Oct 19, 2016 5:48 AM, "Audun Rundberg" [email protected] wrote:

Having similar problems.

gulpfile essentials:

mix.browserify('app.js');

app.js:

require('./language.js');

Browser:

Uncaught TypeError: Lang is not a constructor

It throws the exception at line 2 here (from language.js):

(function () {
Lang = new Lang();

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#63 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAa2HyYvdpHduDxBW5hO_3uEGaJRpOUyks5q1edOgaJpZM4KZd9w
.

from laravel-js-localization.

OK, thanks. Browserify/Webpack is quite new to me so I tried different variations of require, import, etc, but basically I think me and @kaidoj both would like to combine everything into one JS file.

from laravel-js-localization.

I'm so sorry, I didn't had the time to check this issue. Will check for sure this weekend. I think I have all the info necessary to reproduce a release a fix.

from laravel-js-localization.

Hi, any updates on this?

from laravel-js-localization.

I will check on this again this weekend. Today, I'm in the hospital for the
last chemo.

On Oct 28, 2016 10:05 AM, "Nekrasov Ilya" [email protected] wrote:

Any updates on this?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
#63 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAa2H_2VEBEjvdZEdet2xFH3yMFNUBu7ks5q4gCUgaJpZM4KZd9w
.

from laravel-js-localization.

Will address a fix this week.

from laravel-js-localization.

Stopped me from using it. Any attempt at using it globally, or requiering through require() or import didn't work.

from laravel-js-localization.

Hey @veksen! Via browser of node env? I assume it is under node env. I'm following this issue from a while.

from laravel-js-localization.

I have the same problem.

This is my gulpfile:

var langFile = 'resources/assets/js/.lang.js';

gulp.task('lang_js', function() {
    gulp.src('').pipe(shell('php artisan lang:js ' + langFile));
});

elixir(function(mix) {
    ...
    mix.task('lang_js', 'resources/lang/**/*.php');
    mix.browserify(...);
    ...
});

It works like this:

• I tell Elixir to watch the PHP language files;
• when any of them changes, it runs lang:js into a hidden file in the resources/assets/js directory, so that it has a fixed name but is not tracked by Git;
• then I run Browserify on my application JS, which includes the generated file into the build and gives it a local name:

var Lang = require('./.lang');

The problem is that the generated file has this shape:

// part A

(function(root, factory) {
        "use strict";
        if (typeof define === "function" && define.amd) {
            define([], factory)
        } else if (typeof exports === "object") {
            module.exports = factory()              // (1)
        } else {
            root.Lang = factory() 
        }
})(this, function() {
    ...
    var Lang = ...
    ...
    // (2)
    return Lang
});

// part B

(function () {
    Lang = new Lang();
    Lang.setMessages(...);
})();

Part A is compatible with all uses, so it works in Browserify as well as a standalone JS, because it correctly adds Lang to the exports (1). But part B does not work, because it cannot find the name Lang, so it cannot replace it with its own instance, let alone add the messages.

I think that the two statements in part B should be moved in the place I marked as (2), so that they can modify the Lang variable before it's returned.

This would make the code compatible with Browserify and hopefully all the other packers.

from laravel-js-localization.

Hey @tobia! Thanks for details. Can you prepare a PR for this? This week I'm a little bit tight.

from laravel-js-localization.

Is it still under development ? I'm having trouble with require also.. I'm using Webpack.

error: Uncaught ReferenceError: Lang is not defined at Lang = new Lang()

from laravel-js-localization.

Yes, I started doing some tests last weekend. I will keep you all posted in this thread within the next 24hrs.

from laravel-js-localization.

@SwiTool I'm checking this right now, will post progress shortly.

from laravel-js-localization.

@rmariuzzo Hey, take your time.
Hope you are okay with those events .. :)

from laravel-js-localization.

Quick update, this will be implemented on v2 because it will represent a breaking change. I'm thinking that it will more useful if this package doesn't include the JS library. So the latter will fix this issue properly.

from laravel-js-localization.

Thanks for the update. My current solution is to stop trying to use import and require (as the whole issue is that doesn't work), but instead generate the language.js and combine it with my browserified app.js using mix.scripts

That solves my original issue, which was that I wanted to have just one app.js file with everything included.

Here's my gulpfile.js, I've included some comments. Perhaps it's helpful for anyone who comes looking for a fix until this is resolved.

const elixir = require('laravel-elixir');

const gulp = require('gulp');
const shell = require('gulp-shell');

elixir((mix) => {
    mix.task('update_js_routes', ['routes/*.php'])
    .copy('node_modules/bootstrap-sass/assets/fonts/bootstrap', 'public/build/fonts/bootstrap')
    .sass('app.scss')
    // Laravel-JS-Localization: Generate language.js
    .task('update_js_localization', ['resources/lang/en/*.php'])
    // Create intermediate app-browserify.js
    .browserify('app.js', 'resources/assets/js/build/app-browserify.js')
    // Combine and minify language.js and app-browserify.js into app.js
    .scripts(['build/language.js', 'build/app-browserify.js'], 'public/js/app.js')
    .scripts('feedleback-v1.js')
    .browserify('feedleback-v2.js')
    .version([
        'css/app.css',
        'js/app.js',
    ])
    // Use with php artisan serve --host 127.0.0.1
    .browserSync({
        proxy: 'localhost:8000',
    });
});
gulp.task('update_js_routes', shell.task([
    'php artisan routes:javascript',
]));
gulp.task('update_js_localization', shell.task([
    'php artisan lang:js resources/assets/js/build/language.js',
]));

from laravel-js-localization.