React-datepicker: Invariant Violation. type is invalid

Created on 5 Dec 2017  Â·  6Comments  Â·  Source: Hacker0x01/react-datepicker

I'm getting this error when testing component with react-datepicker inside. I generated new project with create-react-app-typescript. I have been stuck with this quite some time.

Test:

```javascript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DatePicker from 'react-datepicker';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(, div);
});
```

error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  at invariant (node_modules/fbjs/lib/invariant.js:42:15)
  at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:5753:5)
  at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:7531:23)
  at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:7635:35)
  at reconcileChildrenAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:7764:30)
  at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:7747:5)
  at updateHostRoot (node_modules/react-dom/cjs/react-dom.development.js:7940:9)
  at beginWork (node_modules/react-dom/cjs/react-dom.development.js:8227:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:10224:16)
  at workLoop (node_modules/react-dom/cjs/react-dom.development.js:10288:26)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:542:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:581:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:438:27)
  at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:10366:7)
  at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:11014:24)
  at performWork (node_modules/react-dom/cjs/react-dom.development.js:10967:7)
  at requestWork (node_modules/react-dom/cjs/react-dom.development.js:10878:7)
  at scheduleWorkImpl (node_modules/react-dom/cjs/react-dom.development.js:10732:11)
  at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:10689:12)
  at scheduleTopLevelUpdate (node_modules/react-dom/cjs/react-dom.development.js:11193:5)
  at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:11231:7)
  at node_modules/react-dom/cjs/react-dom.development.js:15226:19
  at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:11102:12)
  at renderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:15225:17)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:15290:12)
  at Object.<anonymous> (src/App.test.tsx:10:12)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
  at process._tickCallback (internal/process/next_tick.js:103:7)

✕ renders without crashing (75ms)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.711s, estimated 1s
Ran all test suites.

console.error node_modules/fbjs/lib/warning.js:33
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

console.error node_modules/react-dom/cjs/react-dom.development.js:9747
The above error occurred in one of your React components:

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
wontfix
Source
picture koodinorja
👍8

Most helpful comment

Hi Even I am facing the same issue.

I have the below webpack.config.js file :

```
module.exports = {
entry: "./Scripts/src/index.tsx",
output: {
    filename: "./wwwroot/Scripts/dist/bundle.js",
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".scss",".css", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" },
      {
  test: /\.s?css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'typings-for-css-modules-loader',
      options: {
        sass: false,
        modules: true,
        camelCase: true,
        importLoaders: 1,
        namedExport: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
      }
    },

  ]
},
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader?&name=fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=images/[name].[ext]' },
    ],
}
}

I have the below tsconfig.json file:

{
"compilerOptions": {
"outDir": "./Scripts/",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"jsx": "react",
"lib": [ "es5", "es6", "dom" ]
},
"exclude": [
"node_modules",
"wwwroot"
]

}

My Package.json looks like:

{
"name": "react-typescript-vs",
"version": "1.0.0",
"description": "React TypeScript VS 2017",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack"
},
"keywords": [
  "abhilash",
  "react",
  "typescript",
  "vs2017"
],
"author": "Abhilash D K",
"license": "ISC",
"dependencies": {
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-scripts-ts": "2.8.0",
  "typed-css-modules-loader": "0.0.11",
  "typescript": "^2.6.2",
  "webpack": "^3.10.0"
},
"devDependencies": {
  "@types/jest": "^21.1.8",
  "@types/node": "^8.0.54",
  "@types/react": "^16.0.27",
  "@types/react-dom": "^16.0.3",
  "autoprefixer": "7.1.6",
  "case-sensitive-paths-webpack-plugin": "2.1.1",
  "chalk": "1.1.3",
  "css-loader": "0.28.7",
  "dotenv": "4.0.0",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.0.1",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",
  "extract-text-webpack-plugin": "3.0.2",
  "file-loader": "1.1.5",
  "fs-extra": "3.0.1",
  "html-webpack-plugin": "2.29.0",
  "jest": "20.0.4",
  "object-assign": "4.1.1",
  "postcss-flexbugs-fixes": "3.2.0",
  "postcss-loader": "2.0.8",
  "promise": "8.0.1",
  "prop-types": "^15.6.0",
  "radium": "^0.19.6",
  "raf": "3.4.0",
  "react": "^16.1.0",
  "react-dev-utils": "^4.2.1",
  "react-dom": "^16.1.0",
  "sass-loader": "^6.0.6",
  "source-map-loader": "^0.2.3",
  "style-loader": "0.19.0",
  "sw-precache-webpack-plugin": "0.11.4",
  "ts-loader": "^3.2.0",
  "typings-for-css-modules-loader": "^1.7.0",
  "url-loader": "0.6.2",
  "webpack-manifest-plugin": "1.3.2",
  "whatwg-fetch": "2.0.3"
}
}

I have a Scripts/src folder. Under which I have a components folder with Hello.tsx with below content :

import * as React from "react";
export interface IHelloProps {
    text: string;
}
export class Hello extends React.Component<IHelloProps, {}> {
    render() {
        return(<div>{this.props.text}</div>);
    }
}

Under Scripts/src folder I have a index.tsx file with below content:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";

ReactDOM.render(
    <div>
        <Hello text="Hello from React Typescript...." />
    </div>,
    document.getElementById('app')
);

```
Everything works fine. Now I will add Hello.css file with .textColor { color: azure } as it's content and i don't even use it. When I run webpack and try to access index.html I get the below error :

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I tried adding module: commonjs as well as module : es6 to tsconfig.json. Still same error.

