Hi i am trying to make use of micro front end in nextjs , So as mentioned in this npm pkg link ,
lib folder is not present inside the #module-federation package
tried below way to import the include-defaults
import '#module-federation/nextjs-mf/lib/include-defaults'
but it throws the below error
Module not found: Can't resolve '#module-federation/nextjs-mf/lib/include-defaults'
import App, { AppContext as NextAppContext } from 'next/app'
import '#module-federation/nextjs-mf/lib/include-defaults'
We can find files inside the src folder, So we can point src like below
import '#module-federation/nextjs-mf/src/include-defaults'
This will importing lib as expected ,
** Note but i am not sure , why the lib folder and its files are not there in the package
Related
Trying to import image folder from public folder to src folder in react but i kept getting error messages in the terminal and my chrome
[the vscode screenshot](https://i.stack.imgur.com/gtyL0.png)
Your image is inside a Image folder. So the import should be
import Airbnb from '/Images/airbnb.png'
If it gives webpack import error you can do it like this way
<img src='/Images/airbnb.png'/>
Here /Images/airbnb.png gives a direct link to the image of the public folder.
you need to import from the folder in which the file exists
import Airbnb from '../../public/Images/airbnb.png'
Below code works — trying to import jquery file from node modules
Import $ from ‘jquery’;
Below code doesn’t work— I am trying to import the same jquery file from ‘clientapp/src/kendo’ folder
Import $ from ‘../kendo/jquery’;
Can you please suggest how to fix. Actually I have few licensed js library files, it errors when I try to import them from ‘clientapp/src/kendo’ folder.
You can use resolve.alias in webpack to import the modules from a directory that has more levels up in the filesystem.
https://webpack.js.org/configuration/resolve/#resolvealias
As a good practise, you should not import files from node_modules, those are compiled in webpack, so you use the import import $ from 'jquery'
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
I created react by create-react-app my-app --typescript.
And then I installed typescript module in local.
../typescript-module/A.ts
export default class A {
}
App.ts
import A from 'typescript-module/A';
console.log(A);
I try to import typescript module to my react app.
But it show error like under.
./node_modules/typescript-module/A.ts
Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
How can I set installing local typescript module ?
If I am understanding correctly, you are trying to import a local custom made React component. If you use an absolute path for your import, it will try to find it in the node_modules. You should use relative paths for local modules/components.
import 'typescript-module/A' -> import './typescript-module/A'
Note: The relative path depends on where you are importing it from
I want to import img when using typescript in my react project
import * as img from "./assets/webpack.png";
But I got the error TS2307: Cannot find module './assets/webpack.png'.
I search arround and find the solution saying that I have to add
declare module "*.png" {
const value: any;
export default value;
}
But I don't know where to add it.
I created a declarations.d.ts file at my root project and add it to the file but nothing happens. I still got the error
Could you show me how to add it. Thank you in advanced
The solution is that you have to put declarations.d.ts in the asserts folder, not the root folder. I have to be in the same folder with your image files