Import React statement syntax error creating a problem - reactjs

I'm getting this error in an index.js file. I'm trying to make a simple react, javascript project using an api as well.
/*
import React from 'react'; // this enables jsx
^^^^^^
SyntaxError: Cannot use import statement outside a module
*/
My code looks like this:
/*import React from 'react'; // this enables jsx
import ReactDOM from '...react-dom'; // this allows us to attach the APP
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'; // this allows front end routing
import Home from './Home';
import Login from './Login';
import Activities from './Activities';
import MyRoutines from './MyRoutines';
import Register from './Register';
import Routines from './Routines';
const PORT = 3000;
const express = require('express');
const { client } = require('./db/client');
const server = express();
function App() {
*/

Method 1
A lot of interfaces still do not understand ES6 Javascript syntax/features, hence there is a need for Es6 to be compiled to ES5 whenever it is used in any file or project. The possible reasons for the SyntaxError: Cannot use import statement outside a module error is you are trying to run the file independently, you are yet to install and set up an Es6 compiler such as Babel or the path of the file in your runscript is wrong/not the compiled file. If you will want to continue without a compiler the best possible solution is to use ES5 syntax which in your case would be var react = require('react'); this can later be updated as appropriate or better still setup your compiler and ensure your file/project is compiled before running and also ensure your run script is running the compiled file usually named dist, build or whatever you named it and the path to the compiled file in your runscript is correct.
Method 2
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require.
Method 3
Update node.

Related

New module import error => "ReferenceError: self is not defined"

import { EncryptStorage } from 'encrypt-storage';
export const encryptStorage = EncryptStorage('secret_key');
encryptStorage.setItem('user', userObj);
error :
I am trying to encrypt the localstorage using encrypt-storage but the import is giving me error and project crashed after putting only 3 line of code.
Dynamic import of next is not working as most of the solution i found is for component not for package.
This solution is not working for dynamic module import as i am getting some assignment error in loader.
Thanks in advance. :)

Show package.json version on NuxtJS application

I want to use the version number that is configured on package.json into my components on NuxtJS application.
Can this be done?
At the top of your nuxt.config.js file put an import
import pkg from './package.json'
then, inside the same file, insert this part
export default {
...
// https://nuxtjs.org/guide/runtime-config
publicRuntimeConfig: {
clientVersion: pkg.version,
}
}
Now you can use the variable, inside your components with $config.clientVersion
For more details, see the docs at https://nuxtjs.org/guide/runtime-config

How to use D3 json or csv with React component.

Normally I write like below, when it comes to D3.
var q = d3.queue()
q.defer(d3.json, "/data/tokyo.json")
.defer(d3.csv, "/data/city_name.csv")
.await(mainFunc);
function mainFunc(_error, _json, _csv){
.....
}
However I have no idea how to write code in React Component.
It should be imported like this.
import {queue} from 'd3-queue'
import {json} from 'd3-json' // <- There is no npm package.
import {csv} from 'd3-csv' // <- There is no npm package.
var q = d3.queue()
q.defer(json, "/data/tokyo.json")
.defer(csv, "/data/city_name.csv")
.await(mainFunc);
However there are no npm module like d3-json and d3-csv.
How can I write code?
You import the name queue but then you don't use it anywhere. Instead you use the name d3 which you did not import at all. The npm package you are searching for is d3-request:
import {queue} from 'd3-queue';
import {json, csv} from 'd3-request';

what's the different between ///<reference path="..."/> and import statement

at first when I import react, the typescript compiler console 'can not find module react',then I add /// , and the problem fixed.
but I just found if I remove the reference comment, there is no error.
this is my code:
/**
* Created by huagu on 2015/12/21.
*/
import * as ReactDOM from "react-dom";
import * as React from "react";
import FloatButton from "./FloatButton";
window.onload = function (event:Event) {
var bd = document.querySelector('#bd');
var style:__React.CSSProperties = {
width:'80px',
height:'40px',
background:'blue',
position:'absolute',
top:'100px',
left:'10px'
}
var str:__React.CSSProperties = '';
var num:number = '';
var c = <span style={{fontSize:'14px'}}>button</span>
var props = {
content:c,
click:function(){
console.log("FloatButton clicked");
},
style:style,
allowSeriesClick:false,
}
ReactDOM.render(<FloatButton {...props}></FloatButton>, bd);
}
so, my problem is whether reference comment is necessary?I don't add reference comment, but there is no error reference __React.CSSProperties, it was declare in react.d.ts. if it's not necessary, why there is no error with "var str:__React.CSSProperties = ''; "?
///<reference> is the equivalent of saying "Just trust me that this will have run before my code", which is often something you can safely assume. It's intended for IDEs, and since it's a comment, does not affect code execution at all.
import modulename ... uses either commonjs or requirejs to actually retrieve the specified module before running the proceeding code.
If you have a dependency-management system that works with the module you need, it's preferred to use that instead of the former solution; that way, there is no risk of trying to access a module before it's loaded (even if 99% of uses aren't even remotely possible for the code to see before it has loaded)

Import not working same

Hi on my server is this working:
import api_url from '../../../../.react.config';
and on another it is not. Instead I have to use:
import {api_url} from '../../../../.react.config';
both are using node 4.2.2
can anybody explain why?
The first syntax will use the module's default export.
export default { };
// or in commonjs
module.exports = { };
If you haven't declared a default export, then importing the entire module won't work.
The second syntax is a destructuring pattern which will only work if the module exports a named property.
export const api_url = ' ';
// commonjs
exports.api_url = ' ';
v4.2.2 doesn't support ES6 module syntax, so you are probably using a tool to transpile your code.
Check that the statements in both files are being transpiled to equivalent ES5 code.
Make sure that the module's exports are the same on both servers.

Resources