I'm trying to npm run deploy on my project where I'm storing the minified font-awesome css file and I'm getting the following error:
Creating an optimized production build...
Failed to compile.
./src/assets/css/font-awesome.all.min.css
ParserError: Syntax Error at line: 1, column 30
The app works fine on development sever.
The error shows whether I'm importing the css to the main css file or the main js file.
I only found some related old posts with potential solutions for a next.js project and yarn like in this link: https://github.com/vercel/next-plugins/issues/310
This is a react project and I'm using npm.
Any suggestions?
Can't comment on this unless there's more information regarding module-bundler and what is the configuration for the same. As it's treated differently according to module-bundler.
I would suggest you to use official package of fontawesome for react #fortawesome/react-fontawesome
PS. Module Bundler configuration should not be changed without proper knowledge as it can make whole application crash.
Related
I am currently working on a nextjs project. The nextjs project is a bit older and used initially a _middleware.ts file in the pages directory. A while ago, the older nextjs version came in conflict with an update that we wanted to do. In order to get it working, we had to change the name of the file to: middleware.ts(without the underscore). Everything is working fine in development. When running npm run dev the following warning is displayed:
warn - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
until the actual build. When building, the following error is displayed:
- Collecting page data .ReferenceError: self is not defined
at Object.<anonymous> (/Users/****/**** Dropbox/**** ****/Mac/Documents/GitHub/******.com/_next/server/pages/middleware.js:1:1)
***
> Build error occurred
Error: Failed to collect page data for /middleware
According to: https://nextjs.org/docs/messages/middleware-upgrade-guide, the middleware file should currently be placed in the root directory (next to the pages folder). when moving the file middleware file to this directory, the error displayed while building does indeed go away, but when using npm run dev a white page is displayed containing:
style data-next-hide-fouc="true"body{display:none}/style
Moving the middleware file back to the pages folder, everything works fine in dev, but the page can not be built.
I have tried different things, among them:
I ran npm i eslint-config-next#latest --save-dev according to the above mentioned page, trying to make sure that I am running the latest nextjs verion. (When running npm next -v this although displays: 8.11.0).
I made sure that there is no assetPrefix defined, neither a basepath (Next.js Error Getting 404 When Fetching JS Resources After Refresh).
I added: <body style={{ display: "block" }}> according to this: https://github.com/vercel/next.js/issues/10285 . This only displays a plain version of the website (all styling is gone).
I made sure that there was no cypres being used to mess with the clock. This does not seem to be the case.
Any help is appreciated.
I have a question. I need to make some modification to our nette application (first time working with the framework). I need to import NAJA lib via FTP and by downloading code from github. I do not have access to server or console, so download via composer, npm... is not possible.
I done this:
Downloaded all files from https://github.com/jiripudil/Naja/releases (not the ZIPs) and put them in directory vendor
loaded in app/presenters/templates/#layout.latte with:
<script src="{$basePath}/js/vendor/Naja.js" type="module"></script>
Tried to inicialize it in one of my javascript with:
document.addEventListener('DOMContentLoaded', naja.initialize() );
But then error pop up, saying that naja is not defined. What am I missing?
Naja is written using modern JavaScript, it can be initialized only via ES5+ import, for instance
import naja from 'naja';
and then the event listener for initializing naja can be added after that code, and it can be compiled via webpack like this https://github.com/MinecordNetwork/Website/blob/master/webpack.config.js
You can do it all on your local machine with npm and yarn installed, and then upload bundle.js that was built to the server, it's also used in the mentioned repository so you can check out how and what libraries are needed, to compile the code from /public/js/main.js type yarn encore production or yarn build for development.
The Problem:
next.js is failing to run the build command, even though I can run it in development mode with no problems. Its saying there is a missing semicolon in the css. Of course there isn't one, it wouldn't compile in dev mode if there was. And for general information, I am using css modules for this project. So all my css is name.module.css.
here is the warning the console gives, and it is the entire stack trace. Doesn't change if I run --debug flag either. and Im running npm run build which corresponds to the script "build": "next build" in my package.json.
> projectName#0.1.0 build
> next build
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
Failed to compile.
HookWebpackError: <css input>:61:1: Missed semicolon
> Build error occurred
Error: > Build failed because of webpack errors
at /Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/telemetry/trace/trace.js:6:584)
What I have tried:
First I looked up the issue here. I found a few posts with similar errors.
Post 1 From post claification: this is my full stack trace shown.
Post 2 I ran npm install and it found nothing to update. and changed my import to "next/app" instead. Didn't help either.
Other than posts I did a dive into the next.js code in node_modules to try to understand what was happening and I got no where because its a webpack thing, which I did not realize. I also saw another post that I cannot find that said that this error happens with importing google fonts sometimes, so I commented out all my google fonts and this is still happening. I do not quite understand how it could give errors on build but not on dev.
Closing thoughts
I suspect that something is being imported into some file somewhere, as that seemed to be the issue in the other post I read (the one I cannot find), however I cannot find it. That or my lack of next.config.js file is causing the issue ( I am a next.js beginner). Also, I am using typescript, if that helps.
Any help is really appreciated.
Thank you everyone 😄
Trying out Django Shop. Following this tutorial: https://django-shop.readthedocs.io/en/stable/tutorial/intro.html (stable).
When I run the server and open localhost, here's what I see:
Error: File to import not found or unreadable: bootstrap-sass/assets/stylesheets/bootstrap/variables.
Parent style sheet: /home/vm/PycharmProjects/Django-shop/django-shop/shop/static/shop/css/_variables.scss
on line 1 of ../shop/static/shop/css/_variables.scss
>> #import "bootstrap-sass/assets/stylesheets/bootstrap/variables";
I presume, this "bootstrap-sass" directory is supposed to be in "css" and I don't see it there.
Only happens on front of the website. I can open admin panel just fine.
The error mentioned in the comment that says No module named 'django.core.urlresolvers' gives you a clue that there is a django compatibility issue. To understand more about this error please refer to this answer on Stackoverflow, which discusses a particular changelog from Django 1.x version to 2.x.
Now that we know that this could be a point of conflict here, refer to Compatibility Table, which clearly states that Django Shop is not compatible with Django 2.x versions as of now and in your project setup when you pip install django, it installs the latest version of django which is 2.1. Therefore to overcome this, you should downgrade the Django to a version thats compatible with your Django Shop version. So a working combination would be Django 1.11 and Django Shop 0.13.x.
I have created one angular 6 application using visual studio 2017.
Here is the screenshot for my visual studio project (Angular).
As you can see I have added one new component and service named as Todo.
When I am adding todo.service.ts I need to add some references of angular modules so that I can avail HttpClient, HttpHeaders, HttpParams , catchError, tap, map features.
But here seems like I am not able to refer the path to the angular module package which we can easily refer while creating project using cli command because there we have node_modules folder where we have all packages and importing file using below command
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { catchError, tap, map } from 'rxjs/operators';
but here in VS-2017 I am not able to refer the package.
It give me an error like "can not find modules"
Here is the screen shot for the same.
Please suggest me what to do here how to refer to angular packages while creating angular project in VS-2017.
Note there is no error in referring to the package because the same code is working while creating project using angular CLI command.
Navigate to directory where package.json file is placed
Run
npm install
If still the issue persists
Install required package using npm:
npm i <package-name> --save
Do this ,
Replace /common/http to common only
Same for operators
I got the solution..
You can rename or deleted the existing node_modules folder.
Then create new project using angular-cli command.
Then paste the copy the node_modules(step 2) to my .NET folder (step1).
Now, it start working.
Thanks for your all suggestion guys..