I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs
Related
I have purchased a theme and i want to implement it in my React Project. I added script tags in index.html but they doesnt seem to update the data when component is reload or pressed back. I thought i should install using npm and this is how i imported after installation.
import $ from 'jquery';
import 'bootstrap-select';
import 'jquery.mmenu';
import 'bootstrap-slider';
import '#material/snackbar';
import 'clipboard';
// import 'counterup/jquery.counterup';
import 'magnific-popup';
import 'slick';
import './assets/js/custom.js';
But, facing a problem with jQuery in custom.js file
What exactly is the right way to import jQuery and its dependencies into Reactjs Project. How can i integrate third party libraries in Reactjs.
I unintentionally updated a good junk of npm packages listed in my package.json file and now I'm experiencing issues importing the FullCalendar package.
Here's what I know:
When I import the Fullcalendar module or any any plugins from the package (e.g. import dayGridPlugin from '#fullcalendar/daygrid), the exported script does not execute. I have not had issues importing other npm packages in other js files. All of my other scripts have not experienced this issue.
JS File:
import * as utils from './utils.js';
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: .... Nothing happens.
However, If I do not import from #fullcalendar the script behaves as expected.
JS file:
import * as utils from './utils.js';
// import { Calendar } from '#fullcalendar/core';
// import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: show me something
Troubleshooting:
Webpack successfully updates the file after changes via npm run watch
I have confirmed the updated file is loading in the browser
I have tried reverting packages to previous version (e.g. #fullcalendar#4.4.2 - previous version that was working)... same result
Downgraded from webpack 5 -> webpack#4.46.0 ... same result
Checked documentation to ensure I was using fullcalendar v5 correctly after upgrading from v4 - https://fullcalendar.io/docs/initialize-es6
Relevant Version Nunbers
#fullcalendar/core#5.6.0
#fullcalendar/daygrid#5.6.0
#fullcalendar/list#5.6.0
#fullcalendar/timegrid#5.6.0
webpack#4.46.0
I'm really stumped on this one. I'm sure it's due to my limited knowledge of ES6 modules. I appreciate any insight that you can provide. Thanks!
I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.
I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr
I did a npm install mobius1-selectr
and imported it in my main.js
import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';
but as soon I import I get this exception:
You must supply either a HTMLSelectElement or a CSS3 selector string.
which comes from the source of selectr.
Is the import not to be done this way in webpack / main.js?
What am I doing wrong? Any help is appreciated.
Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:
import Selectr from 'mobius1-selectr'
I have a React project where I installed Roboto font doing 'npm install font-roboto'. I'd like to import that from my main.js file instead of referencing a CDN in index.html.
What would be the best way to achieve this?
Apparently you can import it doing the following in the main.js
import '../node_modules/font-roboto/dist/styles/roboto.min.css';
UPDATE: As noted in the comments, the following also works.
import 'font-roboto/dist/styles/roboto.min.css';