i installed antd to frontend of my app, i have this at the app.jsx
import "antd/dist/antd.css"
import { Button } from 'antd'
and now in my first component i am trying to use like this:
import antd from 'antd'
const { Card } = antd
but now i am getting this error
[plugin:vite:import-analysis] Failed to resolve import
"antd/es/default/style" from ".../component.jsx". Does the file exist?
.../component.jsx:1:9 1 | import 'antd/es/default/style';;import
RefreshRuntime from "/#react-refresh"; | ^
in node_modules there is not have the default 'ant/es/default' folder
If you have installed everything correctly to your node_modules folder (e.g. npm install or yarn install) you should be able to import either antd/dist/antd.css or if you just want to have the styles for the inputs antd/es/input/style/index.css
Related
Anyone knows how I can import each of below function in Vue and React without an error?
Right now I am getting an error if I am importing vueFetch and reactFetch.
So if am importing vueFetch into a Vue project, I am getting an error for React that React is not defined and the same applies if I import reactFetch (Vue ref not defined).
import { vueFetch } from './composables/vue/vue-fetch';
import { reactFetch } from './composables/react/react-fetch';
export { vueFetch, reactFetch };
I am trying to make a Vue and React NPM package, but I only have one index file, and I need to import both Hook into the single index file. So I do not need to create 2 packages.
here is the link to the package: https://www.npmjs.com/package/use-lightweight-fetch
I'm trying to use react native navigation in my app, but get odd error. I'm using online platform Code Sandbox with React Native template.
Dependencies:
#react-native-material/core 1.3.7
#react-navigation/native 6.1.2
#react-navigation/native-stack 6.9.8
react 17.0.* (17.0.2)
react-dom 17.0.* (17.0.2)
react-native 0.71.1
react-native-safe-area-context 4.5.0
react-native-screens 3.19.0
react-native-web 0.18.* (0.18.12)
react-scripts 3.4.1
import React from "react"
import { Text } from "#react-native-material/core"
import { NavigationContainer } from "#react-navigation/native"
import { createNativeStackNavigator } from "#react-navigation/native-stack"
/* ^^^ problem line ^^^ */
const Stack = createNativeStackNavigator()
function App() {
return <Text>Example text</Text>
}
export default App
Error:
ModuleNotFoundError
Could not find module in path: 'react-native/Libraries/Utilities/Platform'
relative to '/node_modules/react-native/Libraries/StyleSheet/processColor.js'
I tried delete and re-add react-native dependency as well as recreate the sandbox, but the problem hasn't gone.
I am running into this error where npm start just runs fine with the follwing import :
import Header from 'semantic-ui-react/dist/commonjs/elements/Header';
But when I do a npm test, It always shows me :
ReferenceError: Header is not defined
But When I change the import in the main file to the below line the npm test runs fine
import Header from '../node_modules/semantic-ui-react/dist/commonjs/elements/Header';
Is there any alternative for me to avoid referencing the import from node_modules folder?
semantic-ui-react exports all of its components as named modules, so that you don't have to dig all the way through the various paths to get to each component. Instead, you could do:
import { Button } from 'semantic-ui-react'
import { Header } from 'semantic-ui-react'
import { Container } from 'semantic-ui-react'
That's a lot simpler, yeah? 😊 And, in case semantic-ui-react changes their folder structure, you won't have to change your code.
Here is the semantic-ui-react documentation on how to import and use its components. Just click on the "Try it" icon for any of the examples.
I get this error when importing semantic > Can't resolve 'semantic-ui-react' <
(i've installed semantic and did gulp build and all that)
I tried this
import React from 'react'
import { Button } from 'semantic-ui-react'
const ButtonExampleButton = () => (
<Button>Click Here</Button>
)
export default ButtonExampleButton
In order to use the react components of semantic ui, you will need to install the semantic-ui-react library.
Note that this library doesn't include the CSS files of semantic-ui and you will need to include it yourself.
Either via a CDN or a npm package. See the docs for examples.
I am trying to develop an NPM module that will provide react components. Right now, I'm just trying to set up the package and cannot get JSX in the components to be recognized in an example react project using the library.
My npm package project has one component:
import React from 'react';
class AfWin extends React.Component {
render() {
return <div></div>;
}
}
export default AfWin;
And this component is referenced in the index.js file pointed to as main in the package.json file:
import AfWin from './AfWin';
export default { AfWin };
To pack and import this package, I use a command prompt and type: npm pack. Then, I go to my example create-react-app and import the created .tgz file with npm install C:\path\to\file.tgz. This works, and I am able to get the AfWin component in my example app. However, the <div></div> or any JSX I try causes a problem at runtime:
Module parse failed: C:\path\to\project\node_modules\module-name\AfWin.js Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
|
| render() {
| return <div></div>;
| }
| }
To make the problem more concrete, I published my broken module to npm: npmjs.com/package/react-affine