I was working on an old WordPress project that imports an old version of Foundation framework.
I got everything working by importing all foundation dependencies, and I have been able to see my plugin working. However, after some time and without any kind of further interaction with my code nor with my Linux web server (I keep track of everything in Git and I'm a skilled server administrator), JavaScript on my website broke.
The error I'm getting is the following:
Uncaught SyntaxError: The requested module './jquery' does not provide an export named 'default' (at foundation.util.touch:6:8)
where './jquery' is a file in which I copied jQuery source code (P.S.: Nginx is already configured to treat './jquery' file as a JavaScript file even if it hasn't the correct extension.
Related
I have a VueJS project with a "fakeDB.js" file that drives the database via local storage (browser) during development. After testing this locally, everything is working and I can navigate to pages perfectly fine.
I'm now running npm run build to get the js/css files to place into a Cordova application for an Android application. After copying these files into the application and switching the VueJS application to use the SQLITE3 inside Cordova I experience issues.
My login pages work perfectly fine, I can view the dashboard with all the jobs inside it but if I click into a job it throws a white screen.
After hooking up adb debug, all I can see is an error in the chunk-vendor file that npm run build created which, AFAIK, contains the vendor packaging.
The error message I get is:
"TypeError: Cannot read property 'substr' of undefined", source: file:///android_asset/www/js/chunk-vendors.f024a0c1.js (7)
Of course, this file is obfuscated and minified so Line 7 is VueJS 2.6.12.
I have inherited this application with no previous experience so I'm taking an educated guess around "chunk-vendor" that I perhaps need to upgrade the depedencies surrounding this application to get past this issue but I'm unsure how I can debug this further inside of android studio.
How can I go about solving this issue? Is there a way to upgrade safely inside of npm?
Update: I have ran a npm update and I'm now on VueJS 2.7.10 but still getting the same issue
Sorry for the lack of formatting, I'm new here. I've recently started making a switch from jQuery to React in my app. I removed all the little js code, installed turborails and importmap, planning to use a mix of html and rails for my pages.
I managed to get the app working locally and all, but in the heroku build, the application.js doesn't import the dependencies, displaying:
uncaught syntaxerror: import declarations may only appear at top level of a module
when I check the console in developer tools, at this
I'm using importmap and including the app.js through a javascript_include_tag
This is how my application.jss looks. The error points to the hotwired line
import "#hotwired/turbo-rails"
import "./components/seconds.jsx"
How can I make it work in heroku?
EDIT: Through some messy trial and error, I figured out a solution. So it seems that browsers don't support import without being modules? So my solution was to build the application.js and replace my previous application.js with the built version. It works both locally and on heroku, though a minor nuisance is that I'll have to npm build every time I alter something in my javascript and need to push it, but it's doable.
I have the a library referenced in my Asp.Net Core lib folder, under:
wwwroot/lib/vendor/product/dist/browser/library.js
I'm referencing that from my own JS module like this:
import { library } from '../lib/vendor/product/dist/browser/library';
The console error message tells me that this can't be found:
https://localhost:12345/lib/vendor/product/dist/browser/library (404)
When I look in sources, I can't find the library either - so it makes sense. My question is: why is this library not included in the sources? My understanding was that Visual Studio would do a local deploy, and anything inside wwwroot would get deployed to the local server; however, I assume this isn't happening, and that's why I'm getting the error.
As an aside, the library wasn't imported using npm, but copied manually into the lib folder; however, I've checked inside and outside VS, and the files are where they are supposed to be.
from your sample, the js extension is ommited. That might be the cause
I have a 3rd party JS library that utilizes a generated *.asm.js file. That file and, the JS glue code, and HTML work fine when started up locally through python -m SimpleHTTPServer 8000.
I'd like to utilize the same library in RoR. I've come to learn at a high level what asm.js is and what it is used for. The current error I'm getting is:
*.asm.self.js?body=1:2 Uncaught ReferenceError: Module is not defined
at *.asm.self.js?body=1:2
where line one is:
Module["asm"] = (function(global,env,buffer) {
...
I've stashed all the js files in the vendor/assets/javascripts.
It is worth noting that the library also comes with a *.mem and *.data files, which turns out need to be placed in the public directory, otherwise the js that uses them appears not to be able to access them if they're sitting alongside the js.
I'm interested to know if anyone has gotten a library that utilizes a generated asm.js file to work within RoR, and if so, what are the necessary steps.
I've built my website's backend already via Sails JS and now I want to integrate Vue.js in to my project. I've installed Vue and VueResource via npm install --save and I've created an app.js file in my assets/js folder.
However, when I require Vue and VueResource in my app.js file I get these error messages in Chrome:
app.js:1 Uncaught ReferenceError: require is not defined
localhost/:57 Uncaught ReferenceError: Vue is not defined
I'm new to JavaScript so all I can figure out about this is that the Javascript isn't being built or something similar since require is a Node feature. How can I get my server to build the app.js file so that it functions on the client side? I can barely find any information on this via Google that explains it in a way that a beginner can understand and they seem to just skim over the entire installation part.
Installing and using Sails-Webpack fixed the issue.
yes.. there is no require global function in browser, you have to include the vuejs manually via script tag.
Simply download and include with a script tag. Vue will be registered
as a global variable.
That what the doc said.
If you really want to use require function like you've done on server side, you can use module loader like requirejs
As others have said, require is not a native JS function. You need to compile the JS with something like Gulp or Grunt (I'd suggest Gulp). If you want an out of the box solution try https://laravel.com/docs/5.2/elixir as it has a number of pre-built build scripts (one being for Browserify)