Unexpected token '<' Error (npx create-react-app) - javascript

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';

Related

React: Trying to import a javascript file from node_modules from a package I have installed but cannot be recognised

I am trying to import a file from react-validation but I am met with the following warning which isn't allowing the import:
Could not find a declaration file for module
'react-validation/build/form'
This file does exist in my node_modules folder since I installed the package via npm i react-validation and I clearly see the folder is there.
I tried import in different ways, for example: import Form from 'react-validation/build/form but still not working.

import js file in js file for webdev

I have a js file called project specific js.js and in that file I want to import another js file for general js called logic.js in the js folder
import 'js/logic.js';
in devtools when I run the html that imports project specific js i get
Uncaught SyntaxError: Cannot use import statement outside a module
issue fixed it turns out because I wasn't running a localhost for some reason you cant import other js files except modules like react. now I am running localhost and in the script tag importing projectSpecificJs.js i have type set to module so :<script type="module" src="projectSpeceficJs.js></script>"
Just for further information:
import 'file.js'
Is only for nodejs / module html attribute
Also here's some quick info related to the topic:
The whole concept behind using the “import” statement instead of “require” in Node.js is to shift from the CommonJS module system to the ECMAScript Module System. Reference

External Dependencies not working in Nav.svelte

I am trying to load sv-bootstrap-dropdown module in nav.svelte component but I am getting the error <Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. After that I tried to install that as devDependency but than I was getting the error that Cannot read property remove of undefined. This gets generated itself in the server js file under the sapper folder
When working with svelte and sapper you to have think about 2 types of rendering : client side rendering (sveltjs, js) and server side rendering (SSR), it's sapper (nodejs or expressjs), there are a few ways to handle this, but according to the document of dependency you are using :
for SSR you consider to import like this:
import {
Carousel,
CarouselControl,
CarouselIndicators,
CarouselItem,
CarouselCaption
} from 'sveltestrap/src';
solve it by importing from the src folder of the package.

"Uncaught SyntaxError: Cannot use import statement outside a module" when trying to import vue.js inside js file in Django app

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'

in a reactjs application made with create-react-app, how do I import js module in a file outside of project directory structure?

I am working with the following directory structure:
/sharedlib
/apps/create-react-reactjs-app-A
/apps/create-react-reactjs-app-B
create-react-reactjs-app-A and create-react-reactjs-app-B are both applications made with create-react-app. I would like both applications to be able to use javascript modules defined in files in a third folder, sharedlib. How do I configure my applications to allow them to import modules like this? When I attempt to do so, I get the following exception:
SyntaxError: export declarations may only appear at top level of a module

Categories