Incorporating node_modules into Laravel using MixTechniques

Question

Incorporating node_modules into Laravel using MixTechniques

I'm facing challenges while trying to incorporate OpenLayers (v5.3.0) into a Laravel 5.7 project, particularly with importing ol from node_modules.

Following the instructions on https://www.npmjs.com/package/ol, I installed ol using the command:

npm install ol

Next, I made modifications to my resources\js\app.js file, which now looks like this:

require('./bootstrap');
require('ol');

UPDATE: I also attempted the following in resources\js\app.js, but without success:

require('./bootstrap');
const ol = require('ol');

The webpack.mix.js file includes the following configuration:

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

mix.js('resources/js/app.js', 'public/js/app.js')
   .sass('resources/sass/app.scss', 'public/css');

In addition, I have included relevant lines of code in map.blade.php for displaying the OpenLayers map as intended:

<script src="{!! mix('js/app.js') !!}"></script>
...
<div id='map' style='z-index: 1; width: 100%; height:calc(100% - 56px);'>
    <script>
        import Map from 'ol/Map';
        import View from 'ol/View';
        import TileLayer from 'ol/layer/Tile';
        import XYZ from 'ol/source/XYZ';

        new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                    })
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 2
            })
        });
    </script>
</div>

I have executed the npm run dev command.

However, when testing in Chrome, an error "Uncaught SyntaxError: Unexpected identifier" is triggered, pointing to the line in map.blade.php:

import Map from 'ol/Map';

UPDATE: I also tried installing all dependencies by running the command:

npm install --save-dev parcel-bundler

No errors were encountered during the installation process, but the same Chrome error persists.

UPDATE: To address the issue, I attempted moving the JavaScript code out of map.blade.php into a new file (mapscript.js), and then importing it in map.blade.php as follows:

<script src="{!! asset('js/mapscript.js') !!}" type="module"></script>

Nevertheless, a new error emerged:

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

Following that, I experimented with transferring certain lines of code from app.js to mapscript.js, both with the require('ol'); and const ol = require('ol'); statements, but the error continues to persist.

Despite exploring numerous potential solutions on platforms such as Stack Overflow, and considering alternatives like utilizing ol outside of npm, I am still unable to resolve this issue. While I acknowledge that incorporating OpenLayers through npm and Mix is the preferred method, I am currently stuck trying to identify the cause of this problem. Any assistance provided would be greatly appreciated.

javascript laravel-5 npm openlayers openlayers-5

Answer 1

Answer №1

After experimenting and refining my approach, I managed to integrate OpenLayers 6.1 with Laravel 6.2 using Mix, Webpack, and ES6 module imports. The key is to organize all your JavaScript code into a separate file and bundle it into app.js.

To add OpenLayers to your Laravel project, simply run npm:

npm install ol

Create a new file in your Laravel project at resources/js/myMap.js (next to bootstrap.js and app.js) and input your OpenLayers JavaScript code there.

Here's a condensed example from the official documentation at

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
    target: 'osm_map',
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

In order to make this accessible to other parts of the code, we must export it as a literal object. Add the following lines to accomplish this:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var my_map = {                       
    display: function () {           

        const map = new Map({
            target: 'osm_map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });

    }                                
};                                   
export default my_map;

Add these two lines to the end of bootstrap.js to incorporate our code and attach the object my_map to the global window object for easy reference on the page.

import my_map from './myMap.js';
window.my_map = my_map;

Bundle everything together by running npm run dev. It's important to note that the default webpack and mix settings of Laravel are used - no manual editing of webpack.mix.js is required. npm run dev copies the content from myMap.js into app.js. Remember to do this after any changes to myMap.js, or automate the process with npm run watch.

To showcase the map in a blade template, ensure you have a div id matching the OpenLayers Map target, such as osm_map in our example above. Below is a basic blade template:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>
        #osm_map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="osm_map"></div>
</div>

<script src="{{ asset('js/app.js') }}" ></script>

<script type="text/javascript">
    window.my_map.display();
</script>

</body>
</html>

Note:

The div id="osm_map" corresponds to the openlayers target.
The OpenLayers CSS is included and styled here.
The map displays when calling the my_map.display() method.

With these steps, you can smoothly embed an interactive OpenLayers map within a Laravel blade template.

Answer 2

After experimenting and refining my approach, I managed to integrate OpenLayers 6.1 with Laravel 6.2 using Mix, Webpack, and ES6 module imports. The key is to organize all your JavaScript code into a separate file and bundle it into app.js.

To add OpenLayers to your Laravel project, simply run npm:

npm install ol

Create a new file in your Laravel project at resources/js/myMap.js (next to bootstrap.js and app.js) and input your OpenLayers JavaScript code there.

Here's a condensed example from the official documentation at

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
    target: 'osm_map',
    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

In order to make this accessible to other parts of the code, we must export it as a literal object. Add the following lines to accomplish this:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

var my_map = {                       
    display: function () {           

        const map = new Map({
            target: 'osm_map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: [0, 0],
                zoom: 0
            })
        });

    }                                
};                                   
export default my_map;

