updated
I have been troubleshooting this and feel like I'm finally at the root of this issue. I went and separated the two css sheets into Header.scss
HeaderProfile.scss and the warning still occurred.
So it looks like this is what is causing the issue:
import/no-cycle
index.jsx
import { HeaderProfile } from './HeaderProfile';
export type Props = {
home: Link,
links: Link[],
mobileOnly?: any,
profile?: Profile,
};
HeaderProfile
import type { Profile } from './index';
export type Props = {
profile: Profile,
};
After talking to Dave, it looks like the issue is that
I'm importing HeaderProfile into index and then needing profile to be imported back into HeaderProfile. I'm talking to the github repo people on next steps
// eslint-disable-next-line import/no-cycle
import { HeaderProfile } from './HeaderProfile';
Thanks for any help provided!
Link to the github repo:
https://github.com/ifmeorg/ifme/blob/master/client/app/components/Header
Updated above, but closing this for archiving purposes.
There is a circular importing happening but not as the people in the repo thought.
Talking to the github repo people on next steps.
The issue is that they are importing in HeaderProfile into index.jsx and then importing Profile back into HeaderProfile
Related
I am writing a component that makes use of another component, so I've written
import { Text } from "../Text/Text"
in the file /src/stories/TextArea/TextArea.tsx.
However, this gives the error
Module not found: Can't resolve '../Text/Text' in '/Users/username/project/src/stories/TextArea'
Changing the import statement to
import { Text } from "../Text/Text.tsx"
makes it work just fine. Instead, the linter complains:
An import path cannot end with a '.tsx' extension. Consider importing '../Text/Text.js' instead.ts(2691)
As I understand it, .tsx endings are forbidden in TypeScript so reconfiguring the linter doesn't seem to be the best option.
Obviously, importing Text.js instead doesn't work as it doesn't exist. Storybook is supposed to work out of the box with TypeScript, so I'm unsure of what I have to do.
In the .mdx files I am using as stories (like Text.stories.mdx), imports including .tsx are accepted without linter complaints. Removing the extension produces a similar Module not found error.
The project was created with create-react-app and is running Storybook 6.5.15.
your import import { Text } from "../Text/Text" should work fine.
Make sure you are using the latest version of Storybook - 6.5.15.
...
I tried to reproduce your issue and failed to do so. I did not get the same error and the import worked just fine. Let me describe what steps I took:
I installed Storybook in my project using npx storybook init --type react. This installed Storybook 6.5.15 for React.
I created a simple component in ./project/src/Button.tsx
import React from 'react'
export const Button = () => {
return <div>MY BUTTON</div>
}
I created a simple story in ./project/stories/Button.stories.jsx like this:
import React from 'react';
import { Button } from '../src/Button';
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
title: 'Example/Button',
component: Button,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
};
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
primary: true,
label: 'Button',
};
And there are no issues. The import works as it should. If this does not help you, tell us more about your project setup (e.g. are you using Create-react-app), etc. So this issue is easier to reproduce.
I am having trouble with some basic module importing and exporting in react typescript. Exporting as follows:
//gameStateReducer.ts
import { Action, ActionKind, GameState } from './types';
export const gameStateReducer = (
gameState: GameState,
action: Action
): GameState => {
//yada yada yada
};
and importing as:
//index.tsx
import { gameStateReducer } from './gameStateReducer';
The error message is:
Compiled with problems:
ERROR in ./src/index.tsx 9:0-54
Module not found: Error: Can't resolve './gameStateReducer' in '/Users/REDACTED/Documents/development/react-js/wordle/src'
This was all working when I was developing the same project on stackblitz, but trouble came when I began working locally with create-react-app.
I'm having the same problem with my constants module.
I've read typescript's reference page on exports and imports, and as a matter of fact, my types and interfaces are importing and exporting just fine.
I've tried importing and exporting to default with no luck.
Gotta be something simple I'm missing here. Thanks!
The way you added import this should work. I hope your directory structure is like
src
gameStateReducer.ts
index.ts
if your gameStateReducer.ts is under different directory then you should update import path to that directory.
for example, if you have structure like below
src
anotherDirectory -> gameStateReducer.ts
index.ts
then update import statement to this
import { gameStateReducer } from './anotherDirectory/gameStateReducer';
I'm using NextJS version 12.0.3 with framer motion for animations. Putting the functionality of the framer-motion library aside, when I tag any html element in my component, I get an error
error - SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { createContext } = pkg;
The file (Login.jsx) causing the error:
import { motion } from "framer-motion";
const Login: React.FC = () => {
return (
<motion.div
className=""
>
</motion.div>
);
};
export default Login;
Oddly enough, when I am routed TO the logo page from a different page, the page loads fine. But when I REFRESH the page, I'm faced with this error.
When I keep the import statement for framer-motion, BUT remove the motion. tags on my div element, the error does not persist when I refresh.
Is this a common issue with Next JS 12.0.3?
Should I just roll back to previous versions?
Thanks for your time!!
I had the same errors by importing framer-motion.
I solved this problem change import by require:
const { motion } = require("framer-motion");
I think the problem is from the latest update.
This works for me yarn add framer-motion#6.5.1
I was also facing the same issue and looking at the upgrade guide
of next js I found that the I was using nodejs version < 12.22.0 which caused this issue. Upgrading it to nodejs 12.22.0 fixed the issue for me.
I am following the Amazon AWS free tier course and have an issue with module 4, "Add API and database."
The code that i am trying to run in src/App.js was obtained from that link. The error is: Attempted import error: 'createNote' is not exported from './graphql/mutations' (imported as 'createNoteMutation')
The problem for me is with the name:
createNote is createTodo
deleteNote is deleteTodo
The code in mutations.js is:
export const createTodo = /* GraphQL */ `
mutation CreateTodo(
$input: CreateTodoInput!
$condition: ModelTodoConditionInput
) {
createTodo(input: $input, condition: $condition) {
id
name
description
createdAt
updatedAt
}
}
`;
Change the names and your problem will be resolved.
I looked in the import folder and it turns out for some reason that the proper GraphQL functions weren't there. So, updating the GraphQL API fixed this for me.
The last answer by Dan worked for me.
For the noobs like me out there,
src/app.js is the file to change.
insert the code syntax below per Dans solution...
[copy the below in at about line 14-15]
import { listTodos as listNotes } from './graphql/queries';
import { createTodo as createNoteMutation, deleteTodo as deleteNoteMutation } from './graphql/mutations';
[end of copy]
Should now compile, and allow you to test the Step 4.4 of the AWS Amplify tutorial. (You'd think the tutorial writers would test this before releasing it, right..?)
Also the import of listNotes from the graphql queries is having this issue.
I fixed as below:
import { listTodos as listNotes } from './graphql/queries';
The issue from this question was fixed as below;
import { createTodo as createNoteMutation, deleteTodo as deleteNoteMutation } from './graphql/mutations';
Says I want to share a simple react component in npm package, to let others use it, must I do this?
import SomeComponent from './components/SomeComponent';
module.exports = {
SomeComponent: SomeComponent
}
reference
https://github.com/alanbsmith/npm-example-module/blob/master/lib/index.js
In package.json of the project you can see the main file of the package is build/index.js, but why the author don't just export components/SomeComponent, but instead created a wrapper? I understand he use babel, it's to support the code for legacy browser but why use module.exports in this case?
If you're using es6 imports, you should use es6 exports as well for consistency.
import SomeComponent from './components/SomeComponent'
export { SomeComponent }
And in your package.json set the main field to the file after build. such as
{
"main": "lib/index.js"
}
Then people can import it like this:
import { SomeComponent } from 'my-lib'
The example you're following looks really outdated, though, and doesn't follow a lot of good practices. Here's a more modern-looking solution that you'll probably have less trouble with.