Gatsby.js css: "undefined [undefined]" - postcss

with the gatsby-starter-default build, running gatbsy develop, the build shows the following output:
src/layouts/index.css
undefined [undefined]
src/components/Footer/index.module.css
undefined [undefined]
What does this mean? The build seems to have succeeded. The only clue is that both these css files #import a variables.css file which uses custom css properties like :root { --blah-color: #ff3333; }. So that seems to be the issue but what is the process that is failing / printing undefineds?

I found the answer here: https://github.com/gatsbyjs/gatsby/issues/2462
quoting relevant bits:
postcss-reporter version used by gatsby has a small issue where it
prints out undefined [undefined] for every #import ... in *.module.css
files
The printed message is annoying but harmless.

Related

'Undefined Reference' in unit test project

I am using TinyEmbeddedTest and VisualGDB in Visual Studio 2015, and attempting to create a unit test project as part of my solution. My main project builds and runs fine, but the unit test project is getting linker errors and will not build.
The tests are in a source file, ADCTests.cpp, which has
#include “ADC.c”
Which I believe is appropriate for TinyEmbeddedTest.
The file ADC.c contains the following include lines:
#include “ADC.h”
#include “fault.h”
The errors are thrown in ADC.c, on the following statements:
if (status == SUCCESS)
{
Fault_Clear(FAULT_ADC_FAILURE);
rawADCValue = HAL_ADC_GetValue(hADC);
}
else
{
Fault_Set(FAULT_ADC_FAILURE);
rawADCValue = 0u;
}
The errors are:
undefined reference to ‘Fault_Clear’
undefined reference to ‘Fault_Set’
From this I can see that the header file, fault.h, where these functions are declared, is accessible to the toolchain, because otherwise there would be a compilation error, but the source file. fault.c, where these functions are defined, does not seem to be accessible. Both of these files are in the same project.
I do not get these errors when running my main project, only in the unit test project.
I thought that perhaps the answer might lie in the project linker settings, and so I added a line to the Linker->[Additional Inputs] as follows:
C:\Development\myProject\VisualGDB\Debug\Src
I assumed that this would give the linker access to the .o files, created by the compiler. Unfortunately this created a new problem. The build now fails without any error messages. The list of build messages simply says
Build failed: arm-none-eabi-g++.exe exited with code 1 Id returned 1
exit status
and when I look at the log, it says
c:/sysgcc/arm-eabi/bin/../lib/gcc/arm-none-eabi/9.3.1/../../../../arm-none-eabi/bin/ld.exe:
cannot find C:/Development/myProject/VisualGDB/Debug/Src: Permission
denied
Interestingly, that last path is a hyperlink, and when I click on it, I get an error dialog box
Failed to open
‘C:\SysGCC\arm-eabi\Development\myProject\VisualGDB\Debug\Src’
This is especially odd, because I know that path does not exist, and that is definitely not the path that I entered in the Linker settings.
Any guidance would be much appreciated.

How to set eslint to ignore #import from scss files

In React project, I am running linter on js and scss files. In scss files, I have used #import statement but lint gives me following error
Parsing error: Unexpected keyword 'import'
#import './../shared/variables.scss';
I want linter to ignore these #import lines.
Do I need to add any rule in in eslintrc file?
Currently I am having following import rules in config:
'import/no-unresolved': 0,
'import/no-dynamic-require': 0,
'import/no-extraneous-dependencies': 0
Is there any comment line for scss files to ignore specific line, like we have it for js files? e.g. // eslint-disable-next-line
I have gone through a lot of online sources and added babel-eslint parser as well and also passed parserOptions too but nothing is working.
According to https://github.com/eslint/eslint/issues/12752#issuecomment-571561845 :
Looks like the cause is eslint 'src/**' command. You are linting other files than JavaScript.

How to resolve this loader issue in React?

