We Keep Coding

A dynamic import() which is available in all CommonJS modules

I got the below error when I'm trying to run npm install. Error Message:
taskRepository: Failed to require task module for setTimestamp: require() of ES Module ......\node_modules\dateformat\lib\dateformat.js from .....\setTimestamp.js not
supported.
Instead change the require of dateformat.js in .....\setTimestamp.js to a dynamic import() which is available in all CommonJS modules.
In setTimestamp.js file, we have
const stringReplacer = require("#ui5/builder").processors.stringReplacer;
const df = require("dateformat");
This is a SAPUI5 based cloud application and we've 2 package.json files.
Under Root folder:
"version": "1.2.0",
"devDependencies": {
"#ui5/builder": "^2.11.5",
"#ui5/cli": "^2.14.10",
"#wdio/cli": "7.23.0",
"#wdio/cucumber-framework": "7.23.0",
"#wdio/junit-reporter": "7.23.0",
"#wdio/local-runner": "7.23.0",
"#wdio/selenium-standalone-service": "7.23.0",
"#wdio/spec-reporter": "7.23.0",
"chai": "^4.3.6",
"chromedriver": "^104.0.0",
"cucumber-html-reporter": "5.5.0",
"nyc": "^15.1.0",
"opa-e2e": "^1.0.11",
"request": "^2.88.2",
"request-promise": "^4.2.6",
"shelljs": "^0.8.5",
"type": "module",
"wdio-chromedriver-service": "^7.3.2",
"wdio-cucumber-reporter": "0.0.2",
"wdio-cucumberjs-json-reporter": "^4.4.3"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"shelljs": ">=0.8.5",
"ejs": ">=3.1.7",
"node-fetch": ">=2.6.7",
"got": ">=11.8.5",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
Inner one:
"ui5": {
"dependencies": [
"ui5-middleware-livereload",
"ui5-middleware-simpleproxy",
"ui5-middleware-servestatic",
"#dwc/ui5-middleware-dwc"
]
},
"devDependencies": {
"#dwc/ui5-middleware-dwc": "^1.4.2-20220817085704",
"#ui5/cli": "^2.14.10",
"dateformat": "^5.0.3",
"env-cmd": "^10.1.0",
"eslint": "^8.22.0",
"karma": "6.4.0",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage": "^2.2.0",
"karma-junit-reporter": "^2.0.1",
"karma-qunit": "^4.1.2",
"karma-sinon": "^1.0.5",
"karma-ui5": "2.4.0",
"nyc": "^15.1.0",
"qunitjs": "^2.4.1",
"rimraf": "^3.0.2",
"shelljs": "^0.8.5",
"start-server-and-test": "^1.14.0",
"ui5-middleware-livereload": "^0.7.0",
"ui5-middleware-servestatic": "^0.4.0",
"ui5-middleware-simpleproxy": "^0.9.1",
"wdio-chromedriver-service": "7.3.2"
},
"resolutions": {
"terser": ">=5.14.2",
"markdown-it": ">=12.3.2",
"marked": ">=4.0.10",
"ua-parser-js": ">=0.7.24",
"log4js": ">=6.4.0",
"karma": ">=6.3.16",
"follow-redirects": ">=1.14.8",
"minimist": ">=1.2.6"
}
I tried to fix this issue by using:
npm i node-fetch#2.6.1
Or, in package.json file , wrote "type": "module" etc.
Ref: Instead change the require of index.js, to a dynamic import() which is available in all CommonJS modules
Could anyone please help me to solve the error? Any help would be much appreciate.
Request: Please don't close the question. I know it's duplicate question, however I couldn't find any solution, tried how much I found.Thank you

I got the same error requiring node-fetch. The solution was
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));

Error to load scss to Vue3 TypeError: this.getOptions is not a function

I try to load scss file to the Vue3 project.
I use:
"#vue/cli": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"sass": "^1.32.13",
"sass-loader": "^11.1.1",
"vue": "^3.0.11",
"vue-resource": "^1.3.4",
"webpack": "5.0.0"
and I have still the sale problem:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/home/dev/src/my-app/node_modules/sass-loader/dist/index.js:25:24)
All is up to date and I have removed my node_modules and reinstaled them. Ihave removed also node-sass so I have only sass package.

I had the same mistake today
"dependencies": {
"core-js": "^3.12.1",
"vue": "^3.0.11",
"vuetify": "^2.5.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-plugin-eslint": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^7.9.0",
"sass": "^1.34.1",
"sass-loader": "^10.1.1",
"vue-loader-v16": "^16.0.0-beta.5.4"
},
change from "sass-loader": "^12.0.0" to "sass-loader": "^10.1.1"
run:
rm -rf node_modules
rm package-lock.json
npm install
for me it solved

How do you prevent expo from using devDependencies?

