Can't make it to work on clean Laravel 5.6 installation

chilio commented 6 years ago

Hi @rmariuzzo,

I want to use your package in my project, but still cannot find a solution to my errors, Most probably it is because I'm not master in webpack, ES and related, and I might not get certain aspects straight away, and therefore documentation was unfortunately not enough for me. So to the problems I faced... I've tried to convert lang files to messages.js and use them in my project...

finally I managed to generate messages by putting messages.js in resources and building them via mix.js('resources/assets/js/messages.js','public');, but then I got a problem on importing them cause chrome states there is no export default....
so I tried to import * as messages from './messages.js' - still no luck
fiddled with including javascript via module or text/javascript
Unfortunately while I thought moving forwards and getting rid of all console errors, I was not able to see lang (not Lang) variable available in my chrome dev console, which I believe is a starting point to use it in my own javascript files.

I don't want to include all the steps I've tried, cause for sure it is pointless, and solution is I believe pretty simple. So my question is, can you post clean workflow (where to put examples, what to execute) on how to get this working on clean laravel 5.6 installation? It would be really helpful to me, and I also believe to other users...

rmariuzzo commented 6 years ago

Hey @chilio ! If you are using this package rmariuzzo/laravel-localization-loader you don't need to convert your messages.

After configuration you should be able to use them as:

require('../../resources/lang/en/messages.php')

chilio commented 6 years ago

Hey @rmariuzzo I was suspecting this, but it is still not working no matter how I include files. Is webpack capable to include files from directory that is outside of webroot (via require - I get errors)?

rmariuzzo commented 6 years ago

Is webpack capable to include files from directory that is outside of webroot? @chilio yes, I think so.

rmariuzzo commented 6 years ago

Ah, I think I'm understanding the issue better. Are you able to generate a messages.js from your PHP files?

chilio commented 6 years ago

@rmariuzzo yes but only if I run webpack.... If I try to do it in my javascript files I get errors... I believe if I copied all my lang files to public, this might work, but this is still another task for webpack....

chilio commented 6 years ago

Yes it generates without a problem but I believe it includes lots of downwards compatibility routines via babel....

chilio commented 6 years ago

@rmariuzzo and by webrootabove I meant publicfolder in Laravel (sorry I can not edit this comment anymore)

chilio commented 6 years ago

@rmariuzzo I believe you want to know that I've tried to run this package tests and laravel-localization-loader › should load PHP Laravel translation file fails... But still I don't think it covers my problem, cause I still get messages.js generated in my public folder. My question is why contents of this file can't be imported (used via import...)?

chilio commented 6 years ago

@rmariuzzo any hints on this topic?

rmariuzzo commented 6 years ago

@chilio so test are failing... let me check.

rmariuzzo commented 6 years ago

I ran the tests on master and develop. I haven't found any issue so far:

I will continue to investigate.

chilio commented 6 years ago

@rmariuzzo I'm on Windows 10, this is my result:

Actually this is the error I get when running messages.js so I think it might be related...

And on Ubuntu 16.04 it goes green.

BTW Same results for master and develop. Unfortunately although I develop on Windows, my test environment is Ubuntu, so it should work either way... Hope we can solve it somehow....

rmariuzzo commented 6 years ago

@chilio interesting, I will need to test this on a virtual machine.

chilio commented 6 years ago

@rmariuzzo I am still trying to put this into working, but I still suspect I didn't understand the workflow entirely. So to make sure I am doing things correctly I post steps that I follow (all refers to clean Laravel 5.6 build):

npm install lang.js
yarn add laravel-localization-loader --dev

I've created /resources/assets/js/messages.js with contents :

// messages.js
export default {
// The key format should be: 'locale.filename'.
'en.messages': require('../../resources/lang/en/messages.php'),
'es.messages': require('../../resources/lang/es/messages.php'),
'en.auth': require('../../resources/lang/en/auth.php'),
'es.auth': require('../../resources/lang/es/auth.php'),
}

modified target files to make sure they exist and contain respective arrays data

I've created /resources/assets/js/page.js with contents:

// page.js
import Lang from 'lang.js'
import messages from './messages'
const lang = new Lang({ messages })
lang.get('messages.hello')

I've added to webpack.mix.js as suggested in docs

