Related
As the title says, ESLint is complaining with this error message:
ESLint: Unable to resolve path to module '#vercel/analytics/react'.(import/no-unresolved)
In the line: import { Analytics } from '#vercel/analytics/react';
When following the instructions from this Vercel quickstart guide, using Next.js.
To sum up, the instructions are:
1- install package via NPM
npm install #vercel/analytics
2- in /pages/_app.tsx file, import it:
import { Analytics } from '#vercel/analytics/react';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
export default MyApp;
My packages used:
"next": "^12.1.0",
"react": "17.0.2",
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
"eslint-config-next": "^12.2.5",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^24.7.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^3.10.2",
The NPM package installed, has this folder structure:
/node_modules/#vercel
analytics/
dist/
react/
index.cjs
index.d.ts
index.js
index.cjs
index.d.ts
index.js
package.json
tsconfig.json
...
Notice how the path in node_modules actually is '#vercel/analytics/dist/react' rather than just '#vercel/anaylitics/react' as the instructions state to do in the code to use it.
But, when CTRL+click'ing on the variable imported Analytics, my IDE properly navigates me to the definition in node_modules, to the file #vercel/analytics/dist/react/index.d.ts, which is defined like so:
// ./node_modules/#vercel/analytics/dist/react/index.d.ts
// ...
declare function Analytics(props: AnalyticsProps): JSX.Element;
export { Analytics };
My ESLint config related to the import/ module is
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['src'],
},
},
},
If I import it as this instead:
import { Analytics } from '#vercel/analytics/dist/react'
then ESlint doesn't complain, but TSC does, with this error message:
TS2305: Module '"#vercel/analytics/dist/react"' has no exported member 'Analytics'.
Which also doesn't seem to make sense as the IDE is still finding the definition, and I can also see how the export { Analytics } line is there, so it should work...
What ESlint config or steps should I take differently to make this work without any lint/compiler errors?
When using eslint you will need to use the plugin: eslint-import-resolver-typescript with version 3.1.0 or later.
We also merged this version into eslint-config-next in this Pull Request. So this issue should also be resolved by upgrading to the latest package (13.0.4)
There is also a issue on our Github repo which with the solution: https://github.com/vercel/analytics/issues/18#issuecomment-1318424277
I have a question into vercel for a solution as I have the same issue. Probably to be expected since this is a beta product. I added the following line to my _app.js file in the meantime which allowed me to bypass the linting error and deploy to vercel. I have tested and the analytics is showing so must simply be a bug.
...
// eslint-disable-next-line import/no-unresolved
import { Analytics } from "#vercel/analytics/react";
...
Try this way
//tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#vercel/analytics/react": ["./node_modules/#vercel/analytics/dist/react"]
}
}
I am updating #vue/cli-service from 4.5.15 to 5.0.6 in my project and it leads to errors when bundling:
Module not found: Error: Can't resolve '/assets/img/my-image.png' in 'C:\some-path-here\folder-name'
The image is defined in MyComponent.vue as follows:
<style>
.my-component {
background: url(/assets/img/my-image.png);
}
</style>
These are also some of my dependencies:
"dependencies": {
"vue": "^2.7.0"
},
"devDependencies": {
"#vue/cli-service": "^5.0.6",
"copy-webpack-plugin": "^11.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"vue-svg-loader": "^0.16.0"
}
This is my understanding of what happens:
Webpack 5 is configured in Vue CLI 5.0.6 to find my-image.png somewhere in my project. This file doesn't exist in my project and Webpack will never find it.
Webpack 4 is not configured in Vue CLI 4.5.15 to find any assets in my project and it keeps paths as is.
Basically, I don't want Webpack to search for any assets (i.e. images and fonts) in my project, I want it to keep paths as is. A browser will find my assets based on the paths I defined myself.
Is there a way to prevent resolving particular paths in Webpack / Vue CLI? For example, if they start with "/assets" or end with particular file extensions?
I tried something like this but it does not help:
configureWebpack: {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.(png|woff)$/
})
]
}
I am trying to create a custom cra-template file for my team to use, but keep hitting an issue where I receive the following error when running npx create-react-app test-app --template my-custom-template.
internal/modules/cjs/loader.js:796
throw err;
^
Error: Cannot find module 'cra-template-my-custom-template'
Require stack:
- C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js
- C:\Users\user\Desktop\cra-test-app\test-app\[eval]
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.resolve (internal/modules/cjs/helpers.js:80:19)
at module.exports (C:\Users\user\Desktop\cra-test-app\test-app\node_modules\react-scripts\scripts\init.js:110:13)
at [eval]:3:14
at Script.runInThisContext (vm.js:116:20)
at Object.runInThisContext (vm.js:306:38)
at Object.<anonymous> ([eval]-wrapper:9:26)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at evalScript (internal/process/execution.js:80:25)
at internal/main/eval_string.js:23:3 {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\node_modules\\react-scripts\\scripts\\init.js',
'C:\\Users\\user\\Desktop\\cra-test-app\\test-app\\[eval]'
]
}
The template itself is fairly simple at the moment and I think the issue here may be that our team uses a private feed for some internal packages (which are dependencies in the template). This private feed is set to use npm as an upstream feed.
I have tried testing the template locally with the --template file:../path/to/template method and publishing the template to our internal feed. I can install the package using npm install, so the package is definitely being found in the registry.
I have also tried refreshing the npm cache and uninstalling create-react-app per some other recommendations.
Do I have to publish the template to the public npm registry for this to work? Or am I missing something else?
My template's package.json file is as follows:
{
"name": "cra-template-my-custom-template",
"version": "1.0.5",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
and the template.json is as follows:
{
"package": {
"dependencies": {
"#<custom-feed-scope>/<custom-feed-library>": "^5.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.34",
"#types/react": "^16.9.32",
"#types/react-dom": "^16.9.6",
"<custom-feed-library>": "^3.2.1",
"<custom-feed-library>": "^0.2.4",
"typescript": "^3.7.5"
}
}
}
I am currently using npm instead of yarn, but I was able to create an app using the typescript template just fine.
After some research into other cra-template packages, it seems the missing piece here was not having the main value defined in my template's package.json file.
After changing the package.json to what is below, it started working.
{
"name": "cra-template-my-custom-template",
"version": "1.0.8",
"keywords": [
"react",
"create-react-app",
"template",
"typescript"
],
"main": "template.json",
"description": "The base template for React apps hosted within our project",
"files": [
"template",
"template.json"
]
}
I've got a problem with my build process in relation to my React app.
I always get the following error:
Module not found: Error: Can't resolve 'core-js/es6'
if I use this in a polyfill.js:
import 'core-js/es6';
That is my package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.4.2",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^5.0.2",
"css-hot-loader": "^1.4.4",
"eslint": "5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"react-hot-loader": "4.8.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^3.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-redux": "^6.0.1",
"react-string-replace": "^0.4.1",
"redux": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --colors --profile --progress --env.mode production",
"lint": "eslint ./src/ --ext .js,.jsx"
}
}
Can someone help here?
The imports have changed for core-js version 3.0.1 - for example
import 'core-js/es6/array';
and
import 'core-js/es7/array';
can now be provided simply by the following
import 'core-js/es/array';
if you would prefer not to bring in the whole of core-js
I found possible answer. You have core-js version 3.0, and this version doesn't have separate folders for ES6 and ES7; that's why the application cannot find correct paths.
To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.
To downgrade the version, simply run:
npm i -S core-js#2.5.7
In my case, with Angular, this works ok.
Change all "es6" and "es7" to "es" in your polyfills.ts and polyfills.ts (Optional).
From: import 'core-js/es6/symbol';
To: import 'core-js/es/symbol';
After Migrated to New Angular Version or Version changed for core-js, core-js/es6 or core-js/es7 Will not work.
You have to simply replace import core-js/es/ in your polyfills.ts file.
For ex.
import 'core-js/es6/symbol'
to
import 'core-js/es/symbol'
This will work properly.
Change all es6 and es7 to es in your polyfills.ts
example:
import 'core-js/es6/reflect';
becomes
import 'core-js/es/reflect';
If you use #babel/preset-env and useBuiltIns, then you just have to add corejs: 3 beside the useBuiltIns option, to specify which version to use, default is corejs: 2.
presets: [
[
"#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}
]
],
For further details see: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env
Sure, I had a similar issue and a simple
npm uninstall #babel/polyfill --save &&
npm install #babel/polyfill --save
did the trick for me.
However, usage of #babel/polyfill is deprecated (according to this comment) so only try this if you think you have older packages installed or if all else fails.
Ended up to have a file named polyfill.js in projectpath\src\polyfill.js
That file only contains this line: import 'core-js'; this polyfills not only es-6, but is the correct way to use core-js since version 3.0.0.
I added the polyfill.js to my webpack-file entry attribute like this:
entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']
Works perfectly.
I also found some more information here : https://github.com/zloirock/core-js/issues/184
The library author (zloirock) claims:
ES6 changes behaviour almost all features added in ES5, so core-js/es6
entry point includes almost all of them. Also, as you wrote, it's
required for fixing broken browser implementations.
(Quotation https://github.com/zloirock/core-js/issues/184 from zloirock)
So I think import 'core-js'; is just fine.
Just change "target": "es2015" to "target": "es5" in your tsconfig.json.
Work for me with Angular 8.2.XX
Tested on IE11 and Edge
I got this error today (13 April 2022) after upgrade core-js version from 2 to 3 and after I tried to find the answer for several Hour, finally I can solved it after update my babel.config.js and make it like this:
Before:
presets: [ "#vue/app" ]
After:
presets: [ [ "#vue/app", { useBuiltIns: "entry" } ] ]
Notes
I'm using Vue in my project
I already try almost all question regarding npm uninstall core-js and tried to re-install it again npm install core-js --save or delete node_modules, package-lock.json, and yarn-lock.json but still failed to solved it
I can solved it if I downgrade core-js version using this line : npm install core-js#2.6.5, but it is not a good solution for long term condition
Explanation for this problem: this problem happens because the path for core-js/es6 in version 3 is already changed to core-js/es that's why your project can't find it the right path for the directory where it pointed to core-js/es6
It is vital that Webpack is able to resolve the import statements prepended to source files by Babel, for example
import "core-js/modules/es.object.freeze.js";
If such an import statement is inserted into a file which does not reside in a package which has core-js as a dependency, then Webpack may not be able to resolve its location on disk, resulting in a ModuleNotFoundError.
The solution for me was to specify the application's node_modules directory in the resolve section of my webpack.config.cjs:
module.exports = {
resolve: {
modules: [
path.join(__dirname, "node_modules"), // Contains core-js.
"node_modules" // Webpack's default.
]
}
}
And of course core-js is listed as a dependency in my application's package.json:
{
"dependencies": {
"core-js": "^3.19.3"
}
}
For Angular 14 I had to run npm i --save core-js
I kept the polyfills the same as in the Amplify docs:
import 'core-js/es/typed-array';
import 'core-js/es/object';
I have gone through many posts on github and stackoverflow. I have the following dev dependencies in my package.json for the es6 to es5 transpilation.
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^15.0.0",
"grunt-browserify": "^5.2.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0"
I have setup a grunt task to compile my es6 file to es5 using babelify as transformer and browserify.
browserify: {
dist: {
src: [‘src/component/myes6.js’],
dest: ‘dist/src/component/myes5.js’,
options: {
transform: [
['babelify', {presets: [["es2015", { loose: true, modules: false }]]}]
],
browserifyOptions: {
debug: true
}
}
}
}
My es6 js file is importing a node module which is es6 js file and exported as function. I tried to follow many suggestion from various forums and looked through the babel/babelify/grunt-browserify documentation but could not land on a concrete conclusion.
Earlier I thought, it could be versions issue but I am now using all babel 6 version and latest browserify/grunt-browserify etc. But still, I am seeing the following error:
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Any help or pointers will be appreciated.
I've solved it installing esmify plugin npm install babel-plugin-esmify browser-resolve --save-dev.
browserify: {
dist: {
src: ['src/component/myes6.js'],
dest: 'dist/src/component/myes5.js',
options: {
plugin: [
[require('esmify')]
],
transform: [
['babelify', {
presets: [["es2015", { loose: true, modules: false }]]
}
]
}
}
},
I haven't tried running it, but the square brackets around your browserify dist/src shouldn't be there. Try running this file without them.