I created an app using create-react-app, while running the code for development using npm start the pages are loading fine with all the css but when I build the project using npm run build the css won't load. Below are the attached screenshots and code snippets.
Page being loaded in development.
Same page when the build folder is served.
Here is the App.js imports
import React, { useEffect, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";
import "./assets/css/classy-nav.min.css";
import "./assets/vendors/font-awesome/v5.9.0/all.css";
import "./assets/vendors/animate-css/animate.css";
import "./assets/vendors/magnify-popup/magnific-popup.css";
import "./assets/css/style.css";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import $ from "jquery";
import { WOW } from "wowjs";
toast.configure();
You might just need to run npm start after npm install.
Related
I'm following along the guide to setup Meteor Tabular v2.1.2 (guide). I have added the package and installed the theming packages. I'm using Meteor v2.8.0 and the project is a Blaze-based project.
In client/main.js, I set up the library as instructed.
import { $ } from 'meteor/jquery';
import dataTablesBootstrap from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
dataTablesBootstrap(window, $);
Now when I go to the browser, there is this error:
Can anyone help me on this?
So after serious debugging , I discovered it is enough to just import the DataTable module as such after installing it with npm
import { $ } from 'meteor/jquery';
import 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
// You don't need the code previously here .
You can now setup you DataTable as such
$(element).DataTable(//Your config object)
I am trying to run the following example.
I get errors for the following lines
import framework.Semantic;
import glm.mat.Mat4x4;
import glm.vec._2.Vec2;
import glm.vec._3.Vec3;
import uno.debug.GlDebugOutput;
import uno.glsl.Program;
...
import static glm.GlmKt.glm;
import static uno.buffer.UtilKt.destroyBuffer;
import static uno.buffer.UtilKt.destroyBuffers;
It seems that I am missing some more jar files even though I successfully imported jogl-all.jar and gluegen-rt.jar
I tried searching mvnrepository but did not find the jars I was looking for. I am not using maven.
I'm new Vue, I don't understand this error from installing bootstrap-vue-3
Install commands:
npm i --save bootstrap bootstrap-vue-3
Configuration [main.js]:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
createApp(App)
.use(BootstrapVue3)
.mount('#app')
Errors:
Rollup failed to resolve import "bootstrap/js/dist/carousel" from "node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.es.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to rollupInputOptions.external
This is a new project -- nothing added aside from default stuff and bootstrap.
I have installed firebase package in my project using cmd
npm install --save firebase
When I import firebase to my react-native project import firebase from 'firebase' I'm getting this error. What could be the problem?
Follow this pattern the error will be resolved the issue is due to upgradation in Firebase repo:
import React, {Component} from 'react';
import {Text, View} from 'react-native';
// import firebase from 'firebase';
import firebase from '#firebase/app'
import { Header } from './Components/Common';
Ran into Same issue i solved it by installing babel polyfill
npm i --save-dev babel-polyfill
then in my index.js:
import 'babel-polyfill';
thats because of the recent version of firebase you can roll back to version 4 or you can import like
import firebase from '#firebase/app';
any of the above two approaches will solve your problem
Here is my situation :
Web site powered by Angular 4
Initialised with Angular Starter Kit
Using Semantic UI as CSS framework
Here is my issue :
Adding Semantic UI to webpack has no effect.
Here is what I tried :
(I followed the official Angular documentation for webpack)
Add semantic-ui to package.json from terminal
npm install semantic-ui-css --save
Add vendor bundle to the entry property in webpack.common.js
[...]
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': AOT ? './src/main.browser.aot.ts' :
'./src/main.browser.ts',
'vendor': './src/vendor.ts'
},
[...]
Create the src/vendor.ts file and set its content to :
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// My CSS framework
import 'semantic-ui-css';
What I got :
Webpack build without error, the vendor bundle is created :
vendor.bundle.js 3.74 MB 2 [emitted] [big] vendor
And webpack inject the bundle script in the HTML page :
<script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js" async></script></body>
But the visual doesn't change (but should I check it with CDN) and I don't see the vendor.bundle.js file in the dist folder.
I probably miss something, what is it ?
Below statement only imports semantic.js as package.json is pointing
to that file.
import 'semantic-ui-css';
To import CSS, you can add the below:
// To import CSS
import 'semantic-ui-css/semantic.css';
OR in src/styles/styles.scss
#import '../../node_modules/semantic-ui-css/semantic.css';