I wanted to use this popup component from GitHub
I installed it using npm (I don't know how to do it otherwise).
I imported it to my App.js
import { Root, Popup } from 'popup-ui'
After importing it, I get this message:
Could not find a declaration file for module 'popup-ui'.
'c:/Repos/Budgeteer/node_modules/popup-ui/index.js' implicitly has an 'any' type.
Try npm install #types/popup-ui if it exists or add a new declaration (.d.ts) file containing `declare module'popup-ui';
`ts(7016)
#types/popup-ui does not exist. I got no idea what declaration means (total noob here). And I looked up ts(7016), and again I couldn't figure out what to do exactly, being a beginner.
When compiling, I get this issue:
C:/Repos/Budgeteer/node_modules/popup-ui/src/basic/Popup/index.js 10:1
Module parse failed: Unexpected token (10:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
the error comes with this piece of code:
| static popupInstance
|
> static show({ ...config }) {"
| this.popupInstance.start(config)
| }
I took a look at the link and read up on loaders, but I got no idea what type of loader I need to install, how to install it or how to edit that webpack file. I can't even seem to find it.
Any help would be deeply appreciated. But please try to make it as detailed as possible, because I'm new to all of this.
Also, I'm using React Native with Expo if that matters.
Cheers.
If webpack is running tsc (the Typescript compiler) and it's complaining about a .d.ts, that's weird. If Webpack is saying "I don't have a loader defined for .d.ts files", that means something is trying to require a .d.ts, which should never happen.
I've had this problem when people have a broad Context defined, either via require.context(/too-many-files.*\.ts/), or require("/some/path/" + fileName). Webpack will try to statically analyze the latter statement, and treat (more or less) as require.context(/\/some\/path\/.*/)
Either way you wind up with it grabbing .d.ts files when it shouldn't. If you can fix the require / require.context so it excludes the typings, do that. If you can't, add a rule like {test: /\.d\.ts$/, use: "null-loader"}

How to fix "ReferenceError: Can't find variable: $jscomp" (phantomjs) or "ReferenceError: $jscomp is not defined" (firefox, chromium)?

After compiling javascript code with closure compiler (v20190729.0.0, previous versions too), I get ReferenceError: Can't find variable: $jscomp.
Is there a solution that does not require to turn polyfills off with the option --rewrite_polyfills=false?
If I follow, it's a bit confusing which compilation_level you are using, based on your comments;
If you're using WHITESPACE_ONLY it might be that you're expecting Closure to do more than its doing (bundling). "The output JavaScript is functionally identical to the source JavaScript." so if you're adding deps.js in dev, and then compiling with closure, you'll still need deps.js.

ionic-angular components.core.scss error

Just starting with Ionic 2. My first app fails with error:
Error: Import directives may not be used within control directives or mixins.
on line 34 of node_modules/ionic-angular/components.core.scss
#import "fonts/ionicons";
Anyone encountered this problem and knows how to solve it? Would be very grateful for your help!
I found a solution for this:
One of the dependencies has updated (one that is related to sass). In order to fix this issue without changing the files under node-modules is to use specific versions for gulp-sass and node-sass. Use the following commands:
npm install gulp-sass#2.2.0
npm install node-sass#3.4.2
In the current beta (v2.0.0-beta.5) combined with Sass Sass 3.4.13 there seems to be a bug with an #import inside an #if. This is not allowed.
Comment out the #if structure in node_modules/iconic_angular/components.core.scss to look like this:
$ionicons: true !default;
// #if ($ionicons) {
#import "fonts/ionicons";
// }
On top of that there seems to be an issue with some declarations in the Sass file for windows. If you don't need Windows for now change the sass include defintion in node_modules/ionic-gulp-sass-build/index.js to read (so removing the include for windows).
...
src: 'app/theme/app.+(ios|md).scss',
...
This bug fixed in ionic "2.0.0-beta.6" version. You can update or check this commit fix saas errors
Go to node_modules/ionic-angular/components.core.scss and set the variable ($ionicons) to false.

Resources