How to fix - Module not found: Can't resolve '#babel/runtime/helpers/objectWithoutPropertiesLoose' - javascript

I am working on a project of react and I am getting the following error after implement this package https://www.npmjs.com/package/react-bootstrap-typeahead then i get the following error.
Failed to compile
./node_modules/react-popper/lib/cjs/Popper.js
Module not found: Can't resolve '#babel/runtime/helpers/objectWithoutPropertiesLoose' in 'E:\reactjs\deveans-react-version\node_modules\react-popper\lib\cjs'
This error occurred during the build time and cannot be dismissed.
I found many solutions and I tried it too https://github.com/jquense/yup/issues/216 but still getting same error.
But when i remove Typeahead component then it works fine.
import React , { Component } from 'react'
import {Typeahead} from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
class States extends Component {
state = {
multiple: false,
options: [
{id: 1, label: 'Pakistan'},
{id: 2, label: 'Indonesia'},
{id: 3, label: 'Turkey'},
{id: 4, label: 'Brazil'},
]
};
render () {
const {multiple} = this.state;
return (
<div>
<Typeahead
labelKey="label"
multiple={multiple}
options={this.state.options}
placeholder="Choose a state..."
/>
</div>
)
}
}
export default States

You can install #babel/runtime to fix the problem:
Using npm:
npm install --save #babel/runtime
Using yarn:
yarn add #babel/runtime

I found a solution
npm install --save-exact #babel/runtime#7.0.0-beta.55
Then delete the package-json.lock file and node_modules folder then re-install with npm install.
It works for me.

Make sure you got #babel/runtime installed into your regular dependencies and not the devDependencies (leave out the --dev or the -D flag when installing).
npm i #babel/runtime
OR
yarn add #babel/runtime
Else it's going to be missing when doing a production installation (which leaves out the devDependencies section), which is what happened to me.
All provided answers are correct in most cases but I wanted to add an explanation:
Babel's runtime is a production runtime that ships with your code so it can't just be left out because it runs on the client.

For me, i solve this by adding .js and .jsx as a resolvable extensions as objectWithoutPropertiesLoose is without extension.
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},

For me, I have to use these configurations on my webpack.config.js file
module: {
rules: [
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
],
}
I know this is an old issue, but it may help someone else

I had similar issue with pnpm and solved it by adding in .npmrc :
hoist-pattern[]=#babel/runtime
and install #babel/runtime to production dependencies (no -D flag!)
pnpm add #babel/runtime

Related

Vite Js --> dev mode works, but build doesn't. (importing library causes error)

I tried to move from vue-cli to vite but observed some obstacles.
I want to include several npm packages into my vue 3 project.
I tried to understand the issue, and basically the error came when I imported
https://www.npmjs.com/package/rdf-parse
If I run npm run dev everything works as expected, but when I run npm run build and serve the dist folder with http-server the error:
Uncaught TypeError: Object.defineProperty called on non-object at Function.defineProperty
occurs.
The code worked with vue-cli and in vite-dev mode so I expect I missed somethin crucial in the vite.config.js
But I didnt find anything in the docu that helped me out and also no thread here on stackoverflow or elsewhere.
I created a repo with a minimal example here: https://github.com/stackoverflowuser/vite-issue
It is the npm vue3 template (npm init vue#3) and only the library rdf-parse is added.
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import { NodeModulesPolyfillPlugin } from '#esbuild-plugins/node-modules-polyfill'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
}
},
build: {
target: "es2020"
},
optimizeDeps: {
esbuildOptions: {
// Limit target browsers due to issue: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
target: "es2020",
// Node.js global to browser globalThis
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
plugins: [
NodeModulesPolyfillPlugin()
]
}
},
})
In hope someone can give me a hint.

Jest fails when rendering React component with 'No element indexed by'

