I know there were similar questions but none of them solved my problem.
When I run karma test it throws the following error, every time it tries to load a module, that was shimmed with browserify-shim:
TypeError: 'undefined' is not an object (evaluating 'module.exports = ex')
at /tmp/8ff1e03f7ba1f9c70ee4192510d267a2.browserify:3855:0 <- lib/underscore/underscore.js:1421:0
My karma.conf.js is the following:
module.exports = function(karma) {
karma.set({
frameworks: [ 'jasmine', 'browserify' ],
files: [
'test/spec/**/*Spec.js'
],
reporters: [ 'dots' ],
preprocessors: {
'test/spec/**/*Spec.js': [ 'browserify' ]
},
browsers: [ 'PhantomJS' ],
logLevel: 'LOG_DEBUG',
singleRun: true,
autoWatch: false,
// browserify configuration
browserify: {
debug: true,
transform: [ 'reactify', 'browserify-shim' ]
}
});
};
And here is the relevant part of my package.json file:
...
"browser": {
"underscore": "./lib/underscore/underscore.js",
"jquery": "./lib/jquery/dist/jquery.js",
"typeahead": "./lib/bootstrap3-typeahead/bootstrap3-typeahead.js",
"bootstrap": "./lib/bootstrap/dist/js/bootstrap.js",
"q": "./lib/q/q.js"
},
"browserify-shim": {
"underscore": "_",
"jquery": "jQuery",
"typeahead": {
"depends": [
"jquery"
]
}
},
"browserify": {
"transform": [
"browserify-shim"
]
},
....
Any idea what can caus the problem?
I had the same problem and have resolved it by removing the browserify-shim transform from karma configuration file, since it is already declared as a transform on package.json file.
Hope that helps.
Related
Getting SourceMap position not found for trace. I am trying to build a unit test framework using typescript, mocha, karma, and karma-typescript and getting the following issue.
I tried using karma-sourcemap-loader but still, there is no luck. Can anyone please guide me on what am I missing here?
karma-typescript should be able to handle these source map things by themself in between multiple transformations.
Fetching /Users/test/sourcecode/test-web-ui/node_modules/karma-typescript/dist/client/commonjs.js
17 08 2021 23:47:06.959:DEBUG [web-server]: serving (cached): /Users/raukumar/sourcecode/test-web-ui/node_modules/karma-typescript/dist/client/commonjs.js
17 08 2021 23:47:07.357:WARN [reporter]: SourceMap position not found for trace: Uncaught Error: Can't find #react/react-spectrum/Button [undefined] (required by /Users/test/sourcecode/elements-web-ui/src/editors/doc/stage/actions/StageActionsView.tsx)
at http://localhost:9882/base/node_modules/karma-typescript/dist/client/commonjs.js?f5014f1e344ba3e2f0d92afe67b92f3001c46c90:13:17
I tried this solution SourceMap position not found for trace: AssertionError (Karma-Typescript) but after this, I am getting some different issues.
Uncaught Error: Can't find #react/react-spectrum/Button [undefined] (required by /Users/test/sourcecode/src/somefile.tsx
Karma.conf
module.exports = (config) => {
config.set({
// basePath: '',
//configFile: join(__dirname, "testing.tsconfig.json"),
plugins: ['karma-chrome-launcher', 'karma-mocha', 'karma-typescript', 'karma-webpack','karma-mocha-reporter','karma-sourcemap-loader'],
frameworks: ['mocha', 'karma-typescript'],
preprocessors: {
"**/*.ts": ["karma-typescript","sourcemap"],
"**/*.tsx": ["karma-typescript","sourcemap"], // *.tsx for React Jsx
'**/*.js': ["sourcemap"]
//"src/**/*.js": ["babel"]
},
logLevel: config.LOG_DEBUG,
browsers: ['Chrome'],
singleRun: true,
autoWatch: false,
color:true,
reporters: ["mocha", "karma-typescript"],
//files: [{ pattern: "src/**/*.ts" }, {pattern: "src/**/*.tsx" }, {pattern: "src/**/*.js"}],
files: [{ pattern: "src/**/!(*.spec).?(ts|tsx)" }, { pattern: "src/**/!(*.integration.spec).?(ts|tsx)" } ],
//webpack: webpackConfig,
karmaTypescriptConfig: {
// Allow tests to run even when there are compiler errors
stopOnFailure: true,
bundlerOptions: {
acornOptions: {
ecmaVersion: 8,
},
transforms: [
// eslint-disable-next-line #typescript-eslint/no-var-requires
require("karma-typescript-es6-transform")({
// eslint-disable-next-line #typescript-eslint/no-var-requires
//presets: [require("#babel/preset-env",{ "useBuiltIns": "entry"})],
//plugins: ['#babel/plugin-transform-spread'],
presets: [
["env", {
targets: {
browsers: ["last 2 Chrome versions"]
}
}]
]
})
]
},
compilerOptions: {
target: "ES2017",
lib: ['DOM', 'ES2015', 'ES2017'],
module: "CommonJS",
// Remove incompatible options
//incremental: false
},
tsconfig: "testing.tsconfig.json"
}
});
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"module": "CommonJS",
"incremental": true,
"noUnusedParameters": false,
"sourceMap": true,
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"declaration": true,
"declarationMap": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
},
"include": ["src/**/*.ts","src/**/*.tsx"],
"exclude": ["node_modules"]
}
Eslint stops working yet again..
{
"extends": ["airbnb"],
"root": true,
"parser": "babel-eslint",
"env": {
"browser": true
},
"plugins": [
"react-hooks",
"react"
],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
Using VSCODE Version: 1.47.0-insider
useEffect(() => {
someVarOutside
}, []);
The above should warn that someVarOutside is missing from dep array. react-hooks was working. Now it is not.
I would like to remove the #babel/plugin-proposal-class-properties plugin as we are now targeting chrome 79 which supports class properties. I would imagine that removing this plugin shouldn't be a problem because we no longer need babel to transpile that code.
When I remove the plugin from the plugins section of the babelrc file, I am getting an error -
Module build failed (from ./node_modules/babel-loader/lib/index.js), ...
"Support for the experimental syntax 'classProperties' isn't currently enabled "
Relevant Package.json entries:
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"webpack": "4.40.0",
Here is my .babelrc file
{
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"targets": {
"chrome": 79
}
}
],
"#babel/preset-typescript"
],
"plugins": [
"babel-plugin-styled-components"
]
}
Here is my webpack config, relevant loader configuration:
{
test: /\.(js(x)?|ts(x)?)$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
},
Any help or insight would be appreciated.
I have a eslint config file .eslintrc.json (could be .eslintrc) like this:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"airbnb-typescript-prettier"
],
"plugins": [
"#typescript-eslint"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"overrides": [
{
"files": ["*.js", "*.jsx"],
"processor": "babel-eslint"
}
],
"rules": {
"react/prop-types": 0,
"semi": ["error", "never"]
}
}
and I got a persistent error
Error: ESLint configuration of processor in '.eslintrc.json#overrides[0]' is invalid: 'babel-eslint' was not found
Although official eslint site suggest this configuration, you need to use parser property in the overrides instead of processor such as the following:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"parser": "babel-eslint"
}
],
...
With this change everything works pretty well.
I'm trying to run karma tests using karma, webpack and babel. I feel like I've configured properly but it seems that the test files are not being transpiled.
karma.conf:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
{pattern: 'src/**/*-test.js', watched: false}
],
exclude: [
],
preprocessors: {
'src/**/*-test.js': ['webpack']
},
webpack: require("./webpack.config.js"),
webpackMiddleware: {
stats: 'errors-only'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
webpack.config:
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.js')
],
output: {
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /(\/node_modules\/|test\.js$)/, use: 'babel-loader'},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=100000' }
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
My test file uses import syntax to import expect from chai and runs a simple test taht expects true is equal true but when I run the karma I'm getting
uncaught syntaxerror: unexpected token import
I've had a look at similar question:
Karma + Webpack (babel-loader) + ES6 "Unexpected token import"
but no luck. I'm sure it's something simple in my configs. Has anyone seen similar?
this is a new project so using latest packages, webpack2 etc.
Any ideas greatly appreciated
C