We Keep Coding

Nextjs inline styles not working when running build

I am working on a nextjs project where I get my styles as inline style tags under head element, but same is not working when i run build and start the server. The inline styles are now bundled in a styles.css file and is requested as a separate network call that I want to avoid.
Any clue why this could be happening:
Here is my package.json:
{
"name": "abc",
"description": "xyz",
"version": "0.1.0",
"scripts": {
"dev": "cross-env PORTALCD=xyz ENV=dev next dev",
"build:qa": "cross-env PORTALCD=xyz ENV=qa next build",
"build:reg": "cross-env PORTALCD=xyz ENV=reg next build",
"build:stg": "cross-env PORTALCD=xyz ENV=stg next build",
"build": "cross-env PORTALCD=xyz ENV=prod next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#license-admin/sem-utilities": "1.21.0",
"memory-cache": "^0.2.0",
"next": "12.0.7",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"swr": "^0.5.6"
},
"devDependencies": {
"critters": "^0.0.16",
"cross-env": "^7.0.2",
"eslint": "7.32.0",
"eslint-config-next": "11.0.1",
"sass": "1.38.2",
"postcss": "^8.3.6",
}
}
I also tried the experimental flag mention in this tweet, but did not work as expected.
Add experimental: { optimizeCss: true } to next.config.js
Install critters#0.0.7 as a dependency
https://twitter.com/hdjirdeh/status/1369709676271726599/photo/1

Program that works on Codepen.io couldn't run on Visual studio code