I have a project where I put a React Context code into a local module and included it using
nom install directory
The package.json itself has the following
"devDependencies": {
"#types/react": "^16.14.2",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"axios": "^0.21.1",
"eslint": "^7.18.0",
"eslint-plugin-prettier": "^3.3.1",
"expo-secure-store": "^10.0.0",
"prettier": "2.2.1",
"react": "^16.13.1",
"react-native": "^0.63.4",
"typedoc": "^0.20.19",
"typedoc-plugin-mermaid": "^1.3.0",
"typescript": "^4.1.3"
},
"peerDependencies": {
"axios": "axios^0.17.0 || axios^0.19.0 || ^0.21.1",
"expo-secure-store": "^9.0.0 || ^10.0.0",
"react-native": "^0.62.0 || ^0.63.0"
},
"dependencies": {},
What happens is if I install the local module, Expo will be building it and at runtime there would be two Reacts.
My workaround for now is to do a npm prune --production on the folder. Is there some sort of setting I am missing so I can avoid having to do the workaround?

RollupJS library React Hook Error useState

I'm bulding a lib that allow to export react components to a nextjs application, at first time it works very well but when I started to check react hooks on that library it trigger a invalid hook error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
In order to solve issues like that on webpack and microbundle, I was using npm link for development, cause this error happen on production build, that was my reference https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
This strategy don't work on rollup stack, I tried to link react and do some configs and nothing is working
that's my rollup.config.js
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'
import { terser } from 'rollup-plugin-terser'
import styles from "rollup-plugin-styles";
const input = 'src/index.js'
const output = 'dist/index'
export default [
{
input: input,
external: ['react', 'react-dom'],
output: {
file: `${output}.modern.js`,
format: 'es',
},
plugins: [
external('./package.json'),
resolve(),
commonjs({
include: ['node_modules/**'],
}),
babel({
exclude: 'node_modules/**'
}),
styles(),
terser()
],
},
]
An that's my package.json
{
"name": "project",
"version": "0.0.17",
"description": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd:main": "dist/index.umd.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c --environment BUILD:production",
"watch": "rollup -c --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"#webpack-cli/init": "^1.0.2",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"microbundle-crl": "^0.13.11",
"mini-css-extract-plugin": "^1.2.1",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-sass": "^1.2.2",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-styles": "^3.11.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.4",
"sass-loader": "^10.0.4",
"source-map-loader": "^1.1.1",
"static-site-generator-webpack-plugin": "^3.4.2",
"style-loader": "^2.0.0"
},
"peerDependencies": {
"react": "17.0.1",
"prop-types": "15.7.2",
"react-dom": "17.0.1"
},
"dependencies": {
"file-loader": "^6.2.0"
}
}
When I change my nextjs application on dev mode removing a test useState component it works, but if I reload the page or load directly with a useState component rendered it will trigger a react hook error :(

I found the reason for my case.
It's necessary peerDependencies setting on the package.json file.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
So you try dependencies to peerDependencies.
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"file-loader": "^6.2.0"
},
Hope this helps. :)

Using es7 functions with Babel

I would like to include es7 functions in my project to start using fetch await asynchronous way in it.
I'm using gulp, browserify and babelify (7.2.0), reading some docs I saw that the way to say babelify to use es7 functions is including this line to the babelify transform:
optional: ['runtime', 'es7.asyncFunctions']
So that my whole gulp task is as follows:
gulp.task('js',function(){
var bundleStream = browserify({
entries:[config.paths.mainJs],
debug: true,
transform: [babelify.configure({
presets:["es2015","react"],
optional: ['runtime', 'es7.asyncFunctions']
})]
}).transform("browserify-shim")
.bundle()
.on('error',console.error.bind(console))
bundleStream
.pipe(source('compiled.js'))
.pipe(buffer())
// .pipe(uglify())
.pipe(rename('compiled.min.js'))
.pipe(gulp.dest(config.paths.dist + '/js'))
});
Unfortunetely I'm getting the following error running the task:
"Unknown option: base.optional while parsing file:"
Googling a bit I saw that babelify 7.x does use babel 6.0 and apparently this parameter optional does not exist anymore in babel 6.0.
I don't want to downgrade my babelify version to make this work but instead I would like to include es7 functions with the version 7 of babelify, does someone know how to do it?
Any help would be very appreciated as there is no much info about it out there
Just in case, please find also my package.json file:
"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
},
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "$"
}

optional: ['runtime', 'es7.asyncFunctions']
was how you configure Babel 5. You are using Babel 6, so it would be
plugins: ['transform-runtime', 'transform-async-to-generator']
One thing to note is that configuring Babel via Babelify is not recommended. Instead, it is better to create an .babelrc file in the root of your application with JSON in it, e.g.
{
presets:["es2015","react"],
plugins: ['transform-runtime', 'transform-async-to-generator']
}
and npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator