We Keep Coding

How to correctly access nested aliases with sass/node-sass in create-react-app

I am trying to break my scss partials into multiple files and aggregate it into one file and access variables accordingly. I have this specific folder structure:
create-react-app/src
│
└───Styles
│ │
│ └───Tokens
│ | │ _Colors.scss
│ | │ _Tokens.scss
│ | _Base.scss
Inside _Colors.scss, I have a simple variable: $primary-color: red;.
// _Colors.scss
$primary-color: red;
Inside _Tokens.scss I use the #use rule to import my partial and give it an alias: #use "./Colors.scss" as colors;.
// _Tokens.scss
#use "./Colors" as colors;
In my _Base.scss I am importing my Tokens.scss and giving that an alias as well: #use "Styles/Tokens/Tokens" as tokens;. I then try to access the nested alias/namespace, eg:
// _Base.scss
#use "Styles/Tokens/Tokens" as tokens;
body {
color: tokens.colors.$primary-color; // Linter has an issue with .colors
}
I am confronted with a linter error: identifier or variable expectedscss(css-idorvarexpected). React also spits out an error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "(".
╷
10 │ color: tokens.colors.$primary-color;
│ ^
Confused on what to do at this point, I've tried for a few hours poking around Google but can't find anything. Help would be appreciated, thank you! Let me know if you need any more information!

Have you tried writing "Tokens" in #use "Styles/Tokens/Tokens" as Tokens; lowercase? Because you have it lowercase in the scss below it, color: tokens.colors.$primary-color;

How can I navigate children in Firebase?

I am using Firebase Realtime Database. I have some keys in the root. And I have keys and children within these keys. I need to listen to the values of a specific child. For example, the structure is like this:
root
├── d775810
│ ├── datas_for_type
│ │ └── timestamp
│ │ └── multiple list datas
│ └── reportFlag
│ └── timestamp
│ └── flagAnnotation:True
└── a413ba21
├── datas_for_type
│ └── timestamp
│ └── multiple list datas
└── reportFlag
└── timestamp
└── flagAnnotation:False
I need to listen to the "flagAnnotation" child. If it is true, I will access the data with the same timestamp and create a PDF. How can I listen to the values of this child?
I tried this:
dbRef.ref().on("child_added", (snapshot) => {
console.log(`Child added: ${snapshot.key}`);
});
This give only d775810,a413ba21.. and if ı add root, ıt will give them.

Firebase Realtime Database reads always return full nodes. This means that you can't listen for just the flagAnnotation properties.
You can listen for the entire JSON branch however, and then navigate the data snapshot you get to just show the flagAnnotation values.
firebase.database().ref().get('value').then((rootSnapshot) => {
rootSnapshot.forEach((childSnapshot) => {
console.log(childSnapshot.val().reportFlag.timestamp.flagAnnotation);
});
})
If the timestamp in your JSON is dynamic, you'll need another forEach to loop over those children, and it'd become:
firebase.database().ref().get('value').then((rootSnapshot) => {
rootSnapshot.forEach((childSnapshot) => {
const reportFlagSnapshot = childSnapshot.child('reportFlag');
reportFlagSnapshot.forEach((timestampSnapshot) => {
console.log(timestampSnapshot.key, timestampSnapshot.val().flagAnnotation);
})
});
})

Rollup & React- How to separate component bundles?

I currently am trying to build a UI Library for React and I am having a little bit of trouble. Currently I am using typescript and rollup, and I am able to bundle a single index.js and I am able to import those components but it is importing the whole library.
Currently:
File structure:
src
--components
-----button
-------button.tsx
-------button.types.ts
-----input
-------input.tsx
-------input.types.ts
-----index.ts
rollup.js
My rollup targets index.ts which has everything exported like so:
export { default as Button} from './button/button'
export { default as Input } from './input/input'
And I am able to import in a react project like so:
import { Button, Input } from 'my-library'
What I would Like to do
I would like that each component is bundled separately and they would be imported like so
import { Input } from 'my-library/input'
import { Button } from 'my-library/button'
What I've Tried:
After reading the docs, it seemed that the preserveModule: true is what I was looking for but then I tried importing as above but it started to complain that nothing was found.
My current rollup.js looks like this:
export default {
input: 'src/index.ts',
output: [
{
exports: 'named',
dir: 'build/',
format: 'esm',
sourcemap: true,
preserveModules: true,
},
],
plugins: [
cleaner({ targets: ['./build'] }),
peerDepsExternal(),
resolve(),
commonjs(),
terser(),
typescript({
exclude: ['**/*.stories.tsx', '**/*.test.tsx'],
}),
],
};