I completed a mini connect-4 game based on the Tic-tac-toe tutorial on Reactjs official website
Code:https://codepen.io/bunansia/pen/KKXXKje?editors=1010
I copied the html,css plus JS file and tried to run on VCS but failed
I have installed node.js, #babel/cli #babel/core #babel/preset-env #babel/preset-react have been installed, and this is how my package.json file looks like
{
"name": "react-connect4",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.16.0",
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5"
},
"devDependencies": {
"#babel/plugin-transform-react-jsx": "^7.16.5"
},
"description": "",
"plugins": [
[
"#babel/plugin-transform-react-jsx",
{
"throwIfNamespace": false, // defaults to true
"runtime": "automatic", // defaults to classic
"importSource": "custom-jsx-library" // defaults to react
}
]
]
}
I have also created .babelrc file instructing where to find the preset
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
Have tried multiple ways like converting original JS file to babel version
"scripts": {
"build": "babel src/index.js --out-file public/scripts/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
And I put them in the folder named "public", while js && css files are in the folder named "script"
But when I run it on live-server everything is blank
What can be the configuration issues?
I have added 2 lines in html file since I am using these two external scripts also
<script src="https://unpkg.com/react-dom#17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react#17.0.2/umd/react.development.js"></script>

Trouble importing custom library from a repository into an Ember project as a dependency

I am developing a WebGL library that I would like to import into an EmberJS project as a dependency. Unless I'm mistaken, I believe that I can do this via the repository directly without having to make an npm package but I am having trouble getting it to work.
I have made a watered down library and ember project in a couple repos here and here respectively to demonstrate my problem.
If you clone the library and run npm run build it'll make a test bundle which can be called by the test html file packageTest.html. It should print out 'Hello World Test Member is: 5'.
In the Ember project I have a component in which I would like to import the 'HelloWorld' class from the library and call one of its member methods.
import Ember from 'ember';
//import HelloWorld from 'npm-package-test';
export default Ember.Component.extend({
isWide: false,
actions: {
toggleImageSize() {
// var h = new HelloWorld();
// console.log(h.print());
this.toggleProperty('isWide');
}
}
});
When I uncomment the import statement I get the console error
Error: Could not find module 'npm-package-test'
I'm still pretty new to npm packaging and how dependencies work (and know next to nothing about Ember) but from my limited understanding I feel like this method should work the way I currently have it.
For the library, I have the source files being babeled into ES5 in its lib folder. As you can see in the package.json for the library below I have the main set to the index file in the lib folder so that the Ember project can pull the babeled modules.
Library: package.json
{
"name": "npm-package-test",
"version": "1.0.0",
"description": "JibJab Render Library for eCards",
"main": "lib/index.js",
"scripts": {
"prepublishOnly": "npm run build",
"build-test": "browserify test.js > demo/testbundle.js",
"build": "babel ./src -d ./lib && npm run build-test",
"lint": "eslint ./src",
"test": "nyc mocha --require babel-core/register"
},
"repository": {
"type": "git",
"url": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
},
"author": "JibJab",
"license": "ISC",
"bugs": {
"url": "https://github.com/nhoughto5/NPM_PackageTest/issues"
},
"homepage": "https://github.com/nhoughto5/NPM_PackageTeste#readme",
"devDependencies": {
"babel-cli": "6.26.0",
"babel-preset-env": "1.6.1",
"eslint": "4.19.0",
"mocha": "5.0.4",
"nyc": "11.6.0"
},
"nyc": {
"reporter": [
"lcov",
"text"
]
},
"dependencies": {
"domready": "^1.0.8"
}
}
For reference, here is the lib/index.js which should be the entry point of my library:
Library: lib/index.js
'use strict';
module.exports = {
TestClass: require('./TestClass'),
HelloWorld: require('./HelloWorld')
};
In the ember project I have the library repository listed as a dependency:
Ember: package.json
{
"name": "test-ember-app",
"version": "0.0.0",
"description": "Small description for test-ember-app goes here",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"repository": "",
"scripts": {
"build": "ember build",
"start": "ember server",
"test": "ember test"
},
"devDependencies": {
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-browserify": "1.2.1",
"ember-cli": "2.13.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.0.0",
"ember-cli-dependency-checker": "^1.3.0",
"ember-cli-eslint": "^3.0.0",
"ember-cli-htmlbars": "^1.1.1",
"ember-cli-htmlbars-inline-precompile": "^0.4.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-mirage": "0.4.3",
"ember-cli-qunit": "^4.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-tutorial-style": "2.0.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.13.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.0.0",
"ember-resolver": "^4.0.0",
"ember-source": "~2.13.0",
"ember-welcome-page": "^3.0.0",
"loader.js": "^4.2.3"
},
"engines": {
"node": ">= 4"
},
"private": true,
"dependencies": {
"npm-package-test": "git+https://github.com/nhoughto5/NPM_PackageTest.git"
}
}
When I run npm install in the ember project I can see that the folder structure from the library appears in the node_modules folder. To my limited experience, everything seems correct but for some reason I am still getting this undefined module error.
Is there a step I've missed or some crucial detail I'm missing?

Yes, there’s one step you are still missing. For Ember-CLI to understand that you want to include your npm package in your app’s vendor files, you’ll need to use app.import as outlined here: https://guides.emberjs.com/v3.0.0/addons-and-dependencies/managing-dependencies/
That approach with app.import has existed since Ember-CLI 2.15, but if you are on an older version you’ll need to upgrade first.

Missing basic DOM types in TypeScript project

I am setting a web app up in TypeScript and I seem to be missing some basic types I need.
When I compile (npm run build), I get the following errors,
error TS2304: Cannot find name 'HTMLElement'.
error TS2304: Cannot find name 'SVGElement'.
error TS2304: Cannot find name 'EventTarget'.
error TS2304: Cannot find name 'TouchEvent'.
error TS2304: Cannot find name 'MouseEvent'.
error TS2304: Cannot find name 'PointerEvent'.
Based on my Googling I assuming I am missing something basic in my project setup. It seems like these types are just assumed to be there with Typescript.
EDIT: Specially it should be part of the ES6 types, https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es6.d.ts.
Here is my package.json file:
{
"name": "wip",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"hammerjs": "2.0.8"
},
"devDependencies": {
"#types/chai": "3.4.35",
"#types/mocha": "2.2.39",
"#types/node": "7.0.5",
"#types/hammerjs": "2.0.34",
"chai": "3.5.0",
"mocha": "3.2.0",
"safe-mock": "0.2.0",
"ts-node": "2.1.0",
"tslint": "4.5.1",
"typescript": "2.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"scripts": {
"test": "mocha test --require ts-node/register test/**/*.ts && npm run build",
"dev": "webpack-dev-server --watch --content-base . -d --progress",
"build": "tsc"
},
"author": "",
"license": "ISC"
}
Any suggestions?

Try adding the following lib section to your tsconfig.json file.
{
"compilerOptions": {
"lib": [
"es2016",
"dom"
]
}
}

Additional answer for testing.
If using mocha, you also need to tell mocha about the DOM environment using jsdom.
https://journal.artfuldev.com/unit-testing-node-applications-with-typescript-using-mocha-and-chai-384ef05f32b2
$ npm install jsdom jsdom-global --save-dev
So your "test" script would add -r jsdom-global/register:
{
"scripts": {
"test": "mocha test -r ts-node/register -r jsdom-global/register test/**/*.ts && npm run build"
}
}

Grunt not using right JSON file

I am trying with Grunt to read environment specific JSON file. But it is always reading from the default.json file. Am I missing something?
Here is my code snippet for Gruntfile.js
var config = require('config');
var host = config.get('host');
console.log(host);
Here is my package.json
{
"name": "grunt",
"version": "1.0.0",
"description": "Test app",
"main": "grunt.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Me,
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"load-grunt-config": "^0.17.2",
"load-grunt-tasks": "^3.2.0"
}
}
I have
host=localhost in default.json and
host=someURL in production.json
Commands I am running in command line
$ set NODE_ENV="production"
$ grunt
localhost
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.

I made it work. I was using SET instead of export for setting NODE_ENV.
$ export NODE_ENV=production