Add these two lines to the end of bootstrap.js to incorporate our code and attach the object my_map to the global window object for easy reference on the page.

import my_map from './myMap.js';
window.my_map = my_map;

Bundle everything together by running npm run dev. It's important to note that the default webpack and mix settings of Laravel are used - no manual editing of webpack.mix.js is required. npm run dev copies the content from myMap.js into app.js. Remember to do this after any changes to myMap.js, or automate the process with npm run watch.

To showcase the map in a blade template, ensure you have a div id matching the OpenLayers Map target, such as osm_map in our example above. Below is a basic blade template:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>
        #osm_map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="osm_map"></div>
</div>

<script src="{{ asset('js/app.js') }}" ></script>

<script type="text/javascript">
    window.my_map.display();
</script>

</body>
</html>

Note:

The div id="osm_map" corresponds to the openlayers target.
The OpenLayers CSS is included and styled here.
The map displays when calling the my_map.display() method.

With these steps, you can smoothly embed an interactive OpenLayers map within a Laravel blade template.

Answer 3

Answer №2

How to set up the ol package :

npm install ol

Create a file named map.js inside the resources directory in js folder(where bootstrap.js and app.js exists)

resources/js/map.js

Add your Openlayer code in map.js(such as example code provided below):

import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
    new TileLayer({
        source: new OSM()
    })
],
view: new View({
    center: [0, 0],
    zoom: 0
             })
});

Next, locate the webpack.mix.js, generally found at the end.

Append

.js('resources/js/map.js', 'public/js')

at the end of the file

Your webpack.mix.js should resemble the following:

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/map.js', 'public/js');

Now, run npm run dev in the terminal

Your *.blade.php code should be similar to this example code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Using Webpack with OpenLayers</title>
    <style>
        #map {
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            overflow: hidden;
            position: fixed;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="{{ asset('/js/map.js') }}"></script>
</body>
</html>

Importing node modules directly from the public folder is not allowed. Modules must be imported within the project and utilized using webpack in the public folder.

For production: Run npm run production in the terminal

Answer 4

How to set up the ol package :

npm install ol

Create a file named map.js inside the resources directory in js folder(where bootstrap.js and app.js exists)

resources/js/map.js

Add your Openlayer code in map.js(such as example code provided below):

import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
target: 'map',
layers: [
    new TileLayer({
        source: new OSM()
    })
],
view: new View({
    center: [0, 0],
    zoom: 0
             })
});

Next, locate the webpack.mix.js, generally found at the end.

Append

.js('resources/js/map.js', 'public/js')

at the end of the file

Your webpack.mix.js should resemble the following:

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/map.js', 'public/js');

Now, run npm run dev in the terminal

Your *.blade.php code should be similar to this example code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Using Webpack with OpenLayers</title>
    <style>
        #map {
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            overflow: hidden;
            position: fixed;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="{{ asset('/js/map.js') }}"></script>
</body>
</html>

Importing node modules directly from the public folder is not allowed. Modules must be imported within the project and utilized using webpack in the public folder.

For production: Run npm run production in the terminal

Incorporating node_modules into Laravel using MixTechniques

Answer №1

Answer №2

Similar questions

Generating a new object using an existing one in Typescript

How can I obtain the true client IP address using Nginx?

The CSS hamburger menu halves in size when being closed

Importing a JS class within a Vue.js script tag

Issue with background overlapping

What is the best way to extend a class in NestJS from another class?

Having to reinstall node modules is a repetitive task that must be done after each build of an Angular

Verifying if every item in an array exists within multiple arrays

What could be causing the promises in Promise.all to remain in a pending state?

When attempting to perform $save() on $resource, a TypeError is thrown indicating that Object #<g> does not contain the method 'push'

Determine the width of invisible images using JavaScript/jQuery

Switching between javascript objects within the redux store and the application

Displaying Keystonejs list items on every page

Concealing a vessel, refreshing the innerHTML content, and then revealing it once more

Pass a jQuery variable to the current file and retrieve it using PHP

Avoiding HTML in JavaScript: Tips and Tricks

Only the test cases that passed were documented in Mochaweasome

Performing a MongoDB aggregate operation to swap out a set of IDs with their corresponding objects from an array located within the same document

Switch up the gradient background when hovering over MorphSVG

Leveraging the power of JavaScript templates within ASP.NET