strange error cannot resolve <folder name> in javascript - javascript

I have below code structure,
and my src/components/App.js look like this
import React, { Component } from 'react'
import { max_number } from '../helper'
class App extends Component {
render() {
return (
<div>
</div>
)
}
}
export default App
As you can see helper folder is the same level as components, but somehow I got error of Module not found: Can't resolve '../helper' in '/Users/james/Documents/react-demo/src/components'

helper.js is a directory you need to import from '../helper.js'
preferably rename the folder to helper

Related

Problem when importing from another folder in React Typescript

I have the following folder structure
I want to import both MessageList.tsx and MessageSent.tsx inside my Chat.tsx
// Chat.tsx
import React from 'react'
import {MessageList, MessageSent} from "./components/"
type Props = {}
const Chat= (props: Props) =\> {
return (
<div\>Chat</div>
)
}
export default Chat`
// MessageSent.tsx
import React from 'react'
type Props = {}
const MessageList = (props: Props) => {
return (
<div>MessageList</div>
)
}
export default MessageList
MessageList.tsx is similar to MessageSent,tsx, only the name of the components is different
However, when I try to do the import of these two components {MessageList, MessageSent} I get the following error:
** Cannot find module './components/' or its corresponding type declarations.**
Why is that?
Tried different paths besides "./components/", even with full path.
You can either import the components one by one
import MessageSent from "./components/MessageSent"
import MessageList from "./components/MessageList"
or create an index directory file (index.ts)
import MessageSent from './MessageSent'
import MessageList from './MessageList'
export { MessageSent, MessageList }
To be able to import from components you need index.ts file in components folder.
// index.ts
export * from './MessageList';
export * from './MessageSent';
Add a new file named index.ts inside your components folder
Then write this in the index.ts
export * from './MessageList.tsx';
export * from './MessageSent.tsx';

Getting "Module not found" error when using SCSS with React

I tried to add a scss style to my "Logo.js" component, and yet and can't manage to fix this error I keep getting:
ERROR in ./src/components/Logo/Logo.js 5:0-19
Module not found: Error: Can't resolve 'logo.scss' in '/Users/antonov/Project/HorlogeV2/src/components/Logo'
Here is my component:
import "logo.scss";
class Logo extends Component {
render() {
return (
<div className="logo">
<img alt="Logo failed 2 load" src='./Images/Soldierboi.jpeg'/>
</div>
)
}
}
export default Logo;
import "logo.scss" would look inside node_modules folder. Assuming logo.scss is in the same folder as Logo component, you should import it like this:
import "./logo.scss";

How to import CSS to React (electron.js) Project?

I create a simple react/electron project with "electron-forge" plugin : electron-forge init myProject --template=react. I try to import my css file with this code below
Button.module.css
.error {
color: red;
}
app.jsx - created by electron-forge:
import React from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
export default class App extends React.Component {
render() {
return (
<div>
<h1>Hello world</h1>
<button className={styles.error}>Error Button</button>
</div>
)
}
}
It throws an error:
Uncaught Error: Couldn't find a compiler for /home/denny/Experimentals/electron-transactionsell/src/Button.module.css
I'm pretty sure I have the file in the correct folder
and I am sure that this is how it's done in React
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

TypeError: Class extends value undefined is not a constructor or null (React Meteor Data)

I'm getting an error when adding React Meteor Data to my Meteor project.
I'm just doing their Todo List App tutorial on their site.
This is the error I'm getting:
TypeError: Class extends value undefined is not a constructor or null
at ReactMeteorData.jsx (packages/react-meteor-data/ReactMeteorData.jsx:162:36)
at fileEvaluate (packages\modules-runtime.js:339:7)
at require (packages\modules-runtime.js:238:16)
at createContainer.jsx (packages/react-meteor-data/createContainer.jsx:1:210)
at fileEvaluate (packages\modules-runtime.js:339:7)
at require (packages\modules-runtime.js:238:16)
at react-meteor-data.jsx (packages/react-meteor-data/react-meteor-data.jsx:1:139)
at fileEvaluate (packages\modules-runtime.js:339:7)
at require (packages\modules-runtime.js:238:16)
at C:\simple-todos\.meteor\local\build\programs\server\packages\react-meteor-data.js:330:15
at C:\simple-todos\.meteor\local\build\programs\server\packages\react-meteor-data.js:337:3
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:411:36
at Array.forEach (<anonymous>)
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:220:19
at C:\simple-todos\.meteor\local\build\programs\server\boot.js:471:5
at Function.run (C:\simple-todos\.meteor\local\build\programs\server\profile.js:510:12)
Exited with code: 1
Your application is crashing. Waiting for file change.
Does anyone know why this would happen? Here is the file where I import react-meteor-data:
import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
import Task from './Task.js';
// App component - represents the whole app
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
export default withTracker(() => {
return {
tasks: Tasks.find({}).fetch(),
};
})(App);
I'm really new to MEAN stack stuff so I apologize if I'm doing something stupid.
I've run into this same issue too. If you restart the meteor server it should work.
Try removing the '.js' from your imports.
...
import { Tasks } from '../api/tasks';
import Task from './Task';
...
I restarted my meteor instance. The error went away afterwards.
I ran into this error on step 3.4 of the React Meteor To-Do list tutorial.
The imports in my file contain fully qualified names as follows:
import { Tasks } from '../api/tasks.js';
import Task from './Task.js';

Uncaught Error: Cannot Find Module When Using Dynamic Import for JavaScript

I'm using Create-React-App and am looking to use the dynamic import() supported by webpack 2.0 to import a module based on a variable string.
I've looked at the official proposal (https://github.com/tc39/proposal-dynamic-import) and it seems possible to do something like this:
import(`./language-packs/${navigator.language}.js`)
But it breaks when I try something similar.
AppRoutes.js
import LazyLoad from 'services/LazyLoad';
export class AppRoutes extends React.Component {
render() {
return (
<Switch>
<Route
exact path="/"
render={(matchProps) => (
<LazyLoad
absoluteModulePath='pages/default/HomePage'
getComponent={() => import('pages/default/HomePage')}
{...matchProps}
/>
)}
/>
</Switch>
);
}
}
export default AppRoutes;
pages/default/HomePage/index.js
import React from 'react';
export const HomePage = () => {
return (
<div>
I'm the default HomePage
</div>
);
}
export default HomePage;
BROKEN services/LazyLoad/index.js
import React from 'react';
export class LazyLoad extends React.Component {
...
componentDidMount() {
import(this.props.absoluteModulePath) // Critical dependency: the request of a dependency is an expression
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
...
}
export default LazyLoad;
Error:
But when I change the LazyLoader to
WORKING services/LazyLoad/index.js
import React from 'react';
export class LazyLoad extends React.Component {
...
componentDidMount() {
this.props.getComponent()
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
...
}
export default LazyLoad;
it works.
The absolute paths is something built into create-react-app with the help of environment variables.
.env
NODE_PATH=src/
I require dynamically loading modules this way to build a proof of concept for multi-tenancy. How can I fix the broken LazyLoad such that I can pass a string as a prop and have the LazyLoad component dynamically load the component from that string prop?
Only partially dynamic statement are allowed for import().
In your AppRoutes.js you could do this:
...
<LazyLoad
modulePath='HomePage'
getComponent={() => import('pages/default/HomePage')}
{...matchProps}
/>
then in your LazyLoad Component you do:
componentDidMount() {
import(`pages/default/${this.props.modulePath}/index.js`)
.then(module => module.default)
.then(AsyncModule => this.setState({AsyncModule}))
}
Fully dynamic statements, such as import(foo), will fail because webpack requires at least some file location information.The import() must contain at least some information about where the module is located, so bundling can be limited to a specific directory or set of files.
https://webpack.js.org/api/module-methods/#import-

Categories

Resources