I am trying to include gsap into a JavaScript file and even it being very straight forward it will not load. I am using what GreenSock docs say to do and still no luck. I have added "type": "module" in the json file and the script file I am import into. In my HTML has type="module included and I have a class module already imported into it. It is working fine.
After doing a npm install gsap and it is in my .json file "gsap": "^3.11.0"
They say include this at the very top of the file using it: import {gsap} from "gsap"
Doing so only throws a console error:
Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".
I didn't include any of those being it is a npm install not a cdn script, then on a whim I did try to include any one of those and still nothing. But the error now reads:
GET ###url####ERR_ABORTED 404 (Not Found) looking for a file in my directory. With npm install there is no file just a node_module.
Will just go to the cdn version but just wondering why this is a problem? I am using a tutorial and even the npm isntall steps he uses worked. But when I try it fails .... included image and with or with a " ./ " director included nothing loads
If anyone has any advice feel free to include it here. Removed via npm remove gsap and included the cdn in my html. It is 2022 and shouldn't have to be this hard .....
I just needed to put the cdn in the html and gsap worked perfectly in the js file
CDN - <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
Related
Currently, I am modifying a chrome extension I have built to adding a popup page that is developed in Vue. I am using this tutorial, https://www.streaver.com/blog/posts/create-web-extension-vue.html.
Whenever I try the step vue init kocal/vue-web-extension my-extension, I get the following error:
vue-cli · ENOENT: no such file or directory, scandir '/Users/avidave/.vue-templates/kocal-vue-web-extension/template'
I have updated my vue-cli to the latest version so I am not sure what this really means. I know the file template doesn't exist, but I am not sure what is the right way to create the file in the kocal-vue-web-extension, or if it is needed for that matter.
Try This
vue create --preset kocal/vue-web-extension my-extension
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I'm trying to read the content of a markdown file (.md) stored in statics or assets folder of my quasar project and I have updated the quasar.conf.js file with the following change to support raw file loading after adding raw-loader to my project
extendWebpack(cfg) {
cfg.module.rules.push({
test: /\.md$/i,
use: "raw-loader"
});
I'm trying to load the markdown, using import command from one of the .vue component script tag as below
import md from "~statics/help.md";
But when I run the project, it compiles to 100% and throws the below error
• Compiling:
└── SPA ████████████████████ 100% done in ~13s
ERROR Failed to compile with 1 errors 8:22:43 AM
This dependency was not found:
* ~statics/help.md in ./node_modules/babel-loader/lib??ref--1-0!./node_modules/#quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/Help.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save ~statics/help.md
let me know if any solution
Its seems like quasar can't find the proper reference since I don't know your exact folder structure
Try using ../static/{filname} and see if it works
I am creating an app to work with an API using serverless, and the initial install was ok. One of the folders that the npm serverless install does is auth-server, where two files - handler.js and serverless.yml are created (other than the .gitignore).
A few steps later, I had to install Axios as I will need to make a POST request for the API. Being on the auth-server directory, I ran the usual npm syntax to install Axios, npm install axios. To my surprise, however, npm has not created the package.json (and package-lock.json) file within the auth-server folder but used the root files.
I tried to look around to see if the problem was recurrent, but found nothing. I know that package-json file is created within the directory folder from where npm is executed as I have used axios a few times. Can someone point me where the problem may lie? Thanks in advance.
In case someone else needs this: I found out that although not in all cases, it is not uncommon that the npm will use the package.json file of the root folder. As I needed it inside the auth-server folder, I simply created another package.json file inside it (with a pair of curly brackets on it to avoid a parse error code EJSONPARSE) and saved it. Once I installed Axios one more (npm install axios) the package.json file began to be used and added Axios as a dependency.
I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.
I am not sure how to actually run this example however.
I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.
However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.
I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?
I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.
ProseMirror is a well-behaved rich semantic content
editor based on contentEditable, with support for
collaborative editing and custom document schemas.
The problem is that the documentation on how to set
it up from nothing to a hello world using the demo
examples is non existent. All documentation assumes
you have it set up and working.
This guide is to help you get to "hello world" stage
• First setup rollup. Follow the instructions for that here.
You should now have the project on your computer
from this and when you open the html file in your browser see the "hello world" style screen.
• cd into learn-rollup project folder and npm install prosemirror module packages:
prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup
• In the learn-rollup index.html file add the following html
html code to add to learn-rollup index.html
The link to the css file
The tag in body that has id=editor
learn-rollup folder structure
• Create a copy of src/scripts/main.js and rename it
mainbackup.js.
• Now replace everything in main.js with code from prosemirror.net first example.
• Run \node_module.bin\rollup -c
• Reload .html to see prosemirror working.
There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})
Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.
Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
To get a minimal editor up and running with rollup first install rollup:
npm i -g rollup
Install the rollup resolve plugin:
npm i #rollup/plugin-node-resolve
Then add the following to the rollup.config.js file:
import resolve from '#rollup/plugin-node-resolve'
export default {
input: 'main.js',
output: {
file: 'build.js',
format: 'iife'
},
plugins: [resolve()]
}
Install prosemirror basic libraries:
npm i prosemirror-schema-basic prosemirror-state prosemirror-view
Create the main.js file with the following content:
import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'
let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})
Build your editor (to build.js):
rollup -c
Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
I went through #Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).
The code is from the official first example.
Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.
But shouldn't <div id="content"></div> gets added automatically? #Rob or The official first example didn't mention you have to add this div, no clue what went wrong.