I am attempting to get Jest working for my React Native project and have run into a variety of problems, the most confusing of which is the following:
When I run any test that renders a component, it spits out the error No element indexed by 7.
Here is the full stack trace:
FAIL __tests__/App-test.tsx
● Test suite failed to run
No element indexed by 7
at ArraySet_at [as at] (node_modules/source-map-support/node_modules/source-map/lib/array-set.js:109:9)
at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (node_modules/source-map-support/node_modules/source-map/lib/source-map-consumer.js:673:30)
at mapSourcePosition (node_modules/source-map-support/source-map-support.js:244:42)
at wrapCallSite (node_modules/source-map-support/source-map-support.js:397:20)
at Function.prepareStackTrace (node_modules/source-map-support/source-map-support.js:446:39)
at Function.write (node_modules/#jest/console/build/BufferedConsole.js:101:7)
at console._log (node_modules/#jest/console/build/BufferedConsole.js:117:21)
at console.error (node_modules/#jest/console/build/BufferedConsole.js:161:10)
This same error occurs with any component I attempt to render.
Regarding this issue which purports to solve a similar problem, I have tried installing babel (npm install --save-dev babel-jest #babel/core #babel/preset-env) and setting "coverageProvider" in the jest config to "v8". With or without the v8 preset I am still getting the same errors. It's definitely possible that I configured something else wrong. Here are some code snippets which may be of use:
App-test.tsx
/**
* #format
*/
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});
package.json
// ...
"jest": {
"preset": "react-native",
"coverageProvider": "babel",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|#react-native|react-native-video|react-native-reanimated|#miblanchard/react-native-slider|react-native-gesture-handler)/)"
],
"transform": {
"^.+\\.[t|j]sx?$": "babel-jest"
},
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
babel.config.js
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
['#babel/preset-typescript', {allowDeclareFields: true}],
],
plugins: [
"react-native-reanimated/plugin",
],
};
As an additional note, I have tried adding #babel/preset-env to the list of babel presets, but this only resulted in a different error related to a separate package added to the transformIgnorePatterns list. Adding source-map-support to said list also solves nothing.
Edited to note that these tests fail regardless of whether or not the --coverage argument is applied
In the end, I solved my error by uninstalling node_modules, re-running npm install --save-dev babel-jest #babel/core #babel/preset-env and adding
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js",
// ...
]
to my package.json

NPM RUN BUILD ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css

