React, Getting error: Uncaught ReferenceError: require is not defined - javascript

I have a project where I use both react and node (express). When I link to react using src="https://unpkg.com/react#16/umd/react.development.js" etc.. I have no problem using react with JSX in the project, but when I try to import like this:
import React from "react";
I get the error: Uncaught ReferenceError: require is not defined
This kind of "handicaps" me since I want to use modules like axios etc..
I am not using any module bundler
Thanks for any help!

Don't know if I fully understand the question but you seem to be using React.js from a cdn link. With no module bundler. So why are you importing it also? You've already "imported" React.js from your cdn link. =) No need to import it again. The import statement is when you use modules and import them like that with the ES6 syntax. If you want to do that use create-react-app instead.

I had a similar issue that I eventually solved with Browserify. Here's a link to my answer:
https://stackoverflow.com/a/63356350/5132452

Related

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

_svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_2__.Filter is not a constructor

Im trying to use Svg.filter.js in a project using webpack (Vaadin) and typescript, but I stumpled upon a weird import issue.
I need to use the constructor Filter out of svg.filter.js , but this constructor is in the module svg.js.
Now, my import looks like this:
import "#svgdotjs/svg.filter.js";
import {SVG,Filter} from "#svgdotjs/svg.js";
When running this, i get the following error:
_svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_2__.Filter is not a constructor
So my question is:
How do I handle this error in webpack. Since im using methods recommended by examples i think its an webpack issue.

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

React: How to load components properly?

I am working on a simple app in react with ES6 and babel. Recently I faced this issue. I used react-notifications package here: https://github.com/minhtranite/react-notifications
I just followed the docs and it works fine. I can import it with import {NotificationContainer, NotificationManager} from 'react-notifications';
But then I tried to work with this: https://github.com/cezary/react-loading
Now in the example of react-loading, the developer isn't using the ES6 way to get the component. I tried to look at the JS file and tried this after doing npm install react-loading:
import {Loading} from 'react-loading'; but somehow this doesn't work. I get this:
You likely forgot to export your component from the file it's defined in
But I can see it is exported. What am I doing wrong?
Since it is a single module, it is exported as default. You'll have to do this:
import Loading from 'react-loading';

Angular 1.x ES6 Webpack include 3rd party libraries

I am developing an app using starter project : https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate.
I am stuck when I need to use 3rd party library.
I want to use js-yaml https://github.com/nodeca/js-yaml
I try to add it in my angular service:
import jsyaml from '../../node_modules/js-yaml/bin/js-yaml.js';
But I get error:
bundle-0d6476.js:75756 Uncaught Error: Cannot find module "../../node_modules/js-yaml/bin/js-yaml.js"
How do I solve this?
Check the docs on resolving modules. To import modules from node_modules, specify the path omitting everything up to and including node_modules. Thus, import jsyaml from 'js-yaml/bin/js-yaml.js' should work.

Categories