EDIT: I've posted a more comprehensive tutorial on medium here
I tried using preserveModules but it doesnt generate an index.js file for each Components such that I can import like so :
import Button from 'lib/Button'
Hence I came up with a work around to make rollup loop through my src folders to generate a folder with entrypoint for every Component folder i had in src at rootDir
Maintain a strict folder structure with entry point for every Component folder. Do not have loose files, other than index.ts in src folder that have no folders. Name your folders properly like how you want users to import it
src folder structure:
rollup.config.js
src
├── Accordion
│ ├── Accordion.tsx
│ ├── AccordionBody.tsx
│ ├── AccordionButton.tsx
│ ├── AccordionCollapse.tsx
│ ├── AccordionContext.ts
│ ├── AccordionHeader.tsx
│ ├── AccordionItem.tsx
│ ├── AccordionItemContext.ts
│ └── index.ts
├── Alert
│ ├── Alert.tsx
│ └── index.ts
├── Badge
│ ├── Badge.tsx
│ └── index.ts
├── Breadcrumb
│ ├── Breadcrumb.tsx
│ ├── BreadcrumbItem.tsx
│ └── index.ts
├── Button
│ ├── Button.tsx
│ └── index.ts
├── ButtonGroup
│ ├── ButtonGroup.tsx
│ └── index.ts
...
├── Tooltip
│ ├── Tooltip.tsx
│ ├── TooltipBox.tsx
│ └── index.ts
├── index.ts
Its crucial for this case to maintain an entry point for each Component folder. I still maintained an entry point for src folder so that users can still import multiple components from the library with one line
i.e. import {Button, Accordion, ...} from 'lib'
Rollup config
getFolders returns an array of Folder names that are meant for export
loop through getFolders to generate the rollup obj per folder.
For typescript projects, rollup outputs the typings file with preserved folder structure already, so I realised that the folders Accordion, Button etc. were already there with typings file only. Now we need to add the index.js file to it!
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import replace from '#rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
const packageJson = require('./package.json');
import { getFolders } from './scripts/buildUtils';
const plugins = [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({
tsconfig: './tsconfig.json',
useTsconfigDeclarationDir: true,
}),
terser()
]
const getFolders = (entry) => {
// get the names of folders and files of the entry directory
const dirs = fs.readdirSync(entry)
// do not include folders not meant for export and do not process index.ts
const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => name !== 'utils')
// ['Accordion', 'Button'...]
return dirsWithoutIndex
}
//loop through your folders and generate a rollup obj per folder
const folderBuilds = getFolders('./src').map(folder=> {
return {
input: `src/${folder}/index.ts`,
output: {
// ensure file destination is same as where the typings are
file: `dist/${folder}/index.js`,
sourcemap: true,
exports: 'named',
},
plugins,
external: ['react', 'react-dom'],
}
})
export default [
{
input: ['src/index.ts'],
output: [
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
exports: 'named',
},
],
plugins,
external: ['react', 'react-dom'],
},
...folderBuilds,
{
input: ['src/index.ts'],
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
exports: 'named',
},
],
plugins,
external: ['react', 'react-dom'],
},
];
CJS file
finally i also added the rollup config to generate the cjs file. I did not bother to code split the cjs file since most users are using es6 imports
"frank" build
Post build, I run a script to copy paste package.json, Readme to the ./dist folder
/* eslint-disable no-console */
const { resolve, join, basename } = require('path');
const { readFile, writeFile, copy } = require('fs-extra');
const packagePath = process.cwd();
const distPath = join(packagePath, './dist');
const writeJson = (targetPath, obj) =>
writeFile(targetPath, JSON.stringify(obj, null, 2), 'utf8');
async function createPackageFile() {
const packageData = await readFile(
resolve(packagePath, './package.json'),
'utf8'
);
const { scripts, devDependencies, ...packageOthers } =
JSON.parse(packageData);
const newPackageData = {
...packageOthers,
private: false,
typings: './index.d.ts',
main: './main.js',
module: './index.js',
};
const targetPath = resolve(distPath, './package.json');
await writeJson(targetPath, newPackageData);
console.log(`Created package.json in ${targetPath}`);
}
async function includeFileInBuild(file) {
const sourcePath = resolve(packagePath, file);
const targetPath = resolve(distPath, basename(file));
await copy(sourcePath, targetPath);
console.log(`Copied ${sourcePath} to ${targetPath}`);
}
async function run() {
try {
await createPackageFile();
await includeFileInBuild('./README.md');
// await includeFileInBuild('../../LICENSE');
} catch (err) {
console.error(err);
process.exit(1);
}
}
run();
finally from root npm publish ./dist
This is how my dist folder looks like finally
dist
├── Accordion
│ ├── Accordion.d.ts
│ ├── AccordionBody.d.ts
│ ├── AccordionButton.d.ts
│ ├── AccordionCollapse.d.ts
│ ├── AccordionContext.d.ts
│ ├── AccordionHeader.d.ts
│ ├── AccordionItem.d.ts
│ ├── AccordionItemContext.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── Alert
│ ├── Alert.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── Badge
│ ├── Badge.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── Breadcrumb
│ ├── Breadcrumb.d.ts
│ ├── BreadcrumbItem.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── Button
│ ├── Button.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── ButtonGroup
│ ├── ButtonGroup.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
...
├── Tooltip
│ ├── Tooltip.d.ts
│ ├── TooltipBox.d.ts
│ ├── index.d.ts
│ ├── index.js
│ └── index.js.map
├── index.d.ts
├── index.js
├── index.js.map
├── main.js
├── main.js.map
├── package.json
I got my solutions after much research from rollup issue thread on gh.
Here are some references:
Franking the build : https://stackoverflow.com/questions/62518396/importing-from-subfolders-for-a-javascript-package#:~:text=Votes-,13,-This%20is%20possible
folder structuring :
https://github.com/ezolenko/rollup-plugin-typescript2/issues/136#issuecomment-792383946
inspiration for getFolders() that i wrote was from this author's getFiles()
https://www.codefeetime.com/post/rollup-config-for-react-component-library-with-typescript-scss/

