I am new to React. I have added it to a project using the information on this site:
https://reactjs.org/docs/add-react-to-a-website.html
Run npm init -y (if it fails, here’s a fix)
Run npm install babel-cli#6 babel-preset-react-app#3
Then,
npx babel --watch src --out-dir . --presets react-app/prod
Whenever I try adding a module it gives me:
Uncaught SyntaxError: Cannot use import statement outside a module.
Here is how I am importing :
import { PostcodeLookup } from "#ideal-postcodes/postcode-lookup"
(I've tried this at the top of my react js file and in a seperate script file called in a componentDidMount() method via:
const script = document.createElement("script");
script.src = "my_script.js";
script.async = true;
document.body.appendChild(script);
Thank you.
Where is the import React from 'react' statement, and how is that js file connected to your html? If you are linking the file containing this code from a <script> tag in your HTML, you need to give that script tag a type="module" attribute.
Notice how in the page you linked there's no reference to imports or exports.
Also how that page says:
Tip
We’re using npm here only to install the JSX preprocessor;
This means it will only process JSX expressions into React.createElement function calls. If you want to use modules, you will either need to use native modules by changing the type of your <script to module
<script type="module" src="./main.js">
or use a bundler.
To use a bundler, check out the next page of the React tutorials:
https://reactjs.org/docs/create-a-new-react-app.html
The steps you mentioned are for jsx setup. Can you paste complete error message ?
Have you installed React in your existing project ?
You perhaps have to install React to make it work.
With export class Arrow... you have to use import {Arrow}... whereas with export default class Arrow... you have to use import Arrow.... In the former case, there might be multiple export... statements in a file and therefore your import statement has to be able to handle importing multiple variables by placing that potential list of variables in braces. With export default... there can be only a single export from that file and therefore the import statement can confidently assert that it is importing a single variable, i.e. import myVariabl
Related
This is a non-jQuery version of IonRangeSlider (https://github.com/IonDen/ion.rangeSlider):
https://github.com/keisto/vanilla-rangeslider
I have used this before by trying to stick to pure JS and avoid adding another layer with JQ.
I installed this via yarn and it's in my node_modules folder.
I added this to my app/javascript/application.js file:
import IonRangeSlider from 'vanilla-rangeslider/js/rangeslider'
after also trying just:
import IonRangeSlider from 'vanilla-rangeslider'
In my compiled JS file in dev all it has is this:
// ../../node_modules/vanilla-rangeslider/js/rangeslider.js
var require_rangeslider = __commonJS({
"../../node_modules/vanilla-rangeslider/js/rangeslider.js"() {
}
});
and if I try and initialize a slider all I get is:
Uncaught ReferenceError: ionRangeSlider is not defined
Any ideas here as to what I am missing? I have added some other yarn based JS package with no issues.
The range slider has no exported functions, meaning you won't be able to import anything from it.
The only way to use its functions would be to add it in a script tag unfortunately.
i'm writing some code in nodejs and express, i need to execute some code BEFORE continuing to import modules.
My whole app has set up and uses modules with import instead of require and I can't change this setting.
In order to get some npm packages to work I have to run them BEFORE continuing with importing modules. Using commonJS and require () works perfectly, but with import I can't.
Even if I reverse the order of the modules or if I call them in different files they are all loaded FIRST and only afterwards my code is executed.
Example
start.js
import { mustBeLoadedAfterCode } from './second.js';
// some code here I need to execute first
second.js
import { mustBeLoadedAtTheEnd } from './third.js';
// some code here to execute at the end
In all my test, my code will be executed only AFTER have imported 'second.js' and all it relative imports.
Any idea?
I've found a solution using dynamic imports:
let module = await import('./module.js');
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports
https://v8.dev/features/dynamic-import
I wanted to use this npm package https://github.com/nefe/number-precision, follow the steps but not working.
npm install number-precision --save--dep
import NP from 'number-precision' orrequire() on my JS file first-line , the error message will like this :
Cannot define require && export or
Cannot use import statement outside a module.
<script src="node_modules/number-precision/build/index.iife.js">import NP from 'number-precision </script>
It won't show any error message but in my js file, NP method still doesn't work.
<script src="/workout.js"></script> and put on my js file first-lineimport NP from 'number-
precision'
I got this:
refused to execute script from 'http://0.0.0.0:2000/node_modules/number-
precision/' because its MIME type ('text/html') is not executable, and strict MIME type
checking is enabled.
How do I correctly execute this npm package in my js file?
To use imports in the browser, the file that does the imports needs to
a) be included with type="module":
<script src="./workout.js" type="module"></script>
b) it only works for scripts that are remote (that is, have a src attribute), it does not work for inline scripts.
Also note that you cannot shorthand reference files from node_modules in the browser, that only works when run with Node.
So, inside your workout.js, start like this:
import 'https://github.com/nefe/number-precision/blob/master/build/index.iife.js';
Unfortunately, that library author does not seem to supply a true ES6 module version (I've just opened an issue on that), so you cannot proceed like the page suggests and import the script into a variable NP.
Executing the script like the import shown above should work for you, though, and expose the library in the global namespace.
If you want to use the standalone <script> tag, look at the content of the iife.js:
https://github.com/nefe/number-precision/blob/master/build/index.iife.js
var NP = (function (exports) {
'use strict';
// ...
return exports;
}({}));
It creates a global NP variable, so no importing is necessary, just put this first:
<script src="./index.iife.js"></script>
(change the src if needed, to the right path to your index.iife.js, however you want to structure it)
If you want to use this with Webpack, it works fine for me. After installing the package, import it in your entry point:
// src/index.js
import NP from 'number-precision'
console.log(NP.round(5, 5));
and then run Webpack to bundle the code:
npx webpack
and a working bundle will be produced in dist/main.js (or somewhere similar). Then link that bundle on your site.
I am writing an angular component and got a open source module working with npm install. Now I made some some changes and want to import the javascript file like so
import { ModuleName } from './../../ModuleFolder/ModuleName';
When I place the cursor above the ModuleName inside the bracket, I see the highlighted red error saying Module has not export member 'ModuleName';
In my ts code, I have referenced the Module like so
object: ModuleName; which is also complaining.
I google and the post says using npm install but I don't want to add this module to my node_module list. I am moving the folder out to make my customization.
I also tried the following but it is not working
import './../../ModuleName.bundle.min.js';
I am wondering does the name of the Module needs to be registered somewhere to be able to reference it in my component?
Thanks for any help.
Use 'declare' after the import statements
declare const _moduleName;
For example:
I am using Swiper.js library using cdn. In my angular component, I refer it using a declare keyword.
declare const Swiper;
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
I got external libraries working in Angular by following the following links
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
I'm trying to use an ES5 module in a new ReactJS application and I'm struggling to understand how to correctly import that module, such that the main function within it can be found and executed.
I'm loading the module;
import 'air-datepicker';
I know I'm doing something wrong here and that it's not as simple as this, for an old library that doesn't have proper exports!
Anyway, then I should be able to manually initialise a date picker using an existing div like this;
$('#myDiv').datepicker();
I've tried multiple variations of the import and require, but I'm always getting the same error - 'datepicker is not a function'.
The library I'm experimenting with is air-datepicker. I've installed the module using npm without problems and I know the library works perfectly without React on a simple page loading the script manually in a script tag. My ReactJS app is a basic template created using 'create-react-app', from the FB tutorial pages.
If you're using create-react-app, you should be able to import it like
import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';
If you added your jQuery using <script> tag in your HTML, you need to add this line before the air-datepicker imports
const $ = window.jQuery;
const jQuery = window.jQuery;
If you added jQuery using npm install, you'll have to add these following lines
import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
//... air-datepicker imports
Make sure to initialize it inside your componentDidMount or somewhere you're sure that the element has been mounted already.
componentDidMount() {
$('#my-element').datepicker();
}
render() {
return <div>
<input
id="my-element"
type='text'
className="datepicker-here"
data-position="right top" />
</div>
}
Well, that's a day of my life that I'm never getting back!
The problem was caused by Babel import ordering. Import statements are hoisted - meaning they are evaluated first, before any other code (i.e. my window. assignments) are executed. This is 'by design' in babel.
The only way to avoid Babel hoisting, from what I can tell, is to avoid 'import' altogether and use require instead.
So, in the following order the global $ will have been set when you come to require air-datepicker. If you try to 'import' air-datepicker it won't work because Babel will evaluate all of your import statements before executing the window. assignment.
import $ from 'jquery';
window.$ = $;
require('air-datepicker');
There are one or two other approaches that also would have worked, but they are all less desirable because they need you to manually configure webpack - i.e. 'ejecting' the create-react-app config and going it alone...
Use the imports-loader;
// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");
or, use the ProvidePlugin, making the module available for all modules.
You have to give it an identifier:
import datepicker from 'air-datepicker';