Develop Reference

Error in package.json using NextJS with Jest

I stumbled upon the problem such as "Can't resolve main package.json file" using NextJS with Jest. I've tried using jest.config.js with Babel and it works, but 'next/jest' variant is not working. Appreciate your help :)
::::: jest.config.js :::::
const nextJest = require('next/jest')
const { pathsToModuleNameMapper } = require('ts-jest')
const { compilerOptions } = require('./tsconfig.json')
const createJestConfig = nextJest({
dir: '/'
})
const customJestConfig = {
moduleDirectories: ["node_modules", "<rootDir>/", "<rootDir>/src"],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
testEnvironment: "jest-environment-jsdom"
}
module.exports = createJestConfig(customJestConfig)
::::: package.json :::::
{
// omitted unnecessary
"scripts": {
"test": "jest --watch",
},
"dependencies": {
"next": "^13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.4"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#types/jest": "^29.2.6",
"#types/react-redux": "^7.1.25",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.4.2",
"ts-jest": "^29.0.5"
}
}
::::: tsconfig.json :::::
{
"compilerOptions": {
"target": "esNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"##/*": ["./*"],
"#fb/*": ["./firebase/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/components/Header/__tests__/header.test.tsx", "jest.config.js"],
"exclude": ["node_modules"]
}
Error message: error log
It works with this jest.config.js configuration
module.exports = {
collectCoverage: true,
coverageProvider: 'v8',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',
],
moduleNameMapper: {
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
'^#/(.*)$': '<rootDir>/src/$1',
'^#/components/(.*)$': '<rootDir>/components/$1',
},
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
},
transformIgnorePatterns: [
'/node_modules/',
'^.+\\.module\\.(css|sass|scss)$',
],
}

Can't resolve 'fs' in Vue.js#3, Winston#3 and webpack#5

would like to use Winston#3 package in our project. But I can't resolve problem with requered 'fs' package.
I always get this error:
Compiled with problems:
ERROR in ./node_modules/winston/dist/winston/tail-file.js 12:9-22
Module not found: Error: Can't resolve 'fs' in '/app/node_modules/winston/dist/winston'
ERROR in ./node_modules/winston/dist/winston/transports/file.js 136:9-22
Module not found: Error: Can't resolve 'fs' in '/app/node_modules/winston/dist/winston/transports'
(Error screenshot)
I tried everything I found. Just like define browser restriction in package.json:
{
...
"browser": {
"fs": false,
"path": false,
"os": false
},
"devDependencies": {
"#testing-library/vue": "^6.5.1",
"#types/applepayjs": "^3.0.4",
"#types/googlepay": "^0.6.4",
"#types/jest": "^27.5.2",
"#types/vue-i18n": "^7.0.0",
"#typescript-eslint/eslint-plugin": "^5.45.0",
"#typescript-eslint/parser": "^5.45.0",
"#vue/cli": "^5.0.4",
"#vue/cli-plugin-babel": "^5.0.4",
"#vue/cli-plugin-e2e-cypress": "^5.0.4",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-router": "^5.0.4",
"#vue/cli-plugin-typescript": "^5.0.4",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/cli-plugin-vuex": "^5.0.4",
"#vue/cli-service": "^5.0.4",
"#vue/compiler-sfc": "^3.2.31",
"#vue/eslint-config-typescript": "^11.0.2",
"#vue/test-utils": "^2.2.4",
"#vue/vue3-jest": "^27.0.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.5.1",
"cypress": "^11.2.0",
"eclint": "^2.8.1",
"eslint": "^8.28.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-vue": "^9.8.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.5.1",
"jest-runner-groups": "^2.2.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"lint-staged": "^13.0.4",
"ts-jest": "^27.1.5",
"tsconfig-paths": "^4.1.1",
"tslib": "^2.3.1",
"typescript": "^4.9.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript",
"plugin:cypress/recommended"
],
"parserOptions": {
"parser": "#typescript-eslint/parser",
"ecmaVersion": 2021
},
"rules": {
"no-unused-vars": "off"
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.test.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 0.1%",
"last 10 years",
"not dead",
"not ie 11"
],
...
}
Configure fs: 'empty' in webpack.config.js:
module.exports = {
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
fallback: {
util: require.resolve("util/"),
"fs": false
},
alias: {
fs: 'empty'
}
},
module: {
node: {
fs: 'empty'
}
},
};
and also configure fs: 'empty' in vue.config.js where i also configure the webpack:
module.exports = {
...
configureWebpack: {
plugins: [new NodePolyfillPlugin()],
resolve: {
alias: {
fs: 'empty'
}
}
},
chainWebpack: (config) => {
// config.node = {
// 'fs': 'empty'
// };
// config.node = {
// fs: 'empty'
// }
},
...
}
I also use TypeScript but I think that one is not causing this problem...
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"allowJs": true,
"sourceMap": false,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"#/tests/*": [
"./tests/*",
],
"#/*": [
"./src/*",
"./*"
],
"tslib" : ["bower_components/tslib/tslib.d.ts"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"./src/*.ts",
"./src/**/*.ts",
],
"exclude": [
"node_modules",
"dist",
"**/*.spec.ts",
"./tests/e2e.api.ts"
]
}
I have no idea how to fix this. I found a lot of instructions in the internet how to solve it but no one works for me. :(
Is here anyone who knows and can helps me?
Thank you!

How to get CSS modules to work with TypeScript and Rollup?

I am trying to create a shared UI kit amongst multiple websites, and so creating a TypeScript library (for the first time in a while). I have this in my tsconfig.json:
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "."
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"],
"ts-node": {
"compilerOptions": {
"module": "commonjs"
}
}
}
And I have this in my rollup.config.js:
import pkg from './package.json'
import dts from 'rollup-plugin-dts'
import esbuild from 'rollup-plugin-esbuild'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
const name = pkg.main.replace(/\.js$/, '')
export default [
{
preserveModules: true,
input: 'src/index.ts',
plugins: [
peerDepsExternal(),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: false,
modules: true,
}),
esbuild({
include: /\.[jt]sx?$/,
exclude: /node_modules/,
sourceMap: true,
target: 'es6',
jsx: 'transform',
jsxFactory: 'React.createElement',
jsxFragment: 'React.Fragment',
}),
],
output: [
{
dir: 'dist',
exports: 'default',
format: 'cjs',
sourcemap: true,
},
],
external: ['react', 'react-dom'],
},
{
input: 'src/index.ts',
plugins: [dts()],
output: {
file: `${name}.d.ts`,
format: 'es',
},
},
]
And I have this in my package.json:
{
"name": "#myorg/mylib.js",
"version": "0.0.1",
"devDependencies": {
"autoprefixer": "^10.4.11",
"esbuild": "^0.15.7",
"postcss": "^8.4.16",
"rollup": "^2.79.0",
"rollup-plugin-dts": "^4.2.2",
"rollup-plugin-esbuild": "^4.10.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"typescript": "^4.8.3"
},
"main": "dist/index.js",
"license": "MIT",
"scripts": {
"build": "yarn rollup -c"
},
"peerDependencies": {
"classnames": "^2.3.2",
"next": "^12.3.0",
"react": "^18.2.0"
},
"dependencies": {
"#types/react": "^18.0.20",
"classnames": "^2.3.2"
}
}
And then I am trying to load this src/index.ts:
import Button from './components/Button'
export default {
Button,
}
Which references these two:
import React from 'react'
import styles from './index.module.css'
export default function Button() {
return <button className={styles.button}>hello</button>
}
And index.module.css is:
.button {
background: red;
}
However, I am getting this error on yarn build:
yarn run v1.22.17
$ yarn rollup -c
$ /my/project/node_modules/.bin/rollup -c
src/index.ts → dist...
created dist in 190ms
src/index.ts → dist/index.d.ts...
src/components/Button/index.tsx(4,20): error TS2307: Cannot find module './index.module.css' or its corresponding type declarations.
[!] (plugin dts) Error: Failed to compile. Check the logs above.
src/components/Button/index.tsx
Error: Failed to compile. Check the logs above.
at error (/my/project/node_modules/rollup/dist/shared/rollup.js:198:30)
at throwPluginError (/my/project/node_modules/rollup/dist/shared/rollup.js:21919:12)
at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22641:20)
at Object.error (/my/project/node_modules/rollup/dist/shared/rollup.js:22096:42)
at Object.transform (/my/project/node_modules/rollup-plugin-dts/dist/rollup-plugin-dts.cjs:1618:26)
at /my/project/node_modules/rollup/dist/shared/rollup.js:22848:40
Any ideas how to get the CSS modules compiling with Rollup?

In my case, the issue with the #import was solved by removing the extension.
Instead of:
#import 'some.css'
use this:
#import 'react-toastify/dist/ReactToastify'

Cannot use import statement outside a module using typescript on backend

Currently using TypeScript on a Node backend, but I keep getting the following error when I attempt to import my mongoDB model:
(node:47933) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
import Users from './models/Login';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
My package.json currently looks like this:
{
"name": "backend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"bcrypt": "^5.0.0",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"mongoose": "^5.11.8",
"node-ts": "^5.1.1",
"passport": "^0.4.1",
"passport-facebook": "^3.0.0",
"passport-local": "^1.0.0"
},
"scripts": {
"server": "nodemon server.ts"
},
"devDependencies": {
"#types/bcrypt": "^3.0.0",
"#types/express": "^4.17.9",
"#types/mongoose": "^5.10.3",
"#types/node": "^14.14.14",
"#types/passport": "^1.0.4",
"dotenv": "^8.2.0",
"nodemon": "^2.0.6",
"ts-node": "^9.1.1"
}
}
and the tsconfig file looks like this:
{
"compilerOptions": {
/* Basic Options */
"module": "esnext",
"target": "ES2018",
"outDir": "./dist",
/* Strict Type-Checking Options */
"strict": true,
"esModuleInterop": true,
/* Source Map Options */
"inlineSourceMap": true,
"noImplicitAny": false
},
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
}
As of now I've tried:
Adding "type":"module" to my package.json folder
Changing my "module" to esnext/commonjs and/or changing my target to esnext/es6/es2020

In your package.json add :
"type": "module"
just below "main": "index.js",

try adding typescript as dev dependency
npm install typescript --save-dev
also change module property to commonjs in tsconfig.json

angular library - importing #clr/angular causes a Unexpected value 'undefined' error

I want to build an angular library project with some custom components on VMware's clarity framework.
running ng build --prod draft should produce a library output.
Instead, I'm getting:
BUILD ERROR : Unexpected value 'undefined' exported by the module
'ClrFormsNextModule in
draft/node_modules/#clr/angular/clr-angular.d.ts'
Error: : Unexpected value 'undefined' exported by the module
'ClrFormsNextModule in
draft/node_modules/#clr/angular/clr-angular.d.ts'
at Object.<anonymous> (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
at Generator.next (<anonymous>)
at draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
at new Promise (<anonymous>)
at __awaiter (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
at Object.compileSourceFiles (draft/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
at Object.<anonymous> (draft/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
at Generator.next (<anonymous>)
at draft/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
at new Promise (<anonymous>)
Here is the package.json file of the library project
{
"name": "draft",
"version": "0.0.1",
"peerDependencies": {
"#angular/common": "^6.0.0-rc.0 || ^6.0.0",
"#angular/core": "^6.0.0-rc.0 || ^6.0.0",
"#clr/angular": "^0.12.0",
"#clr/icons": "^0.12.0",
"#clr/ui": "^0.12.0",
"moment": "^2.22.2",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.2.2",
"#webcomponents/custom-elements": "^1.2.0",
"lodash": "^4.17.10",
"object-fit-images": "^3.2.3"
}
}
Inside root/projects/draft/tsconfig.lib.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2015",
"es2017.object"
],
"paths": {
"#angular/*": [
"../node_modules/#angular/*"
],
"#clr/*":[
"../node_modules/#clr/*"
]
}
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"flatModuleId": "AUTOGENERATED",
"flatModuleOutFile": "AUTOGENERATED"
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
Inside root/projects/draft/src/draft.module
import { ClarityModule } from '#clr/angular';
Environment details
Angular version: 6.0.3
Clarity version: 0.12.0
OS and version: macOS 10.13.6
Browser: Chrome 68

Version 0.12.3 has a bug in it related to AoT, so if you haven't updated to latest you will see a similar undefined error when trying to build. This is a duplicate of Uncaught TypeError: Cannot read property 'chocolate' of undefined which is the same problem.