I'm suddenly getting this error in my code. I can't pinpoint what caused it, because when I went to bed it was working. When I started again in the morning, I suddenly got this error message:
abi35_0_0.com.facebook.react.common.javascriptexception: require is not defined
My project is fairly new, and I have mostly just been scaffolding. There is not much to show, but I have commented out any code that could potentially cause issue. I even went so far as to go back 3 or so commits, when the app was 100% working properly, yet the issue persists.
Digging around online suggests that babel may contain the issue, so here is my .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
],
"#babel/preset-react"
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"extensions": [
".ios.js",
".android.js",
".js",
".json"
]
}
],
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-export-default-from"
]
}
and babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
It's been several hours of scouring the internet for a solution, and I feel progress has stopped. Any help on this issue would be greatly appreciated.
Related
jest config is package json
"jest": { "preset": "react-native", "setupFiles": [ "<rootDir>/jestSetup.js" ], "collectCoverage": true, "transform": { "^.+\\.(ts|tsx|js|jsx)$": "ts-jest" }, "transformIgnorePatterns": [ "/node_modules/(?!(#react-native|react-native)/).*/" ] },
babel config is babel.config.js
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };
I tried to search for it on google but nothing similar. I managed to get rid of the error with a fix for another error but then the "other" error came and I already had the fix.
Do you guys encountered this issue, or do you have any idea how to solve it?
I also tried to create some simple tests and jest is working, but when I use it on the whole app I get this error
I fixed something similar by adding this to jest.config.js
transformIgnorePatterns: [
"node_modules/(?!(#react-native|react-native|react-native-modal|react-native-config|react-native-animatable|#balance-inc)/)"
]
Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0
I am trying to make my Vuejs application work on IE11. However, one node module (vue-directive-tooltip) throw an error on IE11:
Object doesn't support property or methode "replace"
The module is supposed to be IE11 compatible. I have tried to require the polyfill I need at the top of the entry point to my application. I have also tried to add the node module to the transpile dependencies.
vue.config.js:
require("#babel/polyfill");
configureWebpack: {
entry: ["#babel/polyfill", path.resolve(__dirname, "./src/main.js")],
}
babel.config.js:
module.exports = {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"browsers": [ ">0.25%"]
},
"useBuiltIns": "entry",
"debug": true
}
]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
};
I expect the vue-directive-tooltip to work on IE11, but the actual output is the following error message:
SCRIPT438: Object doesn't support property or method 'replace'.
Adding the classList.js reference in the index.html was the solution.
I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.
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
};