Goal: To be able to use es6 import, export default, etc...
What I have done is include a .babelrc file in the root of my project which contains:
{
"presets": ["env", "react", "stage-0", "stage-1"],
"plugins": ["transform-object-rest-spread"]
}
I looked at the docs on babel and for node it said that all I would have to do is include the preset "env" which I do, but when I try to do an statement like:
import { data } from './data'
I get an unexpected token error on the import statement, so I assume I am not doing something correctly.
Typical webpack.config.js
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
...
]
}
I suggest you update .babelrc to the following.
{
"presets": [
[
"env",
{
"modules": false,
"loose": true
}
],
"react"
],
"plugins": [
"transform-object-rest-spread"
]
}
for more goodies decorators / function binding / class props etc,
{
"presets": [
[
"env",
{
"modules": false,
"loose": true
}
],
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-function-bind",
"transform-class-properties",
"transform-decorators-legacy",
]
}
Related
I have created a NX plugin/lib named nx.
The plugin's package.json defines the linting target:
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": [
"libs/nx/executors.json",
"libs/nx/package.json",
"libs/nx/src/executors",
"libs/nx/src/generators"
]
}
}
The .eslintrc.json is:
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"]
}
The extended .eslintrc.json is:
{
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["#nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
}
]
}
]
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:#nrwl/nx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:#nrwl/nx/javascript"],
"rules": {}
},
{
"files": "*.json",
"parser": "jsonc-eslint-parser",
"rules": {}
}
]
}
The problem is that the generator dir contains templates for generating ts apps and each app has its own .eslintrc.json file. So when I run linting for some reason it parses these files resulting in an error:
Failed to load config "../../.eslintrc.base.json" to extend from.
Referenced from:
[...]/libs/nx/src/generators/application/template/.eslintrc.json
I tried to update the ignorePatterns of my config
{
"ignorePatterns": ["!**/*", "**/*.eslintrc.json"]
}
but without success. How can I solve this problem?
I couldn't get rid of this SyntaxError: Cannot use import statement outside a module error no matter what I have tried and it got so frustrating.
Is there anybody out here solved this issue? I have read a million stackoverflow and github issue threads. No clear solutions.
The error I get is
Details:
/Users/brandi/Documents/workspaces/admin-v1/adminWebpack/vueSourceCode/test/__tests__/test.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { shallowMount } from '#vue/test-utils';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I have this setup:
jest.config.js
module.exports = {
moduleFileExtensions: [
'js', 'json', 'vue'
],
moduleNameMapper: {
'^~/(.*)$': '<rootDir>/vueSourceCode/$1',
'^#/(.*)$': '<rootDir>/vueSourceCode/$1'
},
modulePathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/build/',
'<rootDir>/config/'
],
transform: {
'^.+\\.js$': 'babel-jest',
'^[^.]+.vue$': 'vue-jest'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'<rootDir>/vueSourceCode/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
],
transformIgnorePatterns: [
'<rootDir>/node_modules/'
]
};
babelrc
{
"presets": [
"env",
"stage-2",
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"env": {
"test": {
"plugins": [
"#babel/plugin-transform-modules-commonjs",
"#babel/plugin-transform-runtime"
]
}
},
"test": [
"jest"
]
}
Any idea on how to resolve this problem?
I have a project using react-parcel-app as a template, and I'm trying to integrate Jest but I'm having the following error.
Details:
/home/papaponmx/Projects/prime/src/actions/goals.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { addGoal } from './goals.mjs';
This is what my .babelrc looks like.
{
"presets": [
[
"env",
{"modules": false},
{
"targets": {
"browsers": [
"last 2 versions"
]
}
}
],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"env": {
"testing": {
"presets": ["es2015", "stage-1", "react" ],
"plugins": [
"lodash",
"transform-runtime",
"transform-es2015-modules-commonjs",
"dynamic-import-node"
]
}
}
}
I understand that parcel is supposed to support ES Modules without configuration, but I don't get the test import s to work.
Here is the link to the repo in case you want to run it locally.
By the help of this article i come to a solution using babel.
Install these packages as dev dependencies:
npm i --save-dev babel-jest #babel/core #babel/preset-env
In the root level of your project, create a .babelrc file and add the following:
{presets:["#babel/preset-env"]}
Then you can use ES6 imports in your test files
I have a suite of tests are being run with jest.
- initFromProgressObject.test.js
- nodeifyProgressObject.test.js
- segments.test.js
- uuid.test.js
- volume.progress.test.js
- volume.segment.test.js
The command i use to run the tests is jest --notify. Here is the error I get in just 2 of the files:
/Users/bob/Developer/sedd/sedd-utils/src/tests/uuid.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as uuid from "../utils/uuid";
^^^^^^
SyntaxError: Unexpected token import
All of the files are using import, but only 2 of them are having this issue of Unexpected token import. On another question, I saw that it was important to set the env to test. I have tried that and it didn't change anything.
Here is my .babelrc:
{
"env": {
"es": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
},
"modules": false
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
},
"test": {
"presets": ["env"]
},
"cjs": {
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions"],
"node": "current"
}
}
]
],
"ignore": ["**/*.test.js", "**/tests/*"]
}
}
}
The jest config is just the default.
Any ideas?
Here is the full code: https://github.com/kenpeter/osmosis_drive_front
What I want to do is use element UI for my project. I follow this quick guide. There is a babelrc setting in it. I have difficult time to merge my babelrc with this one below. Anyone know how to merge these two babelrc and make Element UI working with Vuejs?
My babelrc:
{
"presets": [
"es2015",
"stage-2"
],
"plugins": [
"transform-runtime"
],
"comments": false
}
Element UI babelrc
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
This should do:
{
"presets": [
["es2015", { "modules": false }],
"stage-2"
],
"plugins": [
"transform-runtime",
["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]
],
"comments": false
}