Jump to content
Sign in to follow this  
mstdmstd

shipsCRUD is not a function error if put js file in webpack.mix.js

Recommended Posts

Hello,
In  my laravel 6 app I use js files which I attach in in blade file
resources/views/ship/index.blade.php like :

@endsection


@section('scripts')

    <link rel="stylesheet" href="{{ asset('/css/jquery.dataTables.min.css') }}" type="text/css">

    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/mustache.min.js') }}"></script>

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

    <script>
        /*<![CDATA[*/

        var oTable
        jQuery(document).ready(function ($) {
            var shipsCRUD = shipsCRUD('list',  // must be called before jQuery(document).ready(function ($) {
                <?php echo $appParamsForJSArray ?>
            );
            shipsCRUD.onCRUDPageInit('list')
        });

        /*]]>*/
    </script>

@endsection

and that worked ok for me when I put js/pages/ship.js file under /public/  directory.
Having in resources/js/pages/ship.js :

let frontend_home_url
let this_id
let this_csrf_token

function shipsCRUD(page, paramsArray) {  // constructor of backend Ship's editor - set all  from referring page and from server

  frontend_home_url = paramsArray.frontend_home_url;
  this_dataTablesLengthMenuArray = paramsArray.dataTablesLengthMenuArray;
  this_csrf_token = paramsArray.csrf_token;

  if (page == "edit") {
    this_id = paramsArray.id;
  }
  if (page == "list") {
    this.ShipsLoad()
    $(".dataTables_filter").css("display", "none")
    $(".dataTables_info").css("display", "none")
  }
} // function shipsCRUD(Params) {  constructor of backend Ship's editor - set all  from referring page and from server


shipsCRUD.prototype.onCRUDPageInit = function (page) {  // all vars/objects init
  initCRUD()
} // shipsCRUD.prototype.onCRUDPageInit= function(page) {

But I have got a hint that it is a wrong way to have editable file under /public/ and I put 
file ship.js as resources/js/pages/ship.js
and I added 1 line in webpack.mix.js :

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  ...
  .js('resources/js/pages/trip-details.js', 'public/js/pages')
  .js('resources/js/pages/ship.js', 'public/js/pages')

and running command :

npm run watch-poll

I have a file moved at 
/public/js/pages/ship.js
with content :

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/         }
/******/     };
/******/
/******/     // define __esModule on exports
/******/     __webpack_require__.r = function(exports) {
/******/         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/         }
/******/         Object.defineProperty(exports, '__esModule', { value: true });
/******/     };
/******/
/******/     // create a fake namespace object
/******/     // mode & 1: value is a module id, require it
/******/     // mode & 2: merge all properties of value into the ns
/******/     // mode & 4: return value when already ns object
/******/     // mode & 8|1: behave like require
/******/     __webpack_require__.t = function(value, mode) {
/******/         if(mode & 1) value = __webpack_require__(value);
/******/         if(mode & 8) return value;
/******/         if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/         var ns = Object.create(null);
/******/         __webpack_require__.r(ns);
/******/         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/         if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/         return ns;
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "/";
/******/
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 4);
/******/ })
/************************************************************************/
/******/ ({

/***/ "./resources/js/pages/ship.js":
/*!************************************!*\
  !*** ./resources/js/pages/ship.js ***!
  \************************************/
/*! no static exports found */
/***/ (function(module, exports) {

var frontend_home_url;
var this_id;
var this_csrf_token;

function shipsCRUD(page, paramsArray) {
  // constructor of backend Ship's editor - set all  from referring page and from server
  // console.log('paramsArray::')
  // console.log(paramsArray)
  frontend_home_url = paramsArray.frontend_home_url;
  this_dataTablesLengthMenuArray = paramsArray.dataTablesLengthMenuArray;
  this_csrf_token = paramsArray.csrf_token;

  if (page == "edit") {
    this_id = paramsArray.id;
  }

  if (page == "list") {
    this.ShipsLoad();
    $(".dataTables_filter").css("display", "none");
    $(".dataTables_info").css("display", "none");
  }
} // function shipsCRUD(Params) {  constructor of backend Ship's editor - set all  from referring page and from server


shipsCRUD.prototype.onCRUDPageInit = function (page) {
  // all vars/objects init
  initCRUD();
}; // shipsCRUD.prototype.onCRUDPageInit= function(page) {
...

But in in console I got error :

app.js:73188 Uncaught TypeError: shipsCRUD is not a function
    at HTMLDocument.<anonymous> (ships:429)
    at mightThrow (app.js:72895)
    at process (app.js:72963)

    
1) Why I got error in this way and how to fix it ?

2) Also could you please advice a proper way to publish jquery.dataTables.min.css/js files? If I want to avoid putting them under /public/, which is valid way?

Thanks!    
 

Share this post


Link to post
Share on other sites

I got a hint and in the end of the resources/js/pages/ship.js
I added line :

window.shipsCRUD = shipsCRUD;
	

It fixed my error, but now I got a console error :

	Uncaught TypeError: this.ShipsLoad is not a function
	


Method ShipsLoad is defined in the same resources/js/pages/ship.js file:

	let frontend_home_url
let this_id
let this_csrf_token
	function shipsCRUD(page, paramsArray) {  // constructor of backend Ship's editor - set all  from referring page and from server
	  frontend_home_url = paramsArray.frontend_home_url;
  this_dataTablesLengthMenuArray = paramsArray.dataTablesLengthMenuArray;
  this_csrf_token = paramsArray.csrf_token;
	  if (page == "edit") {
    this_id = paramsArray.id;
  }
  if (page == "list") {
    this.ShipsLoad() // I CALL this.ShipsLoad
    $(".dataTables_filter").css("display", "none")
    $(".dataTables_info").css("display", "none")
  }
} // function shipsCRUD(Params) {  constructor of backend Ship's editor - set all  from referring page and from server
	
shipsCRUD.prototype.onCRUDPageInit = function (page) {  // all vars/objects init
  initCRUD()
} // shipsCRUD.prototype.onCRUDPageInit= function(page) {
	
shipsCRUD.prototype.runSearch = function (oTable) {
  oTable.draw();
}
	
shipsCRUD.prototype.ShipsLoad = function () { // ShipsLoad DEFINITION
	  oTable = $('#get-ship-dt-listing-table').DataTable({
    processing: true,
    ...
  }); // oTable = $('#get-ship-dt-listing-table').DataTable({
	}
	

Actually ship.js has several methods, which I call from blade tamplate or from the other methods of ship.js file.
Which is correct way of ShipsLoad definition and calling ?
 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.