Ember Module Unification Stack trace: Error: Assertion Failed: 'data-adapter' is not a recognized type

Ember data won't show on the inspector.The error is showing below.
I am using module unification in new ember. module unification ember
Can someone tell me how to fix it because I need to see data in ember inspector?
The data show an empty data which I see the model but there is nothing(image below):
Ember Inspector has errored.
This is likely a bug in the inspector itself.
You can report bugs at https://github.com/emberjs/ember-inspector.
Error message: Assertion Failed: 'data-adapter' is not a recognized type
Stack trace: Error: Assertion Failed: 'data-adapter' is not a recognized type
at assert (http://localhost:4200/assets/vendor.js:73088:19)
at Resolver._definitiveCollection (http://localhost:4200/assets/vendor.js:73063:31)
at Resolver.identify (http://localhost:4200/assets/vendor.js:73027:37)
at Resolver.resolve (http://localhost:4200/assets/vendor.js:73055:27)
at Class.resolve (http://localhost:4200/assets/vendor.js:98399:36)
at Class.resolve (http://localhost:4200/assets/vendor.js:98232:25)
at Class.superWrapper [as resolve] (http://localhost:4200/assets/vendor.js:41053:22)
at _resolve (http://localhost:4200/assets/vendor.js:12906:36)
at Registry.resolve (http://localhost:4200/assets/vendor.js:12445:21)
at Registry.resolve (http://localhost:4200/assets/vendor.js:12450:60)
warn # VM2062:92
handleError # VM2062:149
(anonymous) # VM2062:3515
_run # backburner.js:1066
run # backburner.js:748
run # index.js:111
wrap # VM2062:3511
messageReceived # VM2062:3482
get.onMessageReceived.message # VM2062:3476
get.forEach.callback # VM2062:127
_messageReceived # VM2062:126
run # VM2062:344
_run # backburner.js:1066
run # backburner.js:748
run # index.js:111
chromePort.addEventListener.event # VM2062:343
file tree:
src
├── data
│ └── models
│ ├── application
│ │ └── model.js
│ └── user
│ ├── adapter.js
│ └── model.js
├── formats.js
├── init
│ └── initializers
│ └── i18n.js
├── main.js
├── resolver.js
├── router.js
├── services
│ └── intl.ts
└── ui
├── components
├── index.html
├── routes
│ ├── about-page
│ │ ├── route.js
│ │ └── template.hbs
│ ├── application
│ │ ├── controller.js
│ │ ├── route.js
│ │ └── template.hbs
│ └── user
│ ├── controller.js
│ ├── route.js
│ └── template.hbs
├── styles
│ └── app.css
└── utils
This is the file structure of the module unification. There is nothing special in the package.json.
After adding those configuration (from #NullVoxPopuli) to the resolver.js
"data-adapter": { definitiveCollection: "main" },
"container-debug-adapter": { definitiveCollection: "main" },
"resolver-for-debugging": { definitiveCollection: "main" }
assign(moduleConfig.collections, {
data: { types: ["data-adapter", "model"], defaultType: "model" }
});

This is def one of the rougher parts of module unification at the moment.
So far, I've been able to get the data tab on the inspector to be loaded with this resolver config:
import Resolver from 'ember-resolver/resolvers/fallback';
import buildResolverConfig from 'ember-resolver/ember-config';
import config from '../config/environment';
let moduleConfig = buildResolverConfig(config.modulePrefix);
moduleConfig.types = Object.assign(moduleConfig.types, {
// ember-inspector support
'data-adapter': { definitiveCollection: 'main' },
'container-debug-adapter': { definitiveCollection: 'main' },
'resolver-for-debugging': { definitiveCollection: 'main' },
});
moduleConfig.collections.main.types.push('data');
moduleConfig.collections = Object.assign(moduleConfig.collections, {
data: {
types: ['data-adapter', 'model'],
defaultType: 'model',
},
});
export default Resolver.extend({
config: moduleConfig,
});
with this config, the models are only picked up if they are named in src/data/models/{model-name}.js -- if a model is at src/data/models/{model-name}/model.js, this does not tell the inspector where to look.

Getting a strange error with grunt: Object Gruntfile.js has no method 'flatten'

I am getting this strange error trying to run grunt: TypeError: Object Gruntfile.js has no method 'flatten'
I am new to node.js, npm, grunt, etc. I thought I did a decent install of node, npm, grunt but may be I missed something. Is there a way to verify the install??
$ cat xx
$ grunt
/home/cl/node_modules/grunt/node_modules/findup-sync/lib/findup-sync.js:33
}).flatten().uniq().value();
^
TypeError: Object Gruntfile.js has no method 'flatten'
at Object.module.exports [as findup] (/home/cl/node_modules/grunt/node_modules/findup-sync/lib/findup-sync.js:33:8)
at Task.task.init (/home/cl/node_modules/grunt/lib/grunt/task.js:414:16)
at Object.grunt.tasks (/home/cl/node_modules/grunt/lib/grunt.js:113:8)
at Object.module.exports [as cli] (/home/cl/node_modules/grunt/lib/grunt/cli.js:38:9)
at Object.<anonymous> (/usr/lib/node_modules/grunt-cli/bin/grunt:41:20)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
The offending line/file:
/*
* findup-sync
* https://github.com/cowboy/node-findup-sync
*
* Copyright (c) 2013 "Cowboy" Ben Alman
* Licensed under the MIT license.
*/
'use strict';
// Nodejs libs.
var path = require('path');
// External libs.
var glob = require('glob');
var _ = require('lodash');
// Search for a filename in the given directory or all parent directories.
module.exports = function(patterns, options) {
// Normalize patterns to an array.
if (!Array.isArray(patterns)) { patterns = [patterns]; }
// Create globOptions so that it can be modified without mutating the
// original object.
var globOptions = Object.create(options || {});
globOptions.maxDepth = 1;
globOptions.cwd = path.resolve(globOptions.cwd || '.');
var files, lastpath;
do {
// Search for files matching patterns.
files = _(patterns).map(function(pattern) {
return glob.sync(pattern, globOptions);
}).flatten().uniq().value(); // <--------- OFFENDING LINE
// Return file if found.
if (files.length > 0) {
return path.resolve(path.join(globOptions.cwd, files[0]));
}
// Go up a directory.
lastpath = globOptions.cwd;
globOptions.cwd = path.resolve(globOptions.cwd, '..');
// If parentpath is the same as basedir, we can't go any higher.
} while (globOptions.cwd !== lastpath);
// No files were found!
return null;
};
Output of ls -l node_modules/:
$ ls -l node_modules/
total 20
drwxrwxr-x. 6 a a 4096 Oct 2 00:42 grunt
drwxrwxr-x. 4 a a 4096 Oct 2 00:42 grunt-contrib-compass
drwxrwxr-x. 6 a a 4096 Oct 2 00:42 grunt-contrib-jshint
drwxrwxr-x. 6 a a 4096 Oct 2 00:42 grunt-contrib-watch
drwxrwxr-x. 4 a a 4096 Oct 2 00:42 grunt-dustjs
Output of npm list:
$ npm list
prepscholar#0.0.0 /home/a/prep/main/web/client
├─┬ grunt#0.4.1
│ ├── async#0.1.22
│ ├── coffee-script#1.3.3
│ ├── colors#0.6.2
│ ├── dateformat#1.0.2-1.2.3
│ ├── eventemitter2#0.4.13
│ ├─┬ findup-sync#0.1.2
│ │ └── lodash#1.0.1
│ ├─┬ glob#3.1.21
│ │ ├── graceful-fs#1.2.3
│ │ └── inherits#1.0.0
│ ├── hooker#0.2.3
│ ├── iconv-lite#0.2.11
│ ├─┬ js-yaml#2.0.5
│ │ ├─┬ argparse#0.1.15
│ │ │ ├── underscore#1.4.4
│ │ │ └── underscore.string#2.3.3
│ │ └── esprima#1.0.4
│ ├── lodash#0.9.2
│ ├─┬ minimatch#0.2.12
│ │ ├── lru-cache#2.3.1
│ │ └── sigmund#1.0.0
│ ├─┬ nopt#1.0.10
│ │ └── abbrev#1.0.4
│ ├─┬ rimraf#2.0.3
│ │ └── graceful-fs#1.1.14
│ ├── underscore.string#2.2.1
│ └── which#1.0.5
├─┬ grunt-contrib-compass#0.5.0
│ ├── async#0.2.9
│ ├── dargs#0.1.0
│ └── tmp#0.0.21
├─┬ grunt-contrib-jshint#0.6.4
│ └─┬ jshint#2.1.10
│ ├─┬ cli#0.4.5
│ │ └─┬ glob#3.2.6
│ │ └── inherits#2.0.1
│ ├── console-browserify#0.1.6
│ ├─┬ minimatch#0.2.12
│ │ ├── lru-cache#2.3.1
│ │ └── sigmund#1.0.0
│ ├── shelljs#0.1.4
│ └── underscore#1.4.4
├─┬ grunt-contrib-watch#0.5.3
│ ├─┬ gaze#0.4.2
│ │ └─┬ globule#0.1.0
│ │ ├─┬ glob#3.1.21
│ │ │ ├── graceful-fs#1.2.3
│ │ │ └── inherits#1.0.0
│ │ ├── lodash#1.0.1
│ │ └─┬ minimatch#0.2.12
│ │ ├── lru-cache#2.3.1
│ │ └── sigmund#1.0.0
│ └─┬ tiny-lr#0.0.4
│ ├── debug#0.7.2
│ ├── faye-websocket#0.4.4
│ ├─┬ noptify#0.0.3
│ │ └─┬ nopt#2.0.0
│ │ └── abbrev#1.0.4
│ └── qs#0.5.6
└─┬ grunt-dustjs#1.1.1
└── dustjs-linkedin#2.0.3
Output of cat package.json:
$ cat package.json
{
"name": "prepscholar",
"version": "0.0.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-dustjs": "~1.1.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-contrib-compass": "~0.5.0"
}
}
Output of cat Gruntfile.js:
$ cat Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
files: ['Gruntfile.js', 'app/js/**/*.js', '!app/js/lib/**/*.js']
},
dustjs: {
compile: {
src: ['app/templates/**/*.html'],
dest: 'app/js/templates.js'
}
},
compass: {
dev: {
options: {
sassDir: 'app/sass',
cssDir: 'app/css',
imagesDir: 'app/img',
fontsDir: 'app/fonts',
javascriptsDir: 'app/js/app',
outputStyle: 'compressed'
}
}
},
watch: {
gruntfile: {
files: 'Gruntfile.js',
tasks: ['compile']
},
css: {
files: 'app/sass/**/*.scss',
tasks: ['compass:dev']
},
livereload: {
options: { livereload: true },
files: ['app/css/**/*']
},
dust: {
files: 'app/templates/**/*.html',
tasks: ['dustjs']
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-dustjs');
grunt.loadNpmTasks('underscore');
grunt.registerTask('default', ['compile', 'watch']);
grunt.registerTask('compile', ['dust', 'compass']);
grunt.registerTask('dust', ['dustjs']);
grunt.registerTask('lint', ['jshint']);
};

Found that this worked, as per https://github.com/gruntjs/grunt/issues/888
rm -rf node_modules/grunt
npm install grunt
This should work too.

Try reinstalling your node modules.
Delete the node_modules folder
Do npm cache clean
Do npm install
Hope it helps :)

As was written in https://github.com/gruntjs/grunt/issues/888 dist in your .gitignore
Hope that helps

That looks like one of your grunt modules is trying to use underscore.js but it's not installed. This should fix your problem:
npm install underscore
Or even better, add underscore as a development dependency in your package.json:
{
<your existing stuff here>
"devDependencies": {
"underscore": "~1.5.2"
}
}