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'
Related
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
I'm following this tutorial to import fontello in my project.
But in step 5 I dont have fontello.css file.
So, in your App.js import fontello
import "./fontello/css/fontello.css"
As you can see in my project I dont have that file. So How Can I Import Fontello to my project??
Well it seems like the cli actually set all your file names in css starting with my-icon instead of fontello
To make you code work, you can import the css like
import "./fontello/css/my-icons.css"
and it should work the same
EDIT:
Another solution if for you to set the name field in config.json to fontello and then run fontello-cli install, this will lead to the css file names to be prefixed with the name fontello and you can import it like it is mentioned in the medium article
I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.
I use standard ES6 imports in a react project that is built with Webpack.
For example, at the top of my files will be statements like this:
import React, { Component } from 'react';
import _ from 'lodash';
I found that if multiple files use React, I need to import it in each file.
But I only need to import lodash in one file, and it is available everywhere.
Why the difference?
Looks like this is a lodash specific issue - when imported using Webpack, it can leak into the global window.
https://github.com/lodash/lodash/issues/1798
I have an application where I have to build code using babel and react. The application will be built using gulp and webpack for automated build creation and deployment. When using gulp and webpack to convert babel+react code to browser interpretable code, we need to install react using npm and has to be imported in all files, following is the sample code:
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './helloWorld.jsx';
import HelloMe from './hello-me.jsx';
ReactDOM.render(
<HelloWorld />,
document.getElementById('app-test')
);
ReactDOM.render(
<HelloMe />,
document.getElementById('app-container')
);
Now, the problem is this code when bundled with webpack, bundles react and react-dom library code to the bundled file. So, I would not be able to cache these library files to be loaded in different views. Due to this, the same library code will load again and again in different bundled files. Is there a way to load these files separately and not in the bundled file?
Edit your Wabpack configuration file and specify React & ReactDOM as externals.
externals: {
"react": "React",
"react-dom": "ReactDOM",
},
Then, include React & ReactDOM from CDN or your prefered source.
Whenever you call import React from 'react' or require('react') (or react-dom), Webpack gives you external copy of library