I'm trying to use a Drag and Drop module made with react. I installed it using bower and included the Draggable.js, Droppable.js and the index.js files in my webpage like this
<script type="text/javascipt" src="path to file.js"></script>
However when I run my application I get 3 errors saying
Uncaught SyntaxError: Unexpected token import
and pointing to the 3 files previously imported
can anybody provide a proper solution to this problem
Related
I'm trying to move a rails 7 project from using esbuild to using importmaps and getting the following error:
// app/javascript/application.js
import '#hotwired/turbo-rails'; // <-- Uncaught SyntaxError: Cannot use import statement outside a module
import 'controllers';
I've run and rerun bundle exec rails importmap:install a bunch of times already and compared all relevant files that I know of with a project where importmaps work.
For obvious reasons, adding "type": "module", to package.json is not an option (I don't have a package.json).
Am I missing something?
Shamefully posting the solution in case anyone ever runs into the same problem:
We're using namespaces in the project and I forgot to include the javascript_importmap_tags tag in every namespaced layout file.
I have a minimal Sinatra app for testing out the Britecharts data visualization library (installed as a Node module) locally. I'm having trouble accessing the library files in my Sinatra views.
My public/js/chart.js has the following import:
import bar from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
The path to the file is valid (I can access it if I paste the path into the browser address bar). However in the dev console I get an error saying:
Uncaught SyntaxError: import not found: default
I then put brackets around the variable, as explained in this guide:
import { bar } from './britecharts/node_modules/britecharts/dist/umd/bar.min.js';
But then I get this error instead:
Uncaught SyntaxError: import not found: bar
Thanks for the help.
[EDIT 04.01.2022]: I've created a GitHub repo for the app:
https://github.com/fullstackplus/britecharts-demo
Unpack the Britecharts library files plus dependencies
Put them in a folder local to your app
Import them in your HTML as below:
<div class="bar-container"></div>
<script src="/js/britecharts/node_modules/britecharts/dist/umd/bar.min.js"></script>
<script src="/js/britecharts/node_modules/d3/dist/d3.min.js"></script>
<script src="/js/chart.js"></script>
I have a project that I'm using Webpack for, and I am trying to use the autocomplete feature of jQuery-UI. However, whenever I import jQuery-UI into my app.js file using `import 'jquery-ui/ui/widgets/autocomplete', it breaks jQuery and I get the error:
Uncaught ReferenceError: $ is not defined.
The problem was fixed when I changed import 'jquery-ui/ui/widgets/autocomplete into require(jquery-ui/ui/widgets/autocomplete) in my apps.js file (or index.js or whatever your entry file for Webpack is).
Again, I have no idea why this works, but it does, and I can't argue with that.
Thanks to https://stackoverflow.com/a/42465244/10757677 for the inspiration.
I'm starting out using vue.js in a real django project, but I'm already encountering an issue.
I've installed npm in the venv environment, and installed the vue package.
I now want to create a Vue object inside a js file, so I use :
import Vue from 'vue'
But in the console I get this error
Uncaught SyntaxError: Cannot use import statement outside a module
I've searched for this issue but couldn't find a good answer for my specific case.
How to proceed to use vue js via the npm package then ?
I'm pretty sure the better, but much harder approach is getting webpack and babel involved. However, for my small project, that seemed overkill. I made the node_modules directory visible to staticfiles finder:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "node_modules"),
)
Now I had to access them thru the STATIC_URL (for me it is "/static/").
import Vue from 'static/dist/vue/vue.js'
I've setup a new react app using npx create-react-app my-app.
In the index.html file I want to import a javascript file in the head like so
<script src="/src/.../file.js"></script>
However, I keep getting Unexpected token '<' error. I can't do an import as it creates loads of errors and I want to be able to use some functionality in these scripts across the site.
Any ideas how to reference this file? Previously in other projects we use webpack but this config doesn't seem available in this project.
If your js files are located in the /public/ folder then you can import it like this:
<script src="%PUBLIC_URL%/.../file.js"></script>
If it is located in /src/ folder, you can simply import it to your index.js file, and it will be available across your React application. Remember that order of imports matters here.
import './.../file.js';