Could somebody explain me what is the problem and give me a solution for the same.

Thanks in Advance.

picture abhilashdk2016 on 6 Dec 2017
👍3

All 6 comments

Hi Even I am facing the same issue.

I have the below webpack.config.js file :

```
module.exports = {
entry: "./Scripts/src/index.tsx",
output: {
    filename: "./wwwroot/Scripts/dist/bundle.js",
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".scss",".css", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" },
      {
  test: /\.s?css$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'typings-for-css-modules-loader',
      options: {
        sass: false,
        modules: true,
        camelCase: true,
        importLoaders: 1,
        namedExport: true,
        localIdentName: '[name]__[local]__[hash:base64:5]',
      }
    },

  ]
},
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader?&name=fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=images/[name].[ext]' },
    ],
}
}

I have the below tsconfig.json file:

{
"compilerOptions": {
"outDir": "./Scripts/",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"jsx": "react",
"lib": [ "es5", "es6", "dom" ]
},
"exclude": [
"node_modules",
"wwwroot"
]

}

My Package.json looks like:

{
"name": "react-typescript-vs",
"version": "1.0.0",
"description": "React TypeScript VS 2017",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack"
},
"keywords": [
  "abhilash",
  "react",
  "typescript",
  "vs2017"
],
"author": "Abhilash D K",
"license": "ISC",
"dependencies": {
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-scripts-ts": "2.8.0",
  "typed-css-modules-loader": "0.0.11",
  "typescript": "^2.6.2",
  "webpack": "^3.10.0"
},
"devDependencies": {
  "@types/jest": "^21.1.8",
  "@types/node": "^8.0.54",
  "@types/react": "^16.0.27",
  "@types/react-dom": "^16.0.3",
  "autoprefixer": "7.1.6",
  "case-sensitive-paths-webpack-plugin": "2.1.1",
  "chalk": "1.1.3",
  "css-loader": "0.28.7",
  "dotenv": "4.0.0",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.0.1",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",
  "extract-text-webpack-plugin": "3.0.2",
  "file-loader": "1.1.5",
  "fs-extra": "3.0.1",
  "html-webpack-plugin": "2.29.0",
  "jest": "20.0.4",
  "object-assign": "4.1.1",
  "postcss-flexbugs-fixes": "3.2.0",
  "postcss-loader": "2.0.8",
  "promise": "8.0.1",
  "prop-types": "^15.6.0",
  "radium": "^0.19.6",
  "raf": "3.4.0",
  "react": "^16.1.0",
  "react-dev-utils": "^4.2.1",
  "react-dom": "^16.1.0",
  "sass-loader": "^6.0.6",
  "source-map-loader": "^0.2.3",
  "style-loader": "0.19.0",
  "sw-precache-webpack-plugin": "0.11.4",
  "ts-loader": "^3.2.0",
  "typings-for-css-modules-loader": "^1.7.0",
  "url-loader": "0.6.2",
  "webpack-manifest-plugin": "1.3.2",
  "whatwg-fetch": "2.0.3"
}
}

I have a Scripts/src folder. Under which I have a components folder with Hello.tsx with below content :

import * as React from "react";
export interface IHelloProps {
    text: string;
}
export class Hello extends React.Component<IHelloProps, {}> {
    render() {
        return(<div>{this.props.text}</div>);
    }
}

Under Scripts/src folder I have a index.tsx file with below content:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";

ReactDOM.render(
    <div>
        <Hello text="Hello from React Typescript...." />
    </div>,
    document.getElementById('app')
);

```
Everything works fine. Now I will add Hello.css file with .textColor { color: azure } as it's content and i don't even use it. When I run webpack and try to access index.html I get the below error :

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I tried adding module: commonjs as well as module : es6 to tsconfig.json. Still same error.

Could somebody explain me what is the problem and give me a solution for the same.

Thanks in Advance.

abhilashdk2016 picture abhilashdk2016 on 6 Dec 2017
👍3

Hi,

I'm having the same issue too. In my case I'm using Jest + Enzyme. Any clue to solve it?

Thanks.

carlostxm picture carlostxm on 1 Mar 2018

I'm experiencing the same issue. I see this error when building with webpack, specifically when using the following in the _plugins_ array: new webpack.optimize.ModuleConcatenationPlugin(). When I remove that plugin, everything works just fine. I believe this plugin is added automatically when the config's _mode_ is set to "production"

CallidusAsinus picture CallidusAsinus on 3 Jul 2018

Anyone have any update on this issue. Still i am facing the same issue

eshugoel24 picture eshugoel24 on 16 Nov 2018

So far I found only one solution to that problem, well two. jest.mock and ignore the component or edit the index.js and where modules.exports = DatePicker is add modules.exports.default = DatePicker if anyone figured out how to do it better way let me know I need that functionality in my tests!

Jerczu picture Jerczu on 6 Feb 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 30 Aug 2019
👎2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tamitutor picture tamitutor  Â·  3Comments
rsouthpaw picture rsouthpaw  Â·  3Comments
jcabrerazuniga picture jcabrerazuniga  Â·  3Comments
ericreis picture ericreis  Â·  3Comments
pinturic picture pinturic  Â·  3Comments