I'd like to run mocha on a test directory. My tests are written in ES6, therefore I added babel to compile them. Although, even after adding all required modules, and adding a mocha.opts file inside of my test directory, I still get this error
{ import sinon from 'sinon';
^^^^^
SyntaxError: Unexpected identifier
mocha.opts :
--slow 2000
--timeout 15000
--require #babel/register
--recursive test/src
package.json command:
"test": "mocha"
modules :
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"#babel/register": "^7.4.0",
"#babel/runtime": "^7.3.4",
If anything, I also added a .babelrc file in my test directory
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"#babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
Did I miss something ?
I had exactly the same issue, and your question gave me the answer. My .babelrc file looks like this:
{
"presets": ["#babel/preset-env"],
"comments": false,
"env": {
"test": {
"presets": [
"#babel/preset-env"
]
},
// ...Other environment settings...
},
"plugins": ["#babel/plugin-transform-runtime"]
}
Removing the helpers and regenerator parameter worked for me.
Related
I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else
Hei,
I updated my npm packages, including parcel, and after the update I could not run my application anymore and keep getting the following error:
🚨 Build failed.
#parcel/transformer-js: This experimental syntax requires enabling one of the following parser plugin(s): 'classPrivateProperties, classPrivateMethods' (3:2)
My package.json looks like below:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "Klei Rama",
"license": "ISC",
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-proposal-private-methods": "^7.13.0",
"#parcel/transformer-sass": "^2.0.0-beta.2",
"parcel": "^2.0.0-beta.2",
"sass": "^1.32.8"
},
"dependencies": {
"fractional": "^1.0.0"
},
"plugins": [
"#babel/plugin-proposal-private-methods",
"#babel/plugin-proposal-class-properties"
]
}
I keep trying to delete node_modules, clear the cache, and delete package.json and then reinstall again but it does not work. I tried to use experimantal versions of parcel such as 2.0.0-beta.1 and 2.0.0-beta.2, but none of these version does not seem to work with experimental phase of babel plugins (class-properties and private-methods) (7.13.0). I was wondering if there is any certain version of babel plugins which can work either with parcel 2.0.0-beta.1 or 2.0.0-beta.2?
Hei you, install babel and the following plugins:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"
]
}
Of course, also, to file .babelrc.
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• 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://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};
I am a java developer for years and just new to the js world. This question sounds stupid but I don't know what's the proper/best way to build a dist for reactjs app for deploying to production(nginx/apache).
From my understanding, the dist just like simple web app and should looks like
contains:
index.html
client.js (bundled js after compiled)
static files, e.g.
images, css, js libraries, etc
I follow the guide on:
https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react
and have a simple web app(maybe this is not called web app) running by:
npm run dev
it uses webpack to bundles the client.js.min and deploy to a embedded web server by node(maybe i am wrong).
Question:
How to build all the things by a command, say "npm run build" and it should built everything in a folder called "dist". So I can deploy it to web server root by copying every in dist to the web root.
package.json
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
In your scripts dictionary of package.json add the following
"build" : "NODE_ENV='production' && node_modules/.bin/webpack -p"
This will tell webpack to read the config file and build it in production mode i.e minify etc etc. The -p flag does it. The node env is to ensure that production build are used for react and other libraries and to set an env variable of production for NODE_Env
To run type. npm run build
I have been trying to solve this problem since some days so any help is welcome
When testing my React Native app with Jest, I get the following error with the victory-native package:
SyntaxError: Unexpected token import
I visited many issues and questions which all seem to solve this problem by using the transformIgnorePatterns key for the jest config
The problem is when i use that, I get another error :
TypeError: Cannot set property '_currentElement' of undefined
Jest config
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|victory-native)/"
]
},
Babel
{
"presets": ["react-native"],
"sourceMaps": true,
"env": {
"test" : {
"presets": ["react-native"],
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
RN Version: 0.46.2
Jest Version: ^20.0.4
Test command: NODE_ENV=test jest --no-cache
I am completely clueless about this now so any tips or hints would also do.
Thanks in advance!