Invariant Violation. type is invalid

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:

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(<DatePicker onChange={e => {}}/>, 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.

[stale[bot]]

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.

[abhilashdk2016]

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.