We Keep Coding

Module not found error even when overriding webpack config

When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```

Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel

I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files

Cannot use statement outside a module and Must use import to load ES Module

I'm trying to build a .exe file of my VueJS project.
For that, I want to use Electron and electron-packager.
I'm facing some issues when launching the .exe app created with the command : electron-packager . --all. The first one was:
I found on the internet that I had to add "type":"module" and "module":"es2015" in my package.json file. I added it and then I have another problem which is:
I really don't know what to do with this.
Here is my package.json file:
{
"name": "hihihihi",
"version": "0.1.0",
"type":"module",
"module":"es2015",
"description": "hihihihi",
"author": "Hihihi Hihihi <hihi.hihi#hihi.com>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "src/background.js",
"dependencies": {
"#mdi/js": "^5.9.55",
"core-js": "^3.6.5",
"nedb": "^1.8.0",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vuetify": "^2.5.2",
"vuex": "^3.6.2"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^1.5.2",
"electron": "^13.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.34.0",
"sass-loader": "^10.2.0",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

Disable linter only in development mode not when try to commit changes

I have this code which is obviously failing by the linter
console.log('asd', {asd:'asd'});
Line 76:23: Replace `asd:'asd'` with `·asd:·'asd'·` prettier/prettier
and the thing is that this error is happening when I ran yarn start on every change. I know how to solve this lint error but I want the linter to work only when changes are tried to being commited which this is already working with Husky, not when I run yarn start and making development/debug/code review changes.
This is my package.json
{
"name": "#advisorycloud/golden-gate-web-users",
"version": "0.1.0",
"private": true,
"dependencies": {
"#advisorycloud/react-ui-components": "1.1.37",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.2",
"aws-amplify": "^3.3.11",
"formik": "^2.1.7",
"formik-material-ui": "^3.0.0",
"i18next": "^19.6.3",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.0.21",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.7.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"webfontloader": "^1.6.28",
"yup": "^0.29.3"
},
"scripts": {
"start": "yarn translate && react-scripts start",
"build": "yarn translate && react-scripts build",
"test-menu": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit --watchAll=false --env jest-environment-jsdom-fourteen",
"tdd": "react-scripts test --env jsdom-fourteen",
"eject": "react-scripts eject",
"eslint": "eslint ./src",
"cy": "cypress open",
"cy:run": "cypress run",
"cy:noapp:tests": "start-server-and-test start http://localhost:3000 cy:run && yarn test",
"cy:merge": "junit-merge --dir ./__cytests__ --out ./__cymerge__/cypressresults.xml",
"tests:merge:allreports": "junit-merge --out ./__finalreport__/finalreport.xml ./__jest-junit-reports__/junit.xml ./__cymerge__/cypressresults.xml",
"clear:reports": "rm -r ./__cymerge__/* && rm -r ./__cytests__/* && rm -r ./__finalreport__/* && rm -r ./__jest-junit-reports__/* || true ",
"full:test": "yarn clear:reports && yarn cy:noapp:tests && yarn cy:merge && yarn tests:merge:allreports",
"translate": "npx translate --source ."
},
"eslintConfig": {
"extends": "react-app"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": "./__jest-junit-reports__",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{title}",
"titleTemplate": "{classname}-{title}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "true"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#advisorycloud/translation": "^1.1.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^10.4.9",
"#testing-library/user-event": "^12.1.3",
"cypress": "^5.2.0",
"eslint": "^7.13.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": ">=4",
"jest-junit": "^11.1.0",
"junit-merge": "^2.0.0",
"lint-staged": ">=10",
"prettier": "^2.0.5",
"react-scripts": "^3.4.3",
"start-server-and-test": "^1.11.4"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && yarn test"
}
},
"lint-staged": {
"*.js": "eslint --cache",
"*.jsx": "eslint --cache"
}
}
and this is my linter configuration
{
"env": {
"browser": true,
"es2020": true,
"commonjs": true,
"node": true,
"jest": true
},
"extends": ["airbnb", "prettier", "plugin:cypress/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react", "jsx-a11y", "import", "prettier", "jest", "cypress"],
"rules": {
"prettier/prettier": ["error"],
"linebreak-style": ["error", "unix"],
"react/jsx-filename-extension": [
2,
{
"extensions": ["index.js", ".jsx"]
}
],
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0,
"import/prefer-default-export": 0,
"jest/no-disabled-tests": 0,
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.js",
"**/*.test.jsx",
"**/*.spec.js",
"**/*.spec.jsx",
"**/setupTests.js"
]
}
],
"cypress/no-unnecessary-waiting": 0
}
}
Sorry for my english and anticipated thanks

vue-cli-service serve and buid generating different styles

I'm not sure how to show it but for some reason after vue-cli-service build and vue-cli-service serve page looks different. In the case of build all is fine but in the case of serve styles are messed, but there are no errors while building and no error in the browser console. I can share the package.json if it can help and some other configuration files I have...
package.json
{
"name": "newlanding",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.11"
},
"devDependencies": {
"#mdi/js": "^5.4.55",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-plugin-eslint": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
I know it's hard to find the reason without the actuall code... but maybe you have some suggestion, I do not know where else to look, as I told before no errors while building and in browser, also no errors in yarn-error.log.