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

ivanhdzd · 2018-03-05T02:47:17Z

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.

The text was updated successfully, but these errors were encountered:

tealborder · 2018-03-13T14:19:31Z

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 · 2018-03-15T04:39:45Z

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

kAlvaro · 2019-08-10T09:29:08Z

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 · 2019-10-02T13:57:04Z

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

See MDN

odan · 2024-07-09T08:15:41Z

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

odan closed this as completed Jul 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ivanhdzd commented Mar 5, 2018 •

edited

Loading

tealborder commented Mar 13, 2018

ivanhdzd commented Mar 15, 2018

kAlvaro commented Aug 10, 2019

piotr-cz commented Oct 2, 2019

odan commented Jul 9, 2024

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

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

Comments

ivanhdzd commented Mar 5, 2018 • edited Loading

tealborder commented Mar 13, 2018

ivanhdzd commented Mar 15, 2018

kAlvaro commented Aug 10, 2019

piotr-cz commented Oct 2, 2019

odan commented Jul 9, 2024

ivanhdzd commented Mar 5, 2018 •

edited

Loading