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

husky pre-commit hook not working after adding it to package.json

I am working on a project and I want that every time I try to commit a new change, my tests are run and based on that it is decided whether the commit would happen. For this to happen I researched and found I can use husky's pre-commit hook.
I first installed husky in my project with
npm i husky --save-dev
which installed "husky": "^6.0.0" in my package.json.
Then I followed the tutorial and added the following object in package.json
"husky": {
"hooks": {
"applypatch-msg": "echo \"[Husky] applypatch-msg\"",
"pre-applypatch": "echo \"[Husky] pre-applypatch\"",
"post-applypatch": "echo \"[Husky] post-applypatch\"",
"pre-commit": "echo \"[Husky] pre-commit\""
}
}
As you can see, running git commit -m "some message!" should echo bunch of stuff which would mean that husky's pre-commit hook is working but instead nothing of the sort gets echoed. Now I have just no clue why is that not working. If it had worked I would have went on to add script in pre-commit hook to run my tests.
Here is the package.json file by the way:
{
"name": "test app",
"version": "1.0.1",
"description": "test app",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": nodemon index.js",
"test": "find ./plugins -name '*test.js' | xargs mocha -R spec"
},
"dependencies": {
"#hapi/boom": "^9.0.0",
"#hapi/glue": "^7.0.0",
"#hapi/good": "^9.0.0",
"#hapi/good-console": "^9.0.0",
"#hapi/good-squeeze": "^6.0.0",
"#hapi/hapi": "^19.1.1",
"#hapi/joi": "^17.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"base-64": "0.1.0",
"confit": "2.3.0",
"hapi-auth-jwt2": "^8.8.1",
"hapi-mongodb": "^9.0.0",
"jws": "4.0.0",
"mongodb": "^3.5.7",
"pad-left": "2.1.0",
"pino": "^5.16.0",
"query-string": "^6.13.1",
"redis": "^2.8.0",
"selectn": "^1.1.2",
"superagent": "3.8.2",
"utf8": "^3.0.0",
"uuid": "^3.4.0",
},
"devDependencies": {
"chai": "^4.1.2",
"chai-datetime": "^1.6.0",
"chai-http": "^4.0.0",
"husky": "^6.0.0",
"mocha": "^5.1.1",
"nodemon": "^2.0.4",
"proxyquire": "^2.0.1",
"sinon": "^5.0.10",
"sinon-test": "^2.2.0"
},
"husky": {
"hooks": {
"applypatch-msg": "echo \"[Husky] applypatch-msg\"",
"pre-applypatch": "echo \"[Husky] pre-applypatch\"",
"post-applypatch": "echo \"[Husky] post-applypatch\"",
"pre-commit": "echo \"[Husky] pre-commit\""
}
}
}

This is a bit old but maybe my solution will help someone.
It didn't work for me either to use this technique. The cleanest I found is
add script to package json:
"prepare": ""chmod ug+x ./installHooks.sh && ./installHooks.sh""
with installHooks.sh containing:
#!/bin/zsh
FILE=.husky
if test -d "$FILE"; then
echo "$FILE folder already exists, deleting it before new husky installation";
rm -rf "./$FILE"
# else echo "$FILE doesn't exist yet";
fi
cd ../ && husky install ./sub-project/.husky
cd sub-project && npx husky add .husky/pre-commit 'cd sub-project && npm test'
chmod ug+x ./.husky/*
echo "hooks correctly installed. you may find them in `.husky/pre-commit`"
echo "they will be triggered each time you commit"
Explanation:
The prepare script will be ran automatically when running npm install or can be ran with npm run prepare
It will change the mode of installHooks.sh to executable then run it.
installHooks will check if the .husky folder already exists, delete it if it's the case, then install husky (note that going up one folder then down in sub-project is because my git repo contains several sub projects and I want to install this in the front-end one, here called sub-project. husky requires that you install it from the root so this is a workaround). Then adding pre-commit hook (npm test) Finally make husky hooks executable with chmod
Let me know if you have questions. I'm just starting writing scripts so this might not be the optimal way of doing this but it works

module does not exist in the haste module map

I'm new here, I hope I enter all the information needed.
When trying to do some webscraping in my app, I got errors
module...does not exist in the haste module map" with 'events' and 'stream'.
I researched my issue, and tried the directions at: https://github.com/facebook/react-native/issues/4968 except for the watchman step, since I am on Windows.
Unfortunately, the same error keeps popping up, just with different modules. This time its babel that's complaining.
What should I do?
I also tried making a new react-native-init project and just git cloning my src code. Still get a similar error.
{
"name": "Work",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"cheerio": "^1.0.0-rc.2",
"events": "^3.0.0",
"firebase": "^5.0.3",
"htmlparser2": "^3.9.2",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-calendars": "^1.21.0",
"react-native-communications": "^2.2.1",
"react-native-fs": "^2.11.17",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-vector-icons": "^5.0.0",
"react-navigation": "^2.13.0",
"react-twitter-embedded-timeline": "^0.5.0",
"react-twitter-widgets": "^1.7.1"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Copied from node cmd screen.

I faced the same issue with my react-native app.
resetting the node cache solved the issue for me :
npm start -- --reset-cache
I hope it helps

npm start runs listing directory in browser, not index.js

I setup tooling for a webpack/babel development server. When I run "npm start" from the command line, it displays the directory in my browser, not index.js. I'm just learning this; it's my first time creating a starter pack like this. My package.json file is below:
{
"name": "me_app",
"version": "1.0.0",
"description": "ME React-Redux Pump Builder",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "Daniel Crain",
"license": "ISC",
"directories": {
"lib": "lib"
},
"dependencies": {
"npm": "^6.4.1"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bluevision/React-Redux-Product- Configurator.git"
},
"bugs": {
"url": "https://github.com/bluevision/React-Redux-Product-
Configurator/issues"
},
"homepage": "https://github.com/bluevision/React-Redux-Product-
Configurator#readme"
}

If you list the files and directory structure of your project, would help to understand the exact problem, but as far as I know When you run npm start it will run your start command in your script object in package.json :
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev server.js",
And here the script is expecting to listen to a file named server.js not index.js
So Try to rename the file name or edit the name in your package.json.

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.