I'm working an a React-Native app, and am writing my components into different files, exporting them and importing them wherever they're needed. This is working fine in all instances instead of one, where npm keeps throwing a 'Requiring unknown module'-error.
My structure is as follows:
navigator
Navigator.js
NavBar.js
In NavBar.js, I am exporting my component like so:
class NavBar extends Component {
...
}
export default NavBar;
And importing it in Navigator.js like so:
import NavBar from './NavBar';
The complete message I get on my device when trying to run the app is as follows:
Requiring unknown module "./NavBar". If you are sure the module is there, try restarting the packager or running "npm install".
I have tried both those things (multiple times) to no avail.
I must be looking over something stupid, but can't seem to find it. Can anyone else see what I'm doing wrong here?
What I did to get it fixed:
I refactored the file to something else, and back to NavBar.js.
This was probably just caused by me misspelling something in the first place.
So don't forget to check, double check and double check again.
Related
Since refactoring my code to move generic hooks and components to their own git submodules within my project I get TypeError: Cannot read properties of null (reading 'useMemo') whenever I call one of my custom hooks referring to useMemo.
I removed all the logic from a hook to make sure it didn't come from undefined arguments, so now my file looks like:
import { useMemo } from 'react'
export function useMyCustomHook() {
return useMemo(() => [], []) // Does nothing useful, but fails anyway
}
export function useMyCustomHookWithoutMemo() {
return [] // Does nothing useful, doesn't fail
}
I'm using next.js at the lastest version and
the project structure is like this:
components/
component.js (this is where I call useMyCustomHook imported from 'generics')
hooks/
pages/
index.js (returns component)
generics/
index.js (with export * from './hooks/useMyCustomHook')
hooks/
useMyCustomHook.js
I also have a jsconfig.json file with the following content, so I can write stuff like import Component from 'components/component':
{
"compilerOptions": {
"baseUrl": "."
}
}
Is next.js not compiling code in my generics folder? How can I get useMemo to work with this folder structure?
I tried moving useMyCustomHook.js to the hooks folder and it works there, so I'm guessing it has to do with a webpack config? I don't know much about those, that's why I love next.js
I started from scratch and moved files one by one into a libs folder, and added paths in jsconfig.json so I wouldn't have long imports into my libs and it seems to work for now. Probably a bug with next.js, webpack and git submodules
maybe you can add a console line after import line to ensure if useMemo exist. like this:
import { useMemo } from 'react';
console.log(useMemo);
the point is to find the variable whose value is null.
This might be a case of circular imports in your code. Webpack doesn't handle them well.
Make sure that you're not importing from components folder to generics or hooks. Try to run no-cycle eslint rule on your app, it might help to identify those: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md
useMemo() is available for react 16.8.6+, So if your react is not updated, you should update it, otherwise, i would try something like:
useMemo(()=>console.log("test),[])
and check dev tab in browser.
For me the issue was that had placed the useMemo out of the function component by mistake
I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.
I have had react-beautiful-dnd installed and functional for a while and out of nowhere I am now getting an error from node_modules about create-react-app being unable to compile the file position.js in the react-beautiful-dnd package. I have looked into breaking changes being pushed to their repo but nothing is different 2 months back, I invalidated my cache and restarted (on webstorm) nothing, finally I deleted my node_modules and reinstalled them but still the error occurs.
It seems to be rightly trying to compile the file as javascript given its extension however the code seems to be Typescript, I looked at the repository and indeed github reports it to be 100% javascript but most of the files I saw including the snipped above seem to use Typescript. I was under the impression that typescript could not be directly run from a javascript file am I incorrect? What could be causing the error?
Thank you
To use import type, you should place type before the curly brackets:
import type { Position } from 'css-box-model';
Besides, if you want to import the type definition in 'css-box-model' as well as its methods or constants, import them separately:
import { constant } from 'css-box-model';
import type { interface } from 'css-box-model';
I'm using Firefox 75.0. My file structure looks like this:
A at top of my index.js file, I have :
import "./styles.css";
import ScrollBooster from "scrollbooster";
// go ahead and change some library source code!
// import ScrollBooster from "../libs/scrollbooster";
When I try to open index.html, it logs an error saying: SyntaxError: import declarations may only appear at top level of a module, pointing to the CSS import. If I remove the CSS import, then it throws the same error, this time pointing to ScrollBooster from "scrollbooster";
Why is this happening?
PS : Here's the whole code: https://codesandbox.io/s/scrollbooster-examples-2nn7h?file=/src/index.js
I looked at the code in sand box and dont see any import issues as mentioned in the console
If you're having trouble running it on your local machine I would double check your import path.
By the looks of that sandbox code it's importing based on a path specified for their website. When you import on your local machine just ensure that it's taking the correct path to the files that you've downloaded.
Just like the ./styles.css import is based off of the working folder for your project. The import ScrollBooster from "scrollbooster" could be the problem. When hovering it shows module "/sandbox/node_modules/#types/scrollbooster/index" as the path. Try changing it to an import similar to the styles.css one potentially.
I did not see any errors, like Ajay Reddy, when I checked that code on the link.
The HTML file is a part of npm package. In order to run the server, you would need to start the server through npm.
First, to install all dependencies (required only once), run:
npm install
Then to start the server, run:
npm start
Then from your browser, visit http://localhost:1234
I've been looking all over for a solution to this and I can't figure it out for the life of me...
The sitch: I have a lazy loaded React component which is supposed to parse a CSV file (with PapaParse) which is all built within the create-react-app framework. But for some reason, despite everything saying it should work, when I try to use PapaParse, I get this error:
Error: Script path cannot be determined automatically when Papa Parse is loaded asynchronously. You need to set Papa.SCRIPT_PATH manually.
But since this is bundled with Webpack I have no idea what this script path should be and I've tried setting the path to the PapaParse folder within the project folder structure (i.e. something like ../../node_modules/papaparse) to no avail. I actually got a different error when I put in a path:
papaparse?papaworker:1 Uncaught SyntaxError: Unexpected token <
For some more context, the component in question looks a little like this:
import Papa from 'papaparse';
class Dialog extends React.Component {
...
handleFileChange = () => {
...
Papa.parse(file, config);
...
}
...
}
I installed PapaParse via npm, so it should be the latest version, some things go back to 2014-15 where these problems existed, but it's said to have been updated...
Actually, I'm confused, because it works well on both of my projects, hence, React Web App and React Native iOS, Android App.
I imported it like below:
import Papa from 'papaparse/papaparse.min';
Surely, for each project, there are some configs that maybe some libraries work badly. but you maybe can use Node.js path for setting SCRIPT_PATH for Papa:
import path from 'path';
...
Papa.SCRIPT_PATH = path.resolve('/node_modules/papaparse');
...
Or if it has the issue too, then use this link answer for using papaparse directly in your code. that is not recommended.