Typescript React Error

Question

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.

Try console.log the Hello component to see what you are getting. — Cleiton
– Cleiton, Commented Dec 6, 2017 at 20:04
I tried with export default too. But still got the same error. The problem was have the same filenames for both .tsx and .css files and the order of extensions in webpack.config file as specified by @dalinarkholin — Abhilash D K
– Abhilash D K, Commented Dec 6, 2017 at 20:24

dalinarkholin · Accepted Answer · 2017-12-06 20:07:38Z

3

Could have something to do with the way you are trying to import Hello.

Try:

import * as Hello from './components/Hello';

Edit:

Sorry I just saw what is wrong here. What you are importing from hello is not a React Component, it is an object that holds all your classes. so in your case it would look something like:

{
  textColor: "referenceToActualClassName"
}

So you wouldn't use it as:

<Hello>

but instead as

<div className={Hello.textColor}></div>

Let me know if that fixes it.

ANOTHER EDIT:

No...you probably do have a component there. The problem is your component file and styles file are both named Hello.

extensions: [".scss",".css", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]

Order matters here. So you are trying to import Hello from the css file. Be explicit with file extensions or rename the styles file to styles.css or theme.css or something.

edited Dec 6, 2017 at 20:07

answered Dec 6, 2017 at 19:45

dalinarkholin

762 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dalinarkholin Over a year ago

Changed my answer. Try that instead.

Abhilash D K Over a year ago

Changed the way of importing Hello and also Updated <Hello /> to <Hello.Hello />. Still same error.

dalinarkholin Over a year ago

Another Update. Think I have it now.

Abhilash D K Over a year ago

Thanks. I renamed the Hello.css file to HelloStyles.cs file. The error is gone. Now I try to import the style in Hello.tsx file as "import * as s from './HelloStyles.css'" But again getting the error as "Property 'textColor' does not exist on type HelloStyles.css. Sorry I am new to React. Could you tell me how to import the style. When I just tried import './HelloStyles.css' and apply className="textColor" no error but style is not applied. I also modified the ordering of extensions and kept .css and .scss at the end.

dalinarkholin Over a year ago

try: import HelloStyles from './components/HelloStyles'; then <div className={HelloStyles.textColor}></div>

|

Collectives™ on Stack Overflow

Typescript React Error

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related