Warning: React.createElement: type is invalid -- expected a string
nakamn opened this issue · comments
Trying to get react-checkbox-tree(1.6.0) to play nicely, but getting the following error in the browser console:
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
index.js
import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
const nodes = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
}];
class Widget extends React.Component {
state = {
checked: [],
expanded: [],
};
render() {
return (
<CheckboxTree
nodes={nodes}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
);
}
}
export default Widget;
Interesting. There does not seem to be any issue in the code you have written.
Have you used a previous version and had any errors?
I suspect that the bundler you are using (e.g., Webpack) may not be resolving the library correctly. Can you point to a live example with this error or modify this reference point?
Hey,
Any update guys? I'm using webpack
too and have this problem.
But no issues with any other libs.
Should I change my webpack or in what way can I make it work?
Here is mine webpack:
const path = require("path");
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const entries = {};
const srcDir = path.join(__dirname, "src");
fs.readdirSync(srcDir)
.filter(dir => fs.statSync(path.join(srcDir, dir)).isDirectory())
.forEach(dir => (entries[dir] = "./" + path.join("src", dir, dir)));
module.exports = {
target: "web",
entry: entries,
node: {
fs: "empty"
},
output: {
filename: "[name]/[name].js",
},
devtool: "inline-source-map",
context: __dirname,
devServer: {
https: true,
port: 3000,
publicPath: "/dist/"
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {
"azure-devops-extension-sdk": path.resolve(
"node_modules/azure-devops-extension-sdk"
)
}
},
stats: {
warnings: true,
errorDetails: true
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader"
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"azure-devops-ui/buildScripts/css-variables-loader",
"sass-loader"
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.woff$/,
use: [
{
loader: "base64-inline-loader"
}
]
},
{
test: /\.html$/,
use: "file-loader"
}
]
},
plugins: [new CopyWebpackPlugin([{ from: "**/*.html", context: "src" }])]
};
Hello @kutsyk-neocles, is it possible for you to create a simplified repo that replicates this error?
I'm having same issue (react 16.13) + webpack (4.4.1)
Please re-open if this issue persists with the latest version and include a repo/codepen that replicates it.