I'm using the HarveyD template:
https://github.com/HarveyD/react-component-library
And I need to use some assets in my components. But, when I import the library into my react project, the following error appears:
./node_modules/components-teste/build/index.esm.js
Module not found: Can't resolve '../assets/add.svg' in '/home/gbelther/Projects/my-projects/app-teste/node_modules/components-teste/build'
Looking the "/build/index.esm.js", the imports into build folder are not correctly, because they are "../assets" (import on component library), and not "./assets" (build folder).
The structure folder is:
src
component1
component2
assets
rollup.config.js
Someone know if has any configuration to set to use assets or what I'm doing wrong?
A example project is:
https://github.com/gbelther/library-teste
I found it, Thanks
It should be externally added in rollup.config.js
external: [ 'react', '#elastic/datemath', '#elastic/eui' ]
Related
I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/
I am currently working on building a set of UI modules that developers can use to create content on their sites (similar to Bootstrap, Foundation etc). Each UI module is created as its own npm package and a developer will then pull the required modules into their project via npm.
I have a components-accordion package which contains just the CSS for an accordion. It has a file structure as follows:
/lib
/build
/node_modules
index.css
package.json
The index.css file shown above consists of a relative link to the lib directory where the actual styles for the component live:
./lib/accordion.css
I have been testing this package with a React Accordion project and have imported it for the styles. However the relative paths in this package seem to not be correctly resolved by Webpack.
import "components-accordion";
gives an error:
Failed to compile.
./src/components/Accordion.js
Module not found: Can't resolve 'components-accordion' in ...
If I link to the index.css file directly:
import "components-accordion/index.css";
../components-accordion/index.css
Module not found: Can't resolve './lib/accordion' in...
Any ideas would be great.
Thanks
Update your webpack configuration to include the lib folder as part of webpack modules, using path
const path = require("path");
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'lib')
]
},
I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?
I am using react-treelist component and inside that i am using office-ui-fabric callout(its like a tooltip) component to have a tooltip on elements in tree structure when i am running this program it runs correctly but when i am bundling and using the bundle file in my project as a module it gives error:-
Exception in Layer.componentDidUpdate(): Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded
I have tried many solutions from diff forum but none of them worked.I am sure problem is of multiple copies of react.
Details of what i did
I cloned react-treelist from github then i installed office-ui-fabric module then i changed some code to make callout component work with react-treelist, i did npm start it worked fine the i did npm run dist and copied the bundle file to my project directory inside a folder named react-treelist and then imported that file as module in my code and ran the code it gave me the above error.
Can anybody suggest me how to accomplish the above task without having multiple copies of react in my application
If you use webpack to build your application, you can use the resolve.alias configuration option to make sure that all modules refer to the same react library:
resolve: {
alias: {
'react': fs.realpathSync('node_modules/react'),
'react-dom': fs.realpathSync('node_modules/react-dom')
}
}
If you use web pack then you can fix it by adding the following to Webpack config
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
For example, to import the test utils:
import ReactTestUtils from 'react-addons-test-utils'
It works, but there is no such module as 'react-addons-test-utils' under node_modules.
And a cursory look at React source code under node_modules reveals that 'react-addons-test-utils' does not exist. In the module root directory there are only react.js and addons.js.
How does this work? What am I missing with my understanding of NPM?
It shouldn't work. Sounds like you may have installed the dependency somewhere globally. I am certain it shouldn't work without the actually package.
BTW, react source code does not actually use react-addons-test-utils:
https://github.com/facebook/react/search?utf8=%E2%9C%93&q=react-addons-test-utils