mix.webpackConfig({
module: {
    rules: [
        {
            // Matches all PHP or JSON files in `resources/lang` directory.
            test: /resources(\\|\/)lang.+\.(php|json)$/,
            loader: 'laravel-localization-loader',
        }
    ]
}
});

and to build them and move to public

mix.js('resources/assets/js/messages.js','public');
mix.js('resources/assets/js/page.js','public');

I've added to homepage welcome.blade.php

<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="module" src="{{asset('page.js')}}"></script>

Errors

Uncaught SyntaxError: The requested module './lang.js' does not provide an export named 'default'

And when I change type of page.js to text/javascript

Uncaught SyntaxError: Unexpected identifier

Uncaught TypeError: Failed to resolve module specifier "lang.js". Relative references must start with either "/", "./", or "../".

Still stuck with this, but I believe I am doing something wrong.

Could you please check these steps and move me into right direction?

Any hints greatly appreciated....

rmariuzzo commented 6 years ago

Hey @chilio! I appreciate a lot all those details, I will try to reproduce in the weekend and come with a solution. I suspect there's something wrong on how I build the dist files for Lang.js or how messages is generated. That's just what I think and what I want to test this weekend.

chilio commented 6 years ago

Hey @rmariuzzo any conclusions or hints?

rmariuzzo commented 6 years ago

Hey @chilio! I have been trying to quickly reproduce your scenario on codesandbox.io, however without success so far (if you could setup a reproducible environment this would help me a lot).

However, I have tested that import Lang from 'lang.js' works as expected as js script file, using the vainilla configuration on codesandbox.io.

Could you please create a reproducible env? 🙇

rmariuzzo commented 6 years ago

@chilio I was able to reproduce the Windows error your reported were tests were failing. The issue is on the webpack config. Basically, changing from:

- test: /resources\/lang.+\.(php|json)$/,
+ test: /resources[\\\/]lang.+\.(php|json)$/,

Looks like, I have to include both / and \ as directory delimiters to make Windows happy too. Therefore, [\\\/] will work on both OSes instead of \/.

BTW, I updated both master and develop branches to reflect this change.

chilio commented 6 years ago

@rmariuzzo thanks for info. I'll try to do that. But in the meanwhile could you share your test on codesandbox.io. It will be easier for me to find the problem on working example...

chilio commented 6 years ago

Hey @rmariuzzo Here is a link to codesandbox.io where I can't manage it to work, cause I don't know how to force loader here. I have not used it before and therefore I am missing certain logic here for sure.

However it does not reflect all Laravel build steps like npm run dev for public asset creation. Therefore I've created this github test repo with basic installation of laravel 5.6. On this basic welcome page I want to access any of defined translations in

// resources/assets/js/messages.js
export default {
    // The key format should be: 'locale.filename'.
    'en.pagination': require('../../../resources/lang/en/pagination.php'),
    'en.auth': require('../../../resources/lang/en/auth.php'),
}

via lang.get('auth.failed') for example. I am testing it in chrome console and no matter what I do, I get lang undefined or other errors.

Could you take a look on it?
If I get to this point, then all should go smoothly further for me. Adding PR to this would be super, hyper great, but for sure I will be fine with hints on where to put files, and how to execute required procedures, to make this working.

BTW I can confirm tests are green now on windows (in master and develop) 👍

chilio commented 6 years ago

Hey @rmariuzzo slowly getting on to work with this... As I suggested earlier my problems came from not understanding certain aspects, especially between compiled and not compiled js assets, how to run them or how to use/embed them. This is a GREAT package 👍 , however docs could be more helpful for that kind of newbies like me...

chilio commented 6 years ago

@rmariuzzo final question ? How do you recommend enclosing translations from sub directories and how to call them ?

chilio commented 6 years ago

Hey @rmariuzzo regarding my last question? Here is what I do: 'en.auth-message': require('../../../resources/lang/en/auth/message.php'), and then lang.get('auth-message.translation') which works. However doing this: 'en.auth/message': require('../../../resources/lang/en/auth/message.php'), and then lang.get('auth/message.translation') or laravel convention lang.get('auth.message.translation') does not translate. Any indeas on how to best deal with this?

rmariuzzo commented 6 years ago

Let's discuss this in another issue. Can you create it with the same content?

rmariuzzo / laravel-localization-loader

Can't make it to work on clean Laravel 5.6 installation #5