Support: Node modules (import/require) for generated file with bundled JS lib

[kaidoj]

ReferenceError: Lang is not defined Lang = new Lang();
This points to the line in package code after the lang.min.js code

Still having this issue after update using laravel, laravel elixir webpack. Am i doing something wrong?

gulpfile looks like this

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

require('laravel-elixir-webpack-react');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

var Task = elixir.Task;
elixir.extend('langjs', function(path) {
    new Task('langjs', function() {
        gulp.src('').pipe(shell('php artisan lang:js ' + (path || 'resources/assets/js/translations.js')));
    });
});

elixir(mix => {
    mix.sass('app.scss')
        .langjs()
        .webpack([
            'translations.js',
            'app.jsx'
        ], 'public/js/app.js')
        .version([
            'css/app.css',
            'js/app.js'
        ]);
});

Then i tryed even import Lang from translations.js in my component without having translations included in gulp file. Both cases same issue.

import Lang from '../../translations.js'

[audunru]

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)

[rmariuzzo]

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
.

[audunru]

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.

[rmariuzzo]

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.

[arrilot]

Hi, any updates on this?

[rmariuzzo]

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
.

[rmariuzzo]

Will address a fix this week.

[veksen]

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

[rmariuzzo]

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

[tobia]

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.

[rmariuzzo]

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

[SwiTool]

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()

[rmariuzzo]

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

[rmariuzzo]

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

[SwiTool]

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

[rmariuzzo]

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.

[audunru]

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',
]));

[michgeek]

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');
// ...