"Cannot resolve symbol" when using ES6 `import` syntax - javascript

Here an example is given how to import certain classes from a module:
import {ModalContainer, ModalDialog} from 'react-modal-dialog';
However, PhpStorm (latest EAP) gives me an error:
I installed the package with npm install react-modal-dialog and it is present in node_modules.
The equivalent var {ModalContainer, ModalDialog} = require('react-modal-dialog'); works fine.

I encountered this when setting up a React project and all i did was download the import's typescript definition, in my case just searched for react.
Instructions for adding libraries to your project can be found on webstorm's help page.

I think it caused by PHPStorm. The IDE can't understand the import syntax when import a CommonJS module.
I got this warning when using WebStorm 2016.1.2, too.
Taking react and react-router as example:
react is a CommonJS module, developed with ES5 syntax;
react-router is developed with ES2015 syntax, and compiled by Babel.
WebStorm 2016.1.2 can resolve Link exported by react-router module, but can't resolve createClass exported by react module.
Update:
browser-sync is a CommonJS module developed with ES5, too. But it works well on WebStorm, WebStorm can resolve all API exported by browser-sync.
It baffled me that WebStorm can't resolve react exported API.

Related

Trying to use "Socket.io-client" module in React throws error: Cannot assign to read only property 'exports' of object '#<Object>'

I'm using socket.io-client in my React js web app. It compiles without error, but when I try to open the development server (localhost:3000) I get the following error:
In this project where the error is being thrown, here is a list of the relevant packages and their versions:
#testing-library/jest-dom#5.14.1
#testing-library/react#11.2.7
#testing-library/user-event#12.8.3
react-dom#17.0.2
react-scripts#4.0.3
react#17.0.2
socket.io-client#4.3.1
Webpack Version: 4.44.2
Threads like this one suggest that this is some sort of issue with mixing import and module.exports in ES6, but I definitely don't want to modify the socket.io-client module.
In a previous React project, where the module works, here is a list of the relevant packages and their versions:
#testing-library/jest-dom#4.2.4
#testing-library/react#9.5.0
#testing-library/user-event#7.2.1
react-scripts#3.4.4
react#16.14.0
socket.io-client#4.1.2
Webpack Version: 4.42.0
I've played around a little bit with different versions of socket.io-client and react to try to get it working, but to no avail...
Webpack uses ES syntax, so commonJS syntax will not work.
export default lookup

Why esm module not imported on the test by jest

I have a UI framework that is maintained by my company. and This library doesn't provide cjm module. instead only provide esm module.
And I aware that this library is not failed to be imported from the test condition running by jest.
through some gogooling, I found that the Jest doesn't support ESM module import, and it is only on experimental stage to support esm module on Jest(https://jestjs.io/docs/ecmascript-modules). So I tried to make my library as cjs module version, and test againg. This is perfectly works. So I convinced that the previous bug was caused because Jest doesn't support esm module import.
But at this point, I wonder something below.
If Jest don't support ESM, every library should have cjs module regardless of providing esm module??
Jest always find only cjs module from libraries?
How React test works on jest? even thought every react component and other modules are ESM? This is why we need react-test-renderer or babel-jest as dependencies for the react test?
Finally, There is some resources that I can find some information about this subject??

Error importing the Node standard library module "crypto"

When I attempt to compile my app, I get the attached error despite the fact that I am not explicitly attempting to import crypto in any of the files I have written myself. It seems that it is imported in a file automatically present in the node_modules folder. Is anyone familiar with the given error?error
The package at "node_modules\reques\lib\helpers.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/introduction/faq/#can-i-use-nodejs-packages-with-expo
You can't use the request package, it included native Node.js libraries that are not supported in React Native. Use another request library that is made for React native.
This is because a dependency in your react-native project is using the crypto library.
One of the dependencies installed is not made for react-native and is made to run on the server. Find out which dependency that is and you can change it to a react-native compatible library to fix the issue.

"Cannot use import statement outside a module" after installing babylonjs using npm

I've been trying to install babylonjs via npm. I've set up a new project and started with npm init. After that I installed babylonjs with npm install babylonjs --save according to their documentation.
Now I created a JavaScript file to import their module using import * as BABYLON from 'babylonjs';. When I open the console it throws me this error: Uncaught SyntaxError: Cannot use import statement outside a module.
Since I'm relatively new to it I'm not quite sure if I'm missing an important step. I don't want to use their CDN, because I won't have access to the internet all the time.
Thanks in advance!
I would recommend using the es6 packages, which fit better when using es6-style imports.
Here is the documentation:
https://doc.babylonjs.com/features/es6_support

Serverless Deployment failing due to usage of require AND import

I know it is a bad practice to use the import as well as require statements in the same file, but I heard it shouldn't cause any problems.
Why will my lambda fail then (when running yarn run local) and complain about an 'Unexpected Identifier' when encountering the import statement?
Here's the current codebase. The problem lies in the functions/edge.js file.
EDIT: I'm sorry I haven't clearly formulated my question. Replacing the import statement with the seemingly equivalent const middleware = require('#sapper/server'); results in an error: It can't find the module - with import it works perfectly fine, even during production.
Because AWS Lambdas run on node, and the version of node AWS Lambda use don't support import keyword.
More info on NodeJS plans to support import/export es6 (es2015) modules
EDIT: As #Michael states in the comments, you need to install the proper packages. Either by using npm or looking where the package should be (I guess you should follow sapper.svelte instructions properly). import would fail the same way as require as the package don't exists. Is not an "import vs require" problem, but a non-existent package problem.

Categories