I know there is topic on why this error occurs on here. My question is how to fix it in the NextJS environment and babel to produce chunks that don't include the spread operator in an object. Here is the background.
I need to support Edge18 where the spread operator is not supported in object destructing. It produces the error:
SCRIPT1028: SCRIPT1028: Expected identifier, string or number
The error is caused by this line:
filter(e=>"0"!==t[e]).reduce((e,r)=>({...e,[`-${r}`]:(0,f.default
And in particular the ...e
This code is in a NextJS chunk loaded via
<script src="/_next/static/chunks/269073627ff2c2dabb405b46af9d15fd8bf75a34.ed77311839e33222ab61.js" async=""></script>
How do I update the babel config to stop using the spread operator (ES2018) in an object? I am using typescript but the tsConfig target is ES5. I checked the browserslist per the Babel documentation for #babel/preset-env which links to browserslist and recommends using npx browserslist to see the target browsers for a project and Edge 18 is in there.
I do have a custom babel config per the docs here which follows the docs:
{
"presets": ["next/babel"],
"plugins": []
}
which has an added plugin that configures Styled Components for SSR. That's the only change. I appreciate any pointers in how to get NextJS to produce Chunks that don't contain the spread operator in an object or targets less than ES2018.
Edit: Here is package.json
"dependencies": {
"#apollo/client": "3.0.0-beta.50",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-ssr": "^4.0.0-beta.1",
"#next/bundle-analyzer": "^9.4.4",
"#sentry/browser": "^5.15.5",
"#sentry/node": "^5.15.5",
"#zeit/next-source-maps": "0.0.3",
"downloadjs": "^1.4.7",
"framer-motion": "^1.11.0",
"geolib": "^3.3.1",
"geomagnetism": "^0.1.0",
"graphql": "^14.6.0",
"html-to-image": "^0.1.1",
"import": "0.0.6",
"leaflet": "^1.6.0",
"local-storage": "^2.0.0",
"lodash": "^4.17.15",
"mgrs": "^1.0.0",
"next": "^9.4.4",
"postcss-flexbugs-fixes": "^4.2.1",
"react": "0.0.0-experimental-33c3af284",
"react-dom": "0.0.0-experimental-33c3af284",
"react-icons": "^3.10.0",
"react-leaflet": "^2.7.0",
"react-spinners": "^0.8.3",
"react-transition-group": "^4.4.1",
"styled-components": "^5.1.1",
"uuid": "^7.0.3"
},
"devDependencies": {
"#graphql-codegen/add": "^1.15.0",
"#graphql-codegen/cli": "^1.15.0",
"#graphql-codegen/typescript": "^1.15.0",
"#graphql-codegen/typescript-operations": "^1.15.0",
"#graphql-codegen/typescript-react-apollo": "^1.15.0",
"#graphql-codegen/typescript-resolvers": "^1.15.0",
"#sentry/webpack-plugin": "^1.11.1",
"#types/downloadjs": "^1.4.2",
"#types/little-loader": "^0.2.0",
"#types/local-storage": "^1.4.0",
"#types/lodash": "^4.14.154",
"#types/node": "^14.0.6",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/react-leaflet": "^2.5.1",
"#types/react-transition-group": "~4.2.4",
"#types/styled-components": "^5.1.0",
"#types/styled-jsx": "^2.2.8",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^3.0.2",
"#typescript-eslint/parser": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^7.1.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"mapkit-typescript": "^5.18.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.0.5",
"tailwindcss": "^1.4.6",
"typescript": "^3.9.3"
}
Edit 2: Here is the package analyzer of the package the chunk that is causing the issue (chunk ID is different because it's from development - same code found in here though)
Edit 3: I think the issue was tailwindcss. If I do the accepted solutions answer for tailwindcss an es-check es-check es6 'out/_next/static/chunks/*.js' returns the node_modules chunk as es6 compliant. If I then remove the transpire from the config, it marks the chunk as non es6 compliant at the same code that was erring in original post.
One of your dependencies is not using ES5-compliant code for older browsers and will need to be transpiled.
You need to narrow which dependency is producing this code and transpile it using babel. This dependency can be the result of a sub-dependency to a main dependency, so you may have to traverse the entire dependency tree all the way down to find the culprit. A simple example would be: #nivo is a React charting package that has a sub-dependency called d3-scale which dropped support for IE11 and can't be polyfilled, therefore it needs to be transpiled by babel to work in IE11:
next.config.js
module.exports = {
webpack(config, { defaultLoaders, isServer }) {
/* adds a custom Webpack rule for babel to transpile d3-scale */
config.module.rules.push({
test: /\.js$/,
loader: defaultLoaders.babel,
include: /[\\/]node_modules[\\/](d3-scale)[\\/]/,
});
/* return new config to next */
return config;
}
};
Alternatively, you can use the next-transpile-modules package that does the same thing as the above.
Related
I'm in the process of migrating some node packages which has become quite a headache.
Currently this is what my package.json looks like:
{
//These are the updated dependencies and Jest configurations
"dependencies": {
"#google-cloud/logging-winston": "^4.0.2",
"#google-cloud/secret-manager": "^3.2.3",
"#google-cloud/storage": "^5.7.0",
"#nestjs/common": "^8.2.3",
"#nestjs/config": "^1.1.5",
"#nestjs/core": "^8.2.3",
"#nestjs/jwt": "^8.0.0",
"#nestjs/mongoose": "^9.0.1",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.2.3",
"bcrypt": "^5.0.1",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"dayjs": "^1.9.7",
"helmet": "^4.2.0",
"mongoose": "^6.0.14",
"nanoid": "^3.1.20",
"nest-winston": "^1.4.0",
"p-all": "^3.0.0",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"reflect-metadata": "^0.1.13",
"rxjs": "^7.4.0",
"winston": "^3.3.3"
},
"devDependencies": {
"#nestjs/cli": "^8.1.5",
"#nestjs/schematics": "^8.0.5",
"#nestjs/testing": "^8.2.3",
"#types/bcrypt": "^5.0.0",
"#types/express": "^4.17.13",
"#types/jest": "^27.0.3",
"#types/multer": "^1.4.7",
"#types/node": "^16.11.11",
"#types/passport-jwt": "^3.0.3",
"#types/passport-local": "^1.0.33",
"#types/supertest": "^2.0.10",
"#typescript-eslint/eslint-plugin": "^4.6.1",
"#typescript-eslint/parser": "^4.6.1",
"eslint": "^7.12.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"jest": "^27.4.3",
"jest-mock": "^27.4.2",
"prettier": "^2.2.1",
"supertest": "^6.1.3",
"ts-jest": "^27.1.0",
"ts-loader": "^9.2.6",
"ts-node": "^10.4.0",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.5.2"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"moduleDirectories": [
"node_modules",
"src"
],
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coveragePathIgnorePatterns": [
".module.ts",
"main.ts",
"env-var-names.ts",
".d.ts",
".types.ts",
".e2e-spec.ts"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node",
"resetMocks": true,
"resetModules": true
}
}
When I try to run Jest, I get the following error relating to /node_modules
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/{username}/{project_directory}/node_modules/mongodb/src/bson.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import type {
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (../node_modules/mongodb/src/bson.ts:8:12)
So within our team, we've been able to fix it by changing a part of the Jest configuration from:
"moduleDirectories": [
"node_modules",
"src"
],
To so:
"moduleDirectories": [
"node_modules",
],
We also had to change our import paths back to relative. This gets rid of the error and is working fine, however we are a bit stumped as to why this works? Does anyone have any insight they could share?
Thank you!
I faced the same issue today and was totally mad that mongoose v5 was running without any problems and v6 gave me this freaking error. Luckily after 2-3 hours of tilting at windmills I found a solution (works for me at least).
All I had to do was adding literally one word to jest.config.js.
// before
moduleDirectories: ['node_modules', 'src']
// after
moduleDirectories: ['node_modules', '<rootDir>/src']
I think that problem occurred because of the location of bson.ts file. It lays under /node_modules/mongodb/src/bson, the path has src in it so I suppose it caused conflicts with jest config where we match src. Usage of <rootDir> fixes out problem cuz it eliminates paths that don't start in root directory and testing works fine.
It seems that you didn't enable the es6 import/export. Add this to your package.json
"type": "module"
I just installed eslint-plugin-unused-imports. When I commit, it does all its linting work and removed a bunch of imports even though many of those imports are being used in the file.
May or may not be worth noting, this project has a bunch of legacy Backbone and newer React components, with some Backbone views rendering React components. Also, this is a JS not TS project.
eslint-plugin-unused-imports issues states:
https://github.com/sweepline/eslint-plugin-unused-imports/issues/new?assignees=&labels=&template=bug_report.md&title=
If the issue is with something being marked wrongly as a unused import
and therefore being removed. It is an issue with the imported package
(#typescript-eslint/eslint-plugin for TS or eslint for JS) and its
no-unused-vars rule. I cannot do anything about this except updating
if a fix is made upstream.
If new rules are added no-unused-vars upstream which should be
autofixed, mark your issue rule addition.
But I'm not sure how to address this.
Below is my linting setup:
"devDependencies": {
...
"eslint": "^6.8.0",
"eslint-config-airbnb": "^10.0.1",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-react": "^6.10.3",
"eslint-plugin-standard": "^4.1.0",
"eslint-plugin-unused-imports": "^1.1.0",
...
"prettier": "^2.2.1",
"prettier-eslint": "^9.0.0",
"prettier-eslint-cli": "^5.0.0",
"prettier-stylelint": "^0.4.2",
...
"stylelint": "^9.8.0",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-prettier": "^1.1.2",
...
},
"peerDependencies": {
"eslint": ">=6.0.1",
"eslint-plugin-import": ">=2.18.0",
"eslint-plugin-node": ">=9.1.0",
"eslint-plugin-promise": ">=4.2.1",
"eslint-plugin-standard": ">=4.0.0"
},
"lint-staged": {
"src/**/*.{js,json,jsx,scss}": [
"node ./scripts/lint-prettier.js"
],
"*.{js,jsx,json,md}": [
"prettier --list-different"
]
},
...
"husky": {
"hooks": {
"pre-commit": "lint-staged && npm test"
}
}
}
I am using Material UI for React, I updated the Material-UI to the latest version and it is giving me following error
../node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '#babel/runtime/core-js/map' in
'C:\Users\User\Documents\code\react\node_modules\material-ui\styles'
I downgraded to the previous version of the Material-UI as well, worked around with installing the correct version of babel as well but still having the same issue.
Here is my package.json
"dependencies": {
"#babel/runtime": "^7.4.0",
"#material-ui/core": "^4.1.3",
"#material-ui/icons": "^3.0.2",
"#material-ui/lab": "^3.0.0-alpha.30",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"material-auto-rotating-carousel": "^3.0.1",
"material-auto-rotating-carousel-refurb": "^1.0.1",
"react": "^16.8.6",
"react-animated-slider": "^1.1.4",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.8.6",
"react-motion": "^0.5.2",
"react-responsive-carousel": "^3.1.49",
"react-router": "^3.2.3",
"react-scripts": "2.1.2",
"react-slick": "^0.23.2",
"react-swipeable-views": "^0.13.3",
"react-tap-event-plugin": "^1.0.0",
"slick-carousel": "^1.8.1"
}
I figured this issue out by adding a resolution in my package.json, but it only will work if you use yarn instead of npm.
my fix (if you use yarn)
// in your package.json
...
"resolutions": {
"material-ui/#babel/runtime": "7.0.0-beta.42"
}
...
Why does it work?, because #babel/runtime": "7.0.0-beta.42 still requires core-js as a dependency, in specific it requires core-js ^2.5.3
Alternative fix
If you are not using yarn and rather npm, you can add #babel/runtime": "7.0.0-beta.42 as a devDependency and it should be work fine as well.
I left the link to yarn resolutions, because it might be interesting for you.
I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.
error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/node_modules/resolve/lib/sync.js:58:15)
at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:154:9)
at items.map (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/#babel/core/lib/config/config-descriptors.js:101:10)
package.json
{
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"axios": "^0.17.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"react": "16.2.0",
"react-native": "^0.57.8",
"react-native-branch": "^2.3.0",
"react-native-camera": "^1.0.0",
"react-native-datepicker": "^1.6.0",
"react-native-deep-linking": "^2.1.0",
"react-native-fabric": "^0.5.1",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-modal": "^4.1.1",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-saga": "^0.16.0",
"stripe-client": "^1.1.3"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.4.2",
"babel-preset-airbnb": "^3.2.0",
"detox": "^9.0.4",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"eslint-plugin-react-native": "^3.6.0",
"jest-cli": "^23.6.0",
"metro-react-native-babel-preset": "^0.51.1",
"react-test-renderer": "16.0.0",
"remote-redux-devtools": "^0.5.12"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": [
"airbnb",
"#babel/preset-env",
"module:react-native",
"module:metro-react-native-babel-preset"
]
}
Deleting .babelrc file will fix this for you.
Please check react native upgrade helper
https://react-native-community.github.io/upgrade-helper
and specify your current React native version and the version to update (0.57 in your case)
You will see changes need to do in your case to make the code compatible with updated version
Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.
Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.
To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.
You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.
It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.
I have a module I am trying to test. That module is using other external modules and jest is having a hard time resolving them.
It is resolving the base path to:
./node_modules/react-tag-input/dist-modules/
Instead of:
./node_modules/react-tag-input/node_modules/react-dnd
Below, is a simplified version of what is happening:
Error:
Cannot find module 'react-dnd' from 'reactTags.js'
at Resolver.resolveModule (node_modules/jest-cli/node_modules/jest-resolve/build/index.js:160:17)
at Object.<anonymous> (node_modules/react-tag-input/dist-modules/reactTags.js:13:17)
at Object.<anonymous> (src/tagger/eventtagger.js:5:404)
This is my test file:
caseevent.test.js
import EventTagger from './eventtagger.js';
eventtagger.js
import ReactTags from 'react-tag-input';
package.json
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"modulePaths": [
"<rootDir>"
],
},
"dependencies": {
"babel-jest": "^17.0.2",
"flux": "^2.0.1",
"install": "^0.8.1",
"jest": "^17.0.3",
"lodash.flow": "^3.3.0",
"npm": "^3.10.6",
"object-assign": "^1.0.0",
"react": "^15.4.0",
"react-dnd": "git+https://github.com/jcrogel/react-dnd.git",
"react-dnd-html5-backend": "^2.0.0",
"react-dom": "^15.4.0",
"react-tag-input": "^4.4.0",
"react-tagcloud": "^0.6.1"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.14.0",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"enzyme": "^2.6.0",
"jest-cli": "^17.0.3",
"jsdom": "^9.4.0",
"lodash": "4.14.1",
"react-addons-test-utils": "^15.4.0",
"react-native": "^0.38.0",
"react-test-renderer": "15.4.0",
"sinon": "^1.17.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"whatwg-fetch": "^2.0.1"
}
What am I missing? How do I get jest-resolve to find or mock deeper components?
I'm having the same issue as well. Some things I've attempted:
jest.unmock(module) at the top of the testing file
polyfill the module in a Jest setup file
jest.mock(jest.fn() => {console.log('do something'))
Lastly, and this seemed to work, but I can't find documentation on this:
At the top of the testing file:
/**
* #providesModule moduleName
*/
This seems to recognize the module I needed. Jest is supposed to implicitly see modules out of the box, but I haven't had that experience with it.
I had a similar problem in my jest tests, with an external dependency of webpack.
To solve that:
I create a __mocks__ folder in the same level if __test__ folder.
Inside that, I created a file with the same name of the dependency, in my case it was jquery ($.js).
Inside my test file, I use jest.mock function to reference the mock external dependency: jest.mock('$');
from jest the docs:
https://facebook.github.io/jest/docs/manual-mocks.html
Hope it could help.