New to react native, but I've seen the "unable to resolve module" error a lot.
This time, I got the error with the react-number-format module after I tried to install react-native-imaged-card-view from this link https://github.com/WrathChaos/react-native-imaged-card-view using npm.
I would like tips on how to troubleshoot this issue and any other unable to resolve issue, because this happens quite frequently.
iOS Bundling failed 20323ms
Unable to resolve module react-number-format from /Users/davidooooo/Documents/redoKoho/NewKoho/node_modules/react-native-star-review/lib/src/components/StarReview.js: react-number-format could not be found within the project or in these directories:
node_modules
../../../node_modules
3 | import styles, { _reviewTextStyle } from "./StarReview.style";
4 | import { View, Text } from "react-native";
> 5 | import NumberFormat from "react-number-format";
| ^
6 | import Icon from "react-native-dynamic-vector-icons";
7 |
8 | const StarReview = props => {
Related
Edit:
Same error happens when I try to import highcharts directly into a test, commenting out any other setupFile
TypeError: Cannot set properties of undefined (setting 'highcharts')
1 | import * as React from 'react';
2 | // import Home from './Home';
> 3 | import highcharts from 'highcharts';
| ^
4 | import { render } from '#testing-library/react';
5 | // import { render } from 'jest-utils';
6 |
at node_modules/highcharts/highcharts.src.js:2499:9
at apply (node_modules/highcharts/highcharts.src.js:29:25)
at _registerModule (node_modules/highcharts/highcharts.src.js:108:5)
at factory (node_modules/highcharts/highcharts.src.js:13:13)
at Object.<anonymous> (node_modules/highcharts/highcharts.src.js:9:2)
at Object.<anonymous> (src/scripts/components/Home/Home.spec.js:3:1)
Currently, I'm trying to integrate react-testing-library (with jest, babel, webpack) to an old React project, I've updated React to 17.0.2 (latest possible version without crashing the whole project), and now I'm stuck at a weird error. Basically, when importing highcharts from one of my setup files, an error inside the node_modules pointing at the library happens.
TypeError: Cannot set properties of undefined (setting 'highcharts')
1 | import toastr from 'toastr';
> 2 | import Highcharts from 'highcharts';
| ^
3 | import exporting from 'highcharts/modules/exporting';
4 | import i18next from './i18n';
5 | import networkgraph from 'highcharts/modules/networkgraph';
at node_modules/highcharts/highcharts.src.js:2499:9
at fn (node_modules/highcharts/highcharts.src.js:29:25)
at _registerModule (node_modules/highcharts/highcharts.src.js:108:5)
at factory (node_modules/highcharts/highcharts.src.js:13:13)
at Object.<anonymous> (node_modules/highcharts/highcharts.src.js:9:2)
at Object.<anonymous> (src/scripts/vendor.js:2:1)
at Object.<anonymous> (src/scripts/i18n.js:14:1)
at Object.<anonymous> (src/scripts/ErrorHandlers/utils/GetErrorMessage.js:5:1)
at Object.<anonymous> (src/scripts/stores/UserStore/UserStore.js:15:1)
at Object.<anonymous> (src/scripts/Request.js:4:1)
at Object.<anonymous> (src/scripts/components/ReleaseNotes/ReleaseNotesStore.js:4:1)
at Object.<anonymous> (src/scripts/components/ReleaseNotes/ReleaseNotes.js:6:1)
at Object.<anonymous> (src/scripts/components/Home/Home.spec.js:2:1)
The last file that is traceable is the vendos.js that just imports the highchart like it's showing in the error preview.
This is the Jest config: https://pastebin.com/jt2L8ijQ
The project is running/compiling with no problem.
I tried to add highcharts to transformIgnorePatterns like so:
transformIgnorePatterns: ['node_modules/(?!(highcharts)/)'],
// or adding to moduleNameMapper
moduleNameMapper: {
highcharts: require.resolve('highcharts'),
...
}
But those changes had no difference, same result as before.
Tried updating highcharts too, but it ended up breaking some stuff.
I'm lost, don't really know what to do, if anyone needs extra info, ask away.
Thanks.
Ok.
I found why the error was happening.
In this project the highchart is using JQuery, and I was setting it incorretly, instead of setting up a setupFile.js, and adding to it like this:
import $ from 'jquery';
global.$ = $;
global.jQuery = $;
I was wrongly defining it inside my jest.config.js like so:
{
...
globals: {
"jQuery": require("jquery")
}
...
}
And these errors:
at node_modules/highcharts/highcharts.src.js:2499:9
at apply (node_modules/highcharts/highcharts.src.js:29:25)
It was guiding me to the wrong file, the actual file where the Type Error was happening was a highcharts build where it was trying to get a highcharts from the jQuery, this part in particular:
B.jQuery.fn.highcharts=function()
After all this weird debugging, I got it to run.
When I follow the Custom Tailwind Config insctructions found here https://electron-react-boilerplate.js.org/docs/styling#without-custom-tailwind-config the app breaks.
I get this error
ERROR in ./node_modules/tailwindcss/tailwind.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[3]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/tailwindcss/tailwind.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) C:\Users\User\leona_repo\SP\tw_bp\your-project-name\node_modules\tailwindcss\tailwind.css Unknown word
1 |
> 2 | import API from "!../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../style-loader/dist/runtime/insertBySelector.js";
# ./node_modules/tailwindcss/tailwind.css 8:6-255 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-225 83:0-225 84:22-29 84:33-47 84:50-64 61:4-74:5
# ./src/renderer/App.tsx 5:0-34
# ./src/renderer/index.tsx 5:0-24 8:17-20
They said they fixed it in this issue thread but does not work for me
https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/3067
I opened my old project today and saw these strange warnings:
ERROR in src/App.tsx:13:17
TS2307: Cannot find module './App.module.css' or its corresponding type declarations.
11 | import { Layout, Breadcrumb } from 'antd'
12 | import Header from './components/Header/Header'
> 13 | import css from './App.module.css'
| ^^^^^^^^^^^^^^^^^^
14 | import { ROUTES } from './constants/routes'
15 | import Menu from './components/Menu'
16 |
ERROR in src/components/common/FormsControls/FormsControls.tsx:2:17
TS2307: Cannot find module './FormsControls.module.css' or its corresponding type declarations.
1 | import { FC, MouseEvent } from 'react'
> 2 | import css from './FormsControls.module.css'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 | import commonCss from '../styles.module.css'
4 | import { Field, WrappedFieldProps } from 'redux-form'
5 | import cn from 'classnames'
There are also a lot of them with file formats svg, png and others. All my packages are now the most recent version.
There was no such problem before, can anyone help solve this without having to struggle with webpack?
Create a file called declarations.d.ts (you can name it anything you want)
Sometimes it is mandatory to reload your IDE but not always.
// declarations.d.ts
declare module '*.css';
declare module '*.scss';
declare module '*.svg';
// etc ...
TypeScript does not know that there are files other than .ts or .tsx hence it will complain if an import has an unknown file suffix, so in this case, we explicitly tell the compiler that we mean to load a module that can have the following extensions.
In my React app, created with CRA, I had to add in react-app-env.d.ts:
declare module '*.css';
Adding this declaration in separate file, like suggested above, did not work.
I have a ReactJS project built with create-react-app with typescript template and it is using typescript v3.7.5.
package.json
{
...
"typescript": "3.7.5",
...
}
I added the Jodit editor into my project following this guide.
But I am getting this error when I run the project.
/path/to/project/node_modules/jodit/index.d.ts
TypeScript error in /path/to/project/node_modules/jodit/index.d.ts(7,13):
'=' expected. TS1005
5 | */
6 |
> 7 | import type { IComponent, Nullable } from './src/types';
| ^
8 | import { Jodit as Super } from './src/jodit';
9 |
10 | export * from './src/types';
After getting this error, I did some investigation and found that jodit-react is built with typescript v4.1.3.
"typescript": "^4.1.3",
Maybe we are getting the error because of this typescript version difference. I am not so familiar with typescript and I am not sure if it is correct.
Anyone who has experience in this case, please let me know what I can do to use this package in my project.
The following tests pass with just import Icon from 'react-native-vector-icons/Ionicons';, but when I add Icon.loadFont(); to load the font, the following error appears. How would I add types to that function call or is that unrelated.
Code:
import Icon from 'react-native-vector-icons/Ionicons';
Icon.loadFont(); // Error here
Error (From npm test):
RNVectorIconsManager not available, did you add
the library to your project and link with libRNVecto
rIcons.a? Try running `react-native link react-nativ
e-vector-icons` and recompiling.
6 | import moment from 'moment';
7 | import Icon from 'react-native-vector-icons/Ionicons'; > 8 | Icon.loadFont();
| ^ 9 |
10 | // Screen Dimensions
11 | const { height, width } = Dimensions.get(
'window');
at ensureNativeModuleAvailable (node_modules/r
eact-native-vector-icons/lib/ensure-native-module-av
ailable.js:13:11)
at Function.loadFont (node_modules/react-nativ
e-vector-icons/lib/create-icon-set.js:148:7)
at Object.<anonymous> (src/TimePicker.tsx:8:6) at Object.<anonymous> (src/index.js:4:1)
I've already tried the recommended npm command in the error:
react-native link react-native-vector-icons