I am trying to import an SVG file as a React component as below.
This normally works on apps created using create-react-app
import { ReactComponent as CloseIcon } from "./assets/icons/close.svg";
const App = () => {
return (
<div><CloseIcon /></div>
);
};
export default App;
I tried doing something similar in laravel, but got this error
I suspect that this has something to do with my laravel-mix configuration (I am fairly new to laravel, excuse my ignorance)
At the moment, my webpack.mix.js laravel-mix looks like this:
mix.ts("resources/js-react/src/index.tsx", "public/js-react")
.react();
On compilation, it gives a warning saying
export 'ReactComponent' (imported as 'CloseIcon') was not found in
'./assets/icons/close.svg' (possible exports: default)
Any form of assistance would be appreciated.
Related
React CRA sometimes can not find react tsx modules.
React version: 18.2.0
Node version: 19.2.0
I've tried to lower Node version. I've tried change export from export * from './ModuleName to export {ModuleName} from './ModuleName and change import from something like import {ModuleName} from ./ModuleName to import {ModuleName} from ./ModuleName/ModuleName. Sometime it helps, sometimes not.
All components written in next pattern:
type ModuleNameProps = {/* some props *.};
export const ModuleName = ({/* props */}: ModuleNameProps): JSX.Element => { /* Component body */};
export * from './ModuleName';
P.S. Application still works with such errors and other developers on a project don't have such errors
P.P.S. Such errors seem to occur only when path to component contains repetitions. For example: './ComponentName/ComponentName/ComponentName.tsx'
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 trying to import my jss file to React component (.jsx) and I have this error :
I looked through related questions and I tried all solutions, mostly about updating versions of material-ui. Here is my package.json file:
the way I write jss file :
import { makeStyles } from '#material-ui/styles';
const useStyles = makeStyles((theme) => ({
root:
{
margin: '10px'
}
}));
export default useStyles;
And jsx file :
import React from 'react';
import DateBar from './DateBar';
import Grid from '#material-ui/core/Grid';
import useStyles from './Board.jss';
export default function Board()
{
const classes = useStyles();
return(
...
Am I missing something or Do I need additional packages for using jsx and jss in React?
I have been trying all the solutions but didn't work..
Note: When I put the code inside of Jss into Jsx file, code works fine. Importing/Exporting might be an issue..
Edit: Still couldn't fix even though I created a new app and installed dependancies from the beginning..