I'm trying to import multiple icons from the same pack at once, in this case, font-awesome like this:
import {FaPencilSquare,FaHome} from 'react-icons/fa'
but I'm getting this error:
ERROR in ./node_modules/react-icons/fa/index.js
Module build failed: SyntaxError: Unexpected token, expected { (1:7)
> 1 | export Fa500px from './500px';
| ^
2 | export FaAdjust from './adjust';
3 | export FaAdn from './adn';
4 | export FaAlignCenter from './align-center';
If I import icons separately I don't get any errors,
any ideas what it could be?
Thanks to #bennygenel it seems like there is an open issue with that a workaround is to add the lib folder to your import like this:
import {FaHome,FaPencilSquare} from 'react-icons/lib/fa'
Related
So we're using the geist component library in our codebase. It's pretty much integrated into parts of our app and since this library is 250kb, it's impacting our page speed. To circumvent importing the entire module, the usual solution is just importing what you need and ideally, nothing should break and everything should work as expected.
import { CssBaseline } from "#npkn/geist-react"
Doing the above should work but adds 250kb to the bundle.
Another way to import a component would be to import the specific file. I get two options to import the component from either ESM or dist modules
import CssBaseline from "#npkn/geist-react/dist/css-baseline"
and
import CssBaseline from "#npkn/geist-react/esm/css-baseline/index"
I've tried doing both of these but webpack throws errors. I've tried importing named exports as well but even then it throws an error.
TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function
9 | static async getInitialProps(ctx) {
10 | const initialProps = await Document.getInitialProps(ctx)
> 11 | const styles = CssBaseline.flush()
| ^
12 |
13 | return {
14 | ...initialProps,
My question is am I doing the imports right or is there something I'm missing?
Thank you!
If anyone else comes across this question, please check out the bundle size example https://geist-ui.dev/en-us/guide/bundle-size. The example doesn't quite work but I found this work around https://spectrum.chat/geist-ui/react/minimize-build~d30af727-2b97-4d16-9357-9b4e5104fdc9
Instead of doing
import Button from '#geist-ui/react/esm/button'
do
import Button from '../../../../node_modules/#geist-ui/react/esm/button';
Reduced our bundle size significantly!
In the midst of upgrading a project from CRA 4 to CRA 5, which bumps Webpack from 4 to 5 in the process. Specifically, the upgrade was from:
react-scripts: 4.0.3 to 5.0.0
webpack: 4.33.0 to 5.68.0
Everything's working except one issue that I'm having no luck tracking down the cause of.
One product within the app uses a set of nested index.ts files to manage exports, so they can be imported in one shot instead of a bunch of individual imports. The sequence looks like this:
//reports-async/containers/AggregatedReportDetail/AggregatedReportDetail.js
export const AggregatedReportDetail = () => {
...snip...
}
export default AggregatedReportDetail
-------------------------------
//reports-async/containers/index.ts
...snip...
export { default as AggregatedReportDetail } from './AggregatedReportDetail/AggregatedReportDetail'
export { default as TrendReportDetail } from './TrendReportDetail/TrendReportDetail'
...snip...
-------------------------------
//reports-async/index.ts
export * from './containers'
export * from './components'
export * from './models'
export * from './store'
export * from './types'
export * from './utils'
-------------------------------
//appMenu.js
import {
AggregatedReportDetail,
ReportPrint,
...snip...
} from './reports-async/containers'
This setup worked with CRA4/Webpack4, but with the update to CRA5/Webpack5, it compiles successfully but throws this error in the browser console:
Uncaught TypeError: _AggregatedReportDetail_AggregatedReportDetail__WEBPACK_IMPORTED_MODULE_4__ is undefined
I found that by changing the import in appMenu.js to directly import from the AggregatedReportDetail.js file instead of the module-level index.ts file, the error goes away (and it throws a similar error for the next imported component). IE, this works:
import AggregatedReportDetail from './reports-async/containers/AggregatedReportDetail/AggregatedReportDetail'
I'm assuming this is likely to be some kind of circular dependency issue or similar, but I can't seem to find any good info on how to resolve this without going back and manually changing 500+ imports to no longer use the index.ts files.
Am I missing something really obvious?
I have a project called Frontend-Core-Components which contains my App component.
I have another project (let's just call it Alpha for now) which containsAlphaApiService, which I pass to the App component via its props, I do this in Alpha's index.tsx
Alpha uses Create-react-app, I'm using rescript to modify the Webpack config to add Frontend-core-components as a module, Inside this Webpack configuration, I use resolve.alias to map imports from Alpha index.tsx to the Frontend-Core-Components.
It all seems to work, except when I run the build from Alpha project, I encounter the following.
SyntaxError: /Users/coolguy/project/alpha/src/index.tsx: Unexpected token (9:11)
7 |
8 | window.onload = () => {
> 9 | render(<App apiService={new AlphaApiService()} />,
document.getElementById('root'))
| ^
10 | }
11 |
any ideas?
You need to compile your import module, before importing it.
I would suggest checking out this project to create React component libraries.
https://github.com/KaiHotz/react-rollup-boilerplate
Or you can include the Frontend-Core-Components in your ts-loader(or babel-loader) rule.
I'm normally able to resolve this error easily enough, but this time nothing seems to work.
My main.ts file has this:
import locale from 'element-ui/lib/locale/lang/en';
The error:
ERROR in /Volumes/SuperData/Sites/reelcrafter/rc-ts/src/main.ts
6:20 Could not find a declaration file for module 'element-ui/lib/locale/lang/en'. '/Volumes/SuperData/Sites/reelcrafter/rc-ts/node_modules/element-ui/lib/locale/lang/en.js' implicitly has an 'any' type.
Try `npm install #types/element-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'element-ui';`
4 | import store from './store';
5 | import ElementUI from 'element-ui';
> 6 | import locale from 'element-ui/lib/locale/lang/en';
| ^
7 | import VueDragDrop from 'vue-drag-drop';
8 | import './styles/element-setup.scss';
9 | import './bootstrap/amplify-setup';
No lint errors found
Version: typescript 3.0.1, tslint 5.11.0
In my declarations.d.ts at root level, I added the following:
declare module 'element-ui';
This doesn't fix it. Nor does declare module 'element-ui/*';. How do I fix it?
Reproduction repo: https://github.com/ffxsam/repro-element-ts-bug
Create a declaration file called shims-element-ui.d.ts with following contents:
declare module 'element-ui/*';
I am using brace which is a npm module for theming in ace editor.
Currently, I am importing each theme using
import 'brace/theme/solarized_dark';
How do I import all the themes as I need to give the user the option to pick any theme.
Create one brace/themes/index.js and export the things that you want to acess
export * as theme1 from './theme1';
export * as theme2 from './theme2';
....
Then import from that folder : (name is index.js so no need to give full path to the file)
import * as SolDark 'brace/themes'; // by default get index.js
Then you can access each method like :
SolDark.theme1;
SolDark.theme2;
I don't know how does your file structure look like, but lets assume it is something like that
|brace
|---theme
| |---theme1
| |---theme2
| | ...
| |---solarized_dark
Then you could create index.js in the theme folder and inside it:
//index.js
export {default as theme1} from './theme1';
export {default as theme2} from './theme2';
assuming you have default exports.
Then in other files you just simply do:
//other_file.js
import {theme1, theme2} from 'someRelativePath/brace/theme/index'
or
import * as themes from 'someRelativePath/brace/theme/index'