javascript - Exported function is undefined - Stack Overflow

admin管理员组

文章数量:1313789

I'm facing an issue with my Mocha tests in Typescript, I fear it is related to Babel, but I am really not sure what's happening.

Essentially, I have a function that is being exported in a file

// src/my-ts-lib/tests/ponents/factoryMocks/ponentConfigMocks.ts

...

export function getRandomConfig(type?: string): ComponentConfig {
  const randomComponentType = type || randomType();
  return {
    type: randomComponentType,
    config: configLibrary[randomComponentType]
  }
}

And being imported in another, which is being called by a test:

// src/my-ts-lib/tests/ponents/RouteComponent/mocks/routeMocks.ts

...

import { getRandomConfig } from '../../factoryMocks/ponentConfigMocks';

..

export const getSingleRouteConfigMock = (ponentType?: string): RouteProps => {
  const defaultComponentType = 'PageLayout';
  return {
    childComponent: {
      type: ponentType || defaultComponentType,
      config: getRandomConfig(ponentType || defaultComponentType)
    },
    pageName: randomString(),
    path: randomString(),
  };
};

...

When running the tests, I get the following error:

RouteCompnent/mocks/routeMocks.ts:10
      config: getRandomConfig(ponentType || defaultComponentType),
                                           ^
TypeError: ponentConfigMocks_1.getRandomConfig is not a function
    at Object.exports.getSingleRouteConfigMock (/Users/.../routeMocks.ts:10:44)

If I ment the call and console.log(getRandomConfig) I can see that it is undefined. I do not know why this is happening. What's even weirder is that, in subsequent tests that call getSingleRouteConfigMock, this same console.log correctly outputs the function, meaning that it has been exported then.

I've fiddled around with Babel, Mocha, and Typescript configs but have had no success.

Here's the Babel config:

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

The Mocha config:

mocha.opts

--require ts-node/register
--watch-extensions ts tsx
--require source-map-support/register
--recursive
--require @babel/register
--require @babel/polyfill
src/**/*.spec.**

And the Typescript config:

tsconfig.json

{
   "pilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": false,
     "module": "monjs",
     "target": "es6",
     "jsx": "react"
   },
   "include": [
     "./src/**/*"
   ],
   "exclude": [
     "./src/**/*.spec.ts",
     "./src/my-ts-lib/ponents/**/*.spec.tsx",
     "./src/my-ts-lib/test-helpers/*"
   ],
 }

And the relevant sections of the package.json

...
"dependencies": {
  ...
  "@babel/polyfill": "7.2.x",
  ...
},
"devDependencies": {
  "@babel/core": "7.2.x",
  "@babel/preset-env": "7.2.x",
  "@babel/preset-react": "7.0.x",
  "@babel/register": "7.0.x",
  "babel-loader": "8.x",
  "mocha": "3.2.x",
  ...
}

I'm facing an issue with my Mocha tests in Typescript, I fear it is related to Babel, but I am really not sure what's happening.

Essentially, I have a function that is being exported in a file

// src/my-ts-lib/tests/ponents/factoryMocks/ponentConfigMocks.ts

...

export function getRandomConfig(type?: string): ComponentConfig {
  const randomComponentType = type || randomType();
  return {
    type: randomComponentType,
    config: configLibrary[randomComponentType]
  }
}

And being imported in another, which is being called by a test:

// src/my-ts-lib/tests/ponents/RouteComponent/mocks/routeMocks.ts

...

import { getRandomConfig } from '../../factoryMocks/ponentConfigMocks';

..

export const getSingleRouteConfigMock = (ponentType?: string): RouteProps => {
  const defaultComponentType = 'PageLayout';
  return {
    childComponent: {
      type: ponentType || defaultComponentType,
      config: getRandomConfig(ponentType || defaultComponentType)
    },
    pageName: randomString(),
    path: randomString(),
  };
};

...

When running the tests, I get the following error:

RouteCompnent/mocks/routeMocks.ts:10
      config: getRandomConfig(ponentType || defaultComponentType),
                                           ^
TypeError: ponentConfigMocks_1.getRandomConfig is not a function
    at Object.exports.getSingleRouteConfigMock (/Users/.../routeMocks.ts:10:44)

If I ment the call and console.log(getRandomConfig) I can see that it is undefined. I do not know why this is happening. What's even weirder is that, in subsequent tests that call getSingleRouteConfigMock, this same console.log correctly outputs the function, meaning that it has been exported then.

I've fiddled around with Babel, Mocha, and Typescript configs but have had no success.

Here's the Babel config:

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

The Mocha config:

mocha.opts

--require ts-node/register
--watch-extensions ts tsx
--require source-map-support/register
--recursive
--require @babel/register
--require @babel/polyfill
src/**/*.spec.**

And the Typescript config:

tsconfig.json

{
   "pilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": false,
     "module": "monjs",
     "target": "es6",
     "jsx": "react"
   },
   "include": [
     "./src/**/*"
   ],
   "exclude": [
     "./src/**/*.spec.ts",
     "./src/my-ts-lib/ponents/**/*.spec.tsx",
     "./src/my-ts-lib/test-helpers/*"
   ],
 }

And the relevant sections of the package.json

...
"dependencies": {
  ...
  "@babel/polyfill": "7.2.x",
  ...
},
"devDependencies": {
  "@babel/core": "7.2.x",
  "@babel/preset-env": "7.2.x",
  "@babel/preset-react": "7.0.x",
  "@babel/register": "7.0.x",
  "babel-loader": "8.x",
  "mocha": "3.2.x",
  ...
}

• javascript
• typescript
• mocha.js
• babeljs
• monjs

Share Improve this question Follow edited Mar 20, 2019 at 12:18 Avery 2,29344 gold badges3333 silver badges3535 bronze badges asked Mar 20, 2019 at 11:07 Edgar PassosEdgar Passos 11111 silver badge55 bronze badges 2

• import { getRandomConfig } aren't you exporting a single function not an object? – VLAZ Commented Mar 20, 2019 at 11:21
• There are other functions being exported in the same file (ponentConfigMocks.ts). If I'm not mistaken, this - import { foo } from ... - is the way to import an export that is not default, whether it is an object or not. – Edgar Passos Commented Mar 20, 2019 at 11:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

I found out I have a circular dependency. That's why this was not working.

Another possible cause for this symptom is that the function is actually missing in the module when you use a bundler like Parcel in production mode and it removes unused items (that particular issue discussed at Empty Javascript File When Building With Parcel JS 2 ). Check the piled module file and make sure that the name exists.

For me, I was quitting our development app and deleting node_modules/.cache to ensure Babel was cleared - but somehow that wasn't enough to avoid this.

The issue finally resolved after I did the above and killed all node processes.

本文标签： javascriptExported function is undefinedStack Overflow