When I'm trying to use dynamic import statement in WebStorm I receive a syntax error:
How to solve a problem?
P.S. JSX mode is on, everything is okey. I feel it's expecting a static import statement like import Login from '...', but I need dynamic - import(...)
This bug is fixed in 2017.3, please try the EAP
Related
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
I want to use downloadjs - https://github.com/rndme/download - and have installed it via npm, I have then checked and it is in my node modules and in my package.json as a dependency.
I have then included the following in the .js doc I want to add download functionality to:
import downloadjs from 'downloadjs';
And then further down I try to use it, using function download(), but I am still getting the error "'download' is not defined"
Any ideas what I am doing wrong?
Seems maybe the documentation was out of date as once I used function downloadjs(param, param) instead of download(param, param) it worked.
-Try again:
npm install downloadjs
-And then:
import download from 'downloadjs';
-And you may be using it the wrong way? Here is an example:
const res=await axios.get(`http://something/something/download/${id}`,{
responseType: 'blob' })
download(res.data);
}
the library you are using is not maintained for 3 years by now & it's using the old commonjs syntax to import & use the library. you might be able to use it this way:
import downloadjs from "downloadjs";
but as far as it's an AMD module, if you get errors, then the following thread may help you:
Import existing AMD module into ES6 module
For bundle size optimization instead of getting components from the lib folder, I am importing it from the es folder.
Example:
import Modal from 'antd/es/modal';
So on writing test cases it is giving me the following error
SyntaxError: Cannot use import statement outside a module
I have gone through related questions possibly duplicate but couldn't resolve it with my current implementation as it does not fall to global scope.
So my question is, Is there any way to achieve this
I tried referring to the following links too but no help,
https://github.com/reactstrap/reactstrap/blob/master/package.json#L21
https://medium.com/#fredriccliver/syntaxerror-cannot-use-import-statement-outside-a-module-69182014b8c6
Change
import frFR from 'antd/es/locale/fr_FR';
to
import frFR from 'antd/lib/locale/fr_FR';
fix this problem.
In my create react app project I'm running into the following error in my production build (not in my dev build):
Uncaught TypeError: (0 , o.default) is not a function
at Object.e.f.(:4444/anonymous function)...
I've been investigating this bug for a couple of hours but struggle to find out how to debug this uglified piece of js.
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
What does that o.default mean in this case? Any tips for figuring out what's going wrong here?
It seems to be import statement somewhere in your file is incorrect.
Example: (from an issue)
// fails
import combineReducers from "redux"
// correct
import { combineReducers } from "redux"
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
There's nothing but exported in some library just as o. Example default export:
export default {
o: something
}
For those who tried the solution above and still cannot solve this problem, you might be importing the library successfully and then using the library in a function that is located in the same file.
But, if you export that file and import it to another file, that is where you might be having a problem.
Simply import your already exported file as -
import {myComponent} from "/util/http"
instead of -
import myComponent from "/util/http"
Hope that helps.
If this is happening for anyone with Auth.signIn using aws-amplify, please try the below update for aws-amplify. This worked as a permanent fix and didn't break any of my current code.
sudo npx npm-check-updates -i '/#?aws-amplify/' && npm update --force
Just in case it helps someone, in my case I was using React component inside a JS file which caused this error.
Because I cannot ask a question here due to some reputations thing someone came up with, this is the best way I found to actually get help. Check the image if you consider helping even if in a not so conventional way.
it's legitimate and it's sad people go by a points system to offer help....
Alright, I figured it out. My problem was that I did not initialize my bundle in my Public/index.html path. I'm sorry if this was a very obvious solution but I'm just learning React now and thought that "import" would do everything for me...
I was encountering this same problem with an angular 6 app and the problem was that I had VS Code doing automatic import. VS code used this:
import {EventEmitter} from 'protractor'
instead of what I needed:
import { EventEmitter } from '#angular/core';
Moral of the story: check your import statements before panicking about compatibility issues.