I'm working with Video.js, and am running into a problem when attempting to load the module using a standard ES6 import.
I installed video.js using:
npm install --save video.js.
I'm importing into my
video-player.js file using:
import videojs from 'video.js';
I'm getting the following error when attempting to load the page:
GET http://localhost:9001/dist/video.js.js 404 (Not Found)
Any idea why I'm seeing the .js.js extension, and why this is not working? This is the procedure recommended in the Video.js docs.
Aurelia automatically adds the .js extension so you can remove that. Also, make sure you have correctly added video.js as a dependency to aurelia.json. Is the location correct in /dist?
Related
I'm using Vue JS to build a plugin and am using the p11n module. I've built my components and everything works fine when serving via npm run serve, but when trying to build the project via npm run build which essentially is running: vue-cli-service build I get the following error regardless of what version I use:
ERROR Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:5400:30)
at Module.error (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9824:16)
at tryParse (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:9717:23)
at Module.setSource (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:10080:33)
at Promise.resolve.catch.then.then.then (/Applications/MAMP/htdocs/application-compiler-gui/node_modules/rollup/dist/shared/node-entry.js:12366:20)
No idea how to fix this, I've tried installing the Vue JS rollup plugin, no luck :(
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template
I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';
i see example page How to use i18next? Problems with translations
but after this code, i have in console error: Uncaught ReferenceError: i18n is not defined
WHY??? Where can I download i18next.js to convert html page?
From the official site:
there are two possibilities: to install it with npm from repository, or
https://github.com/i18next/i18next/blob/master/i18next.min.js
In version 2.x of the library, i18n has been replaced by i18next and the API has changed considerably.