In a vanilla create-react-app adding react-select and #typeform/embed as dependencies and then importing both results in Webpack failing to compile with the following error:
TypeError: Cannot read property 'border-radius:0;display:block;height:2px;width:25px;position:absolute;right:6px;top:6px;' of undefined
This is caused by having both
import Select from "react-select" and
import { ReactTypeformEmbed } from "react-typeform-embed" in files to be compiled
The problem seems to be with the Typeform Embed SDK as shown in this screenshot Typeform SDK issue
Has anyone come across this/had this problem? The Tyepform import seems to work as soon as I remove the React Select import.
Related
I am finding this errorwhile writing the code for the header in React js.
Module not found: Error: Can't resolve './components/TableData' in 'C:\Users\Dell\highradius_java\src'
Please help me solve this error.
I'm building a notes app but I run into a problem, I installed react-mde, react-split, and showdown as dependencies using npm install but the editor's CSS styling is missing, what could be the problem?
The source code: https://github.com/arturfriedrich/notes-app
This is from the Scrimba React course, right?. I was having the exact same problem. Here's how I solved it.
Just put this line of code in your App after all your imports:
import "react-mde/lib/styles/css/react-mde-all.css";
See also the React MDE documenation.
I am using cypress, and I want to import a function from another file.
For some reason I cant seem to be abe to import things.
I get the error on vscode:
Parsing error: 'import' and 'export' may appear only with 'sourceType: module'eslint
And when i run cypress i getthis error from the line:
import test from '../support/helperFunctions'
helperFunctions_1.default is not a function
I think there is no webpack on the project, I searched
Could you please tell me in which direction should i look in order to fix this?
Thanks.
This is not a cypress issue. So import & export of modules are introduced with EcmaScript and by default it doesn't get supported in your JS projects.
So in order to get this work, you have to install babel, which is a transpiler(translate & compiler) and configure accordingly.
Please try to add below two dependencies in your package.json file
"#babel/plugin-transform-modules-commonjs": "7.8.3",
"babel-core": "6.26.3",
Now create .babelrc file and add the below statement which will treat modules to be imported and exported.
{
"plugins": ["#babel/plugin-transform-modules-commonjs"]
}
Now run your code and verify.
I am using React (16.12.0) with PhpStorm (2019.3.1).
The package I am importing is react-router-dom (5.1.2)
I will write the following import:
import { NavLink, Switch } from "react-router-dom";
Both packages are imported properly by webpack/babel and the page renders properly when I use both Switch and NavLink.
However purely from the IDE-perspective, I get a warning about Switch: Cannot resolve symbol 'Switch'
It is weird because it is obviously there, and I checked in /node_modules/react-router-dom and Switch.js is there.
Strangely on previous versions of PhpStorm (before several updates and plugin imports and other changes), the Switch import was accurately found by PhpStorm.
I have not updated react-router-dom recently and am using its latest stable build.
Any ideas as to why it might be missing Switch?
EDIT:
I have realized it may be because PhpStorm is having difficulty importing a commonJS module.
I tried changing the Javascript compilation method from React JSX to ECMA 6. That didn't work.
I also tried importing some build libraries for react-router-dom, and that worked for recognizing the Route import strangely but not Switch.
I also tried invalidating the PhpStorm cache and restarting the app, but that didn't work either.
EDIT 2:
Per an answer, I have tried to use option+enter (alt+enter on windows) while my cursor is within react-router-dom to try to install a typescript package, but I don't get the same suggested action as shown on the JetBrains website: https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html
All it suggests is switching single quotes to double quotes.
Also I have already installed #types/react-router-dom. Perhaps there is another one that I am missing?
EDIT 3:
The correct answer was to install #types/react-router. For some reason #types/react-router-dom is deceivingly NOT what solves this.
node_modules/react-router-dom/esm/react-router-dom.js exports BrowserRouter, HashRouter, Link and NavLink, but doesn't export Switch, it's not explicitly defined there.
For better completion/type hinting, you can install Typescript stubs for the package: put cursor on "react-router-dom" in import statement, hit Alt+Enter, choose Install TypeScript definitions for better type information::
See https://www.jetbrains.com/help/webstorm/2019.3/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files
I'd like my imports to be more fail-fast. I want my build process to fail if someone tries to import something that does not exist.
For default imports it seems to work fine, as the following will fail:
import Something from "doesNotExist";
But if I import an attribute of an existing module, it does not fail:
import React, {BadKey} from "react";
How can I make it fail by default?
I'm using Webpack / Babel5 / NPM 2.14
Use a strongly-typed language like Typescript, which can error in this condition. We actually moved to eliminate all our default exports and imports, because the name checking available for import { Thing } is super helpful.
If you're already using Webpack, eslint-loader is one way to integrate with ESLint as part of your build process.
Webpack can be a little cryptic with errors during module builds, though, so take note of the NoErrorsPlugin at the bottom of the README.
Also, consider using Webpack's bail flag (set to true) to abandon building as soon as module errors are encountered. IIRC the default Webpack behavior just omits the error-ing module from the emitted bundle with a note in the console, which will result in a runtime error anyway (module missing).