Hello. I need your help. How can I fix this error?
Parsing error: require() of ES Module Desktop/Projects/MealsToGo/node_modules/eslint-scope/lib/definition.js from Desktop/Projects/MealsToGo/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
Instead change the require of definition.js in Desktop/Projects/MealsToGo/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
This is probably happening because you, like me, were using the old babel parser. Package babel-eslint has been deprecated since March of 2020.
The package was migrated to new repo, if you want to know more, I recommend you check Babel git.
Just change and install or update to the latest parser packaged in .eslintrc.js:
Old .eslintrc.js:
module.exports = {
parser: 'babel-eslint',
...
};
New .eslintrc.js
module.exports = {
parser: '#babel/eslint-parser',
...
};
The solution that works for me was: In the .eslintrc file Just change:
"parser": 'babel-eslint'
to:
"parser": '#babel/eslint-parser'
Another cause of this issue is an old node version.
I was getting this with ESLint 8.10.0 and Node 12. Upgrading Node to 14 was the fix.
This is the solution:
module.exports = {
parser: '#babel/eslint-parser',
...
};
Related
I've imported the Open Zeppelin ERC721 token standard into my VS Code with the Solidity extension, but see the following warnings on all my OZ import statements:
Screenshot of error
Why is this happening and what is the workaround for this warning?
What I've tried:
change default workspace compiler to localNodeModule (began to throw other warnings like on the pragma solidity line)
Example of solution I've tried
Just install the Solidity+Hardhat Extension ,this will take care of the errror.
run below command
npm install #openzeppelin/contracts
Change the import line like this
import "./node_modules/#openzeppelin/contracts/token/ERC721/ERC721.sol";
You could try this solution here, the only one that helped me.
https://stackoverflow.com/a/72241149/7537543
When you compile programmatically using solc, new syntax was introduced, which you have to include in compile.js.
// New syntax (supported from 0.5.12, mandatory from 0.6.0)
var output = JSON.parse(
solc.compile(JSON.stringify(input), { import: findImports })
);
You should have a helper function for finding imports
function findImports(relativePath) {
//my imported sources are stored under the node_modules folder!
const absolutePath = path.resolve(__dirname, 'node_modules', relativePath);
const source = fs.readFileSync(absolutePath, 'utf8');
return { contents: source };
}
Unfortunately I ran into this error too & just gave the path manually:
import "/home/ev1lclow3n/node_modules/#openzeppelin/contracts/token/ERC721/ERC721.sol";
This solved my error.
(I'm a linux user so path may differ for you)
Thanks ;-)
you have to manually guide the open zepplin import to its source file if you have it downloaded in your node modules then all you have to do is to change its path like this " ../node_modules/" and also make sure to use the latest extension of juan blanco's solidity extension and solidity and hardhat extension and if you are following a tutorial your first lines of codes would probably be import "hardhat/console.sol"; all you have to do here is to manually direct only this file to its designated place and the others would do it by themselves.
What you have to do is:
If you have "Solidity by Juan Blanco" for Truffle and "Solidity by Nomic Foundation" for Hardhdat, and if you are using Hardhat, disable the one by Juan Blanco and just use the one by Nomic Foundation, it just worked for me.
Screenshot
Make sure to create a Hardhat project (npx hardhat) and install:
npm install --save-dev "hardhat#^2.12.7" "#nomicfoundation/hardhat-toolbox#^2.0.0"
npm i #openzeppelin/contracts
Ok. That was a dumb question. Two things you have to do:
(1) Install the OZ library via
npm install #openzeppelin/contracts
(2) If you see Error HH606 (i.e. project can't compile), it's likely because The Solidity version pragma statement in these files doesn't match any of the configured compilers in your config.. Ensure that your pragma version matches the version in your hardhat config.
Hope this helps.
I seem to absolutely not grasp where to put root programmatic options for the babel.
If I have a monorepo and need to tell the different sub packages that they shall look upwards for my babel.config.js then I should put rootMode: "upwards" into the .babelrc of the sub packages, correct? This does not work, because of the resulting error
Error: .rootMode is only allowed in root programmatic options
Somehow I simply can't find any example of where to put/use root programmatic options... Can anyone point me to the right direction?
If you are using Webpack, you need to put it there.
module: {
[..]
rules: [
// Transpile ES6 Javascript into ES5 with babel loader
{
test: /\.jsx?$/,
exclude: [/node_modules/, /json/],
loader: 'babel-loader',
options: {
rootMode: 'upward'
},
},
[..]
],
[..]
},
Otherwise I had the same issue than you, I can't put it in the package.json file using the key babel.
Any API-related options are called programmatic options. Take a look at my discussion with the primary maintainer of Babel: https://github.com/babel/babel/discussions/14405.
It's when you specify them directly to Babel (babel.transformSync(code, programmaticOptions) or to the Babel integration you are using (e.g. babel-loader, which can pass them to its internal babel.transform call). In other words, not in presets or config files. [...]
by #nicolo-ribaudo - Babel core team.
I got this error using my (probably non-standard) monorepo setup where I have top-level subdirectories for each of my packages. No top-level package. When I upgraded to Babel 7, my Jest tests were no longer transforming packages that were yarn linked into the package where I was running Jest.
I added a top-level babel.config.js as part of Babel's monorepo instructions. I had rootMode: "upwards" in these three places:
ui-package/webpack.config.js for transforming the app.
ui-package/babel-jest.js for the tests, where it appeared like:
module.exports = require("babel-jest").createTransformer({
rootMode: "upward",
})
and was referenced from jest.config.js in that same dir like:
transform: {
"^.+\\.jsx?$": "./babel-jest.js",
},
And in /babel.config.js, the newly added top-level babel conf file.
Removing it from the last one removed the error.
I faced a problem that my existing code stopped working, and I can't get what's the reason for that problem, I have pretty simple program that transpiles ES6 code:
TypeError: The plugin "transform-es2015-modules-commonjs" didn't export a Plugin instance
at PluginManager.validate (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\plugin-manager.js:164:13)
at PluginManager.add (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\plugin-manager.js:213:10)
at File.buildTransformers (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\index.js:237:21)
at new File (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\file\index.js:139:10)
at Pipeline.transform (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at load (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\index.js:63:26)
at Object.jsdom.env.done (C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\index.js:216:5)
at C:\Epam\dhl-ewf\cq\dhl-view\src\main\content\jcr_root\etc\clientlibs\dhl\global\Es6\node_modules\jsdom\lib\jsdom.js:271:18
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)
My code is not representative it stops at the following line:
let transpiled = babel.transform(source, {
"plugins": [
'transform-es2015-modules-commonjs',
'transform-es2015-destructuring',
'transform-es2015-parameters',
'transform-es2015-spread'
] });
What may be the problem? Thank you in advance!
You are trying to use Babel 6 plugins with Babel 5.
I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.
I installed blueimp-file-upload and jquery.ui.widget from NPM
npm install --save blueimp-file-upload
npm install --save jquery.ui.widget
and I require blueimp-file-upload in my entry file
require('blueimp-file-upload')
but when I run webpack, I get thie error:
ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
# ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19
If you're working with images:
Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:
Install missing dependencies:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
Configure Webpack:
config.resolve = {
extensions: ['', '.js'],
alias: {
'load-image': 'blueimp-load-image/js/load-image.js',
'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
};
Include scripts in your app:
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";
Disable both AMD and CommonJS and use the Browser Global jQuery.
/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');
This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me #Gowrav answer was wrong way.
After days of straying I've solved it in the simple way. Just did:
npm install jquery-ui
The fact is that jquery.fileupload.js searching for its vendor:
But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.
P.S. It's just my opinion about how does all work. But this way has helped me.
jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):
require('imports?define=>false!blueimp-file-upload')
It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.
Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles
You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
first install two plugins
npm i blueimp-file-upload --save
npm i jquery-ui --save
then require in web pack
require('blueimp-file-upload/js/jquery.fileupload')
actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
In webpack 3.x, the syntax will look like this:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
I am building an EmberJS application with the great help of ember-cli, which is great, but I have an error and I cannot find what I am doing wrong.
Here is what I do in my broccoli file:
app.import('vendor/underscore/underscore.js', {
exports: {
"underscore": [
"underscore"
]
}
});
and then in one of my controllers:
import _ from "underscore";
ember-cli builds my application.
But when I go to the controller using underscore, I get the error:
Error: Could not find module underscore.
What am I doing wrong?
Try:
app.import({
development: 'vendor/underscore/underscore.js',
production: 'vendor/underscore/underscore.min.js'
}, {
'underscore': [
'default'
]
});
This will at least give "import _ from 'underscore';" a chance to work. If you choose an AMD or ES6 version of underscore/lodash, list which modules you wish to import with 'default'.
EDIT:
Is it crucial that you use underscore? Why I ask, I'm using lodash with one Ember-cli project, and it is working fine.
Console> bower install lodash --save
then in Brocfile:
app.import({
development: 'vendor/lodash/dist/lodash.js',
production: 'vendor/lodash/dist/lodash.min.js'
}, {
'lodash': [
'default'
]
});
//or:
app.import('vendor/lodash/dist/lodash.min.js');
As for underscore - there was an issue with devDependencies not being bundled, of which underscore is one.
I got this from locks on #emberjs IRC.
https://github.com/ef4/ember-browserify
In your project:
npm install --save-dev ember-browserify
npm install --save-dev underscore
In your controller:
import _ from "npm:underscore";
Then you can use _. For example: _.each([1,2,3], alert);. I took everything out I had manually added to brocfile and package.json. Apparently this will do it for you. Crazy!
In recent versions of ember (I am using 2.11) it is possible to load AMD in UMD wrappers using
app.import('bower_components/js-md5/js/md5.js', {using: [{
transformation: 'amd', as: 'js-md5'
}]});
And in your code
import md5 from 'js-md5';
In your case of underscore it should look like:
app.import('vendor/underscore/underscore.js', {using: [{
transformation: 'amd', as: 'underscore'
}]});