Error trying to load javascript scripts by it src attribute

ivanhdzd commented 6 years ago

Hi!, I am new in PHP and I try to create an API with Slim, but when I try to load a javascript file inside a template by <script src="dist/file.js"></script>, it launch an error: Uncaught SyntaxError: Unexpected token <.

My project structure is:

slim-tutorial
├── public
|    ├── dist
|    |    └── learning.js
|    └── index.php
├── templates
|    └── index.html
├── vendor
├── composer.json
└── composer.lock

My public/index.php code is:

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require __DIR__.'/../vendor/autoload.php';

$app = new \Slim\App(['settings' => $config]);

$container = $app->getContainer();

$container['view'] = new \Slim\Views\PhpRenderer(__DIR__.'/../templates/');

$app->get('/', function(Request $request, Response $response) {
    $response = $this->view->render($response, 'index.html');
    return $response;
});

$app->run();
?>

My templates/index.html code is:

<!DOCTYPE html>
<html lang="es">
    <head>
        <base href="./">
        <meta charset="UTF-8">
        <title>Document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>
    <body>
        <section id="root"></section>
        <script type="text/javascript" src="dist/learning.js"></script>
        <!-- <script type="text/javascript">
            // With this code it works, but if I use src attribute in script tag, it crash
            (function() {
                var root = document.getElementById('root');
                var chidlInput = document.createElement('input');
                chidlInput.setAttribute('id', 'name');
                root.appendChild(chidlInput);
            })();
        </script> -->
    </body>
</html>

And my public/dist/learning.js code is:

(function() {
    var root = document.getElementById('root');
    var chidlInput = document.createElement('input');
    chidlInput.setAttribute('id', 'name');
    root.appendChild(chidlInput);
})();

My templates/index.html and public/dist/learning.js codes is to test, in my final project I will use Angular 5 to develop front-end.

I checked this tutorial about Angular and Slim but it not works.

I tried with PHP 5.6 and PHP 7.2 but both launch the same error.

To run this project I use php -S localhost:8080 -t public public/index.php, because I have installed PHP without Apache or Nginx.

I work on Windows 10.

Regards.

tealborder commented 6 years ago

Recheck how you're referring to the js file from the template. Looks like the path is incorrect in <script type="text/javascript" src="dist/learning.js"></script>

ivanhdzd commented 6 years ago

Thanks for your response, how can I refer Javascript files? With NodeJS and ExrepssJS (I usually work with this technologies) it works. Regards.

kAlvaro commented 5 years ago

Please use the browser's console to inspect the exact contents of the dist/file.js that's being sent. I suspect it's HTML rather than the file contents.

If you are using PHP builtin server, I believe you need to return false inside public/index.php when the request belongs to a static file, as in this example:

if (PHP_SAPI == 'cli-server') {
    $url  = parse_url($_SERVER['REQUEST_URI']);
    $file = __DIR__ . $url['path'];

    // check the file types, only serve standard files
    if (preg_match('/\.(?:png|js|jpg|jpeg|gif|css)$/', $file)) {
        // does the file exist? If so, return it
        if (is_file($file))
            return false;

        // file does not exist. return a 404
        header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');
        printf('"%s" does not exist', $_SERVER['REQUEST_URI']);
        return false;
    }
}

This is typically not an issue with any other server because you configure it to only call index.php when the request doesn't ask for an existing file.

piotr-cz commented 5 years ago

Make sure that <base href="" /> is pointing to the base url of the application.

See MDN

odan commented 4 months ago

This was an syntax error within the template. Closing this as solved.

slimphp / PHP-View

Error trying to load javascript scripts by it src attribute #41