My Error Capture
ERROR in ./node_modules/#fortawesome/fontawesome-svg-core/styles.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fortawesome/fontawesome-svg-core/styles.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 30
at /home/simrs/adamklinik/frontend/node_modules/#fortawesome/fontawesome-svg-core/styles.css:200:3
I use nuxt.js and tailwind
For anyone who stumbles over this issue: I solved it by following this answer: https://stackoverflow.com/a/67827344/6098257
In my case I just had to set postcss-custom-properties to false.
build: {
postcss: {
plugins: {
"postcss-custom-properties": false
},
},
}
Try to do npm install first, then rerun with npm run build.
Try to do steps:
npm uninstall #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
npm i #nuxtjs/fontawesome #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons -D
Or you can manual update two packages (#fortawesome/free-brands-svg-icons and #fortawesome/free-solid-svg-icons) to v6.x

Integrating Stylelint with Vue.js

I'm working on trying to integrate stylelint into my freshly created Vue project.
I thought this would be a simple case of using the Stylelint Webpack Plugin but when I run yarn serve, any errors completely freeze it with no output. If I run yarn build, the build will fail as intended but will only print "There was a stylelint error".
My vue.config.js is as follows:
const stylelintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new stylelintPlugin({ files: ['**/*.(vue|scss)'] }),
],
},
};
Here are my current versions from package.json:
"#vue/cli-service": "^3.9.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylelint-scss": "^3.9.2",
While this may come too late, here are working configurations by using stylelint-config-recommended-scss.
It is an extension to the 3rd party stylelint-scss plugin which needs to be installed along with stylelint itself. Also stylelint-webpack-plugin needs to be installed, which seems to have been missing from your setup.
Install dev dependencies:
# First remove an unnecessary one you had (with NPM):
npm uninstall stylelint-config-recommended
# Or with Yarn:
yarn remove stylelint-config-recommended
# Install dev deps with NPM:
npm i -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
# Or with Yarn:
yarn add -D stylelint stylelint-scss stylelint-config-recommended-scss stylelint-webpack-plugin
In your vue.config.js configuration file:
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new StyleLintPlugin({
files: ['src/**/*.{vue,scss}'],
}),
],
},
};
Create a file stylelint.config.js in your project's root folder:
module.exports = {
extends: 'stylelint-config-recommended-scss',
rules: {
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep']
}
]
}
};
In package.json you can add this lint:scss command (run by npm run lint:scss). It tries to run autofix on all rules, but please note that not all rules can be autofixed.
In that case the script will output a list of error lines and exit on error. You need to go and fix these by hand, and then re-run the script to see that the errors got fixed:
{
"scripts": {
"lint:scss": "stylelint ./src/**/*.{vue,scss} --fix"
}
}
Hope this helps! Please add a comment if I missed something.
my configuration is the same like ux.engineer written
but when i try run scripts npm run lint:scss then I have
node_modules/stylelint/node_modules/get-stdin/index.js:13
for await (const chunk of stdin) {
^^^^^
SyntaxError: Unexpected reserved word
it turned out that I had the wrong (old) node version, so pay attention for that

"No ESLint configuration found" error

Recently, we've upgraded to ESLint 3.0.0 and started to receive the following message running the grunt eslint task:
> $ grunt eslint
Running "eslint:files" (eslint) task
Warning: No ESLint configuration found. Use --force to continue.
Here is the grunt-eslint configuration:
var lintTargets = [
"<%= app.src %>/**/*/!(*test|swfobject)+(.js)",
"test/e2e/**/*/*.js",
"!test/e2e/db/models/*.js"
];
module.exports.tasks = {
eslint: {
files: {
options: {
config: 'eslint.json',
fix: true,
rulesdir: ['eslint_rules']
},
src: lintTargets
}
}
};
What should we do to fix the error?
The error you are facing is because your configuration is not present.
To configure the eslint type
eslint --init
then configure as your requirement.
then execute the project again.
I've had the same error. It seems to need configuration.
Go to your project root & run in terminal
./node_modules/.bin/eslint --init
Try to swap config with configFile. Then :
Create eslint.json file and
Point the right location of it (relative to Gruntfile.js file)
Place some configuration in that file (eslint.json), i.e.:
.
{
"rules": {
"eqeqeq": "off",
"curly": "warn",
"quotes": ["warn", "double"]
}
}
for more examples, go here.
I hade the same problem with Gulp and running "gulp-eslint": "^3.0.1" version.
I had to rename config: to configFile in Gulp task
.pipe(lint({configFile: 'eslint.json'}))
For those having the same problem, this is how we've fixed it.
Following the Requiring Configuration to Run migration procedure, we had to rename eslint.json to .eslintrc.json which is one of the default ESLint config file names now.
We've also removed the config grunt-eslint option.
Create a new file on the root directory called .eslintrc.json file:
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
Just follow the steps
1.create eslint config file name eslintrc.json
2.place the code as given below
gulp.src(jsFiles)
// eslint() attaches the lint output to the "eslint" property
// of the file object so it can be used by other modules.
.pipe(eslint({configFile: 'eslintrc.json'}))
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failAfterError last.
.pipe(eslint.failAfterError());
Webpack
I had eslint.rc file in my root project directory but event though
I was getting error.
Solution was to add exclude property to "eslint-loader" rule config:
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// eslint options (if necessary)
}
},
],
},
// ...
}
We faced this problem today and realized, that the issue was not caused inside the project that we were working on, but inside a package that we had a link on using the command:
yarn link
Which is a feature often useful to test out new features or when trying to debug an issue in a package that manifests itself in another project.
We solved it by either removing the link, or in case of ember.js disabling the developer mode of our addon package.
index.js
module.exports = {
isDevelopingAddon: function() {
return false;
},
...
}
gulp.task('eslint',function(){
return gulp.src(['src/*.js'])
.pipe(eslint())
.pipe(eslint.format())
});
`touch .eslintrc` instead of .eslint
these two steps may help you!
Run the command ember init.
When it asks for overwriting the existing file(s). Type n to skipping overwriting the file.
Now it will automatically create required files like .eslintrc, etc.
For me the same issue occurred when i copied my folder except dist, dist_production and node_modules folder to another system and tried running ember build.

Categories