Can't import React component from another file

Question

I'm new to react and I'm having issues with importing a component from another file.

import React from 'react';
import ReactDOM from 'react-dom';
import '../resources/styles.scss';
import WelcomeView from '../views/welcome/WelcomeView';

const Root: React.FC = () => {
  return (
    <div>
      <WelcomeView />
    </div>
  );
};

ReactDOM.render(<Root />, document.getElementById('root'));

With the above code, I get this error: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I've been googling this for hours and everyone has been saying that it's an import issue, but I think I'm using my exports correctly.

Here is the WelcomeView component which I'm trying to import from another file:

import styles from './WelcomeView.scss';
import React from 'react';

const WelcomeView: React.FC = () => {
  return (
    <div className={styles.welcome}>
      Welcome
    </div>
  );
};

export default WelcomeView;

If I inline WelcomeView in the same file as my Root component, then it works. But doesn't work when it's in a separate file. I think it might have something to do with my tsconfig?

{
  "compilerOptions": {
    "esModuleInterop": true,
    "isolatedModules":true,
    "jsx": "react",
    "lib": ["esnext", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "noEmit": true,
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "strict": true,
    "incremental": true,
    "noFallthroughCasesInSwitch": true

  },
  "include": ["frontend/src/root/app.tsx"],
}

My package.json dependencies:

  "devDependencies": {
    "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.2.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.1",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "typescript": "^4.1.2",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }

Webpack:

const path = require('path');

module.exports = {
  entry: './frontend/src/root/root.tsx',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          '@teamsupercell/typings-for-css-modules-loader',
          'css-loader?modules',
          'sass-loader',
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        loader: 'awesome-typescript-loader',
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['@babel/env'] },
      },
    ],
  },
  resolve: { extensions: ['*', '.css', '.scss', '.ts', '.tsx', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, 'frontend/public/'),
    filename: 'bundle.js',
  },
};

Can you extend on your code? There's nothing wrong with what you have posted. And I don't think this is anything to do with tsconfig. — Dean James, Dec 04 '20 at 00:15
I've added the rest and also my dependencies in case any of them are old. — phantomesse, Dec 04 '20 at 00:32

score 0 · Answer 1 · answered Dec 04 '20 at 00:18

0

It may be caused by re-importing the relevant component or by different case among the connected components.

answered Dec 04 '20 at 00:18

hoony

1
3

score 0 · Answer 2 · answered Dec 04 '20 at 01:29

0

Try to include your entire src folder in tsconfig include.

answered Dec 04 '20 at 01:29

Michiel de Vos

171
8

Hmm that's a good thought. I changed it to `"include": ["frontend/src/**/*"]` but I'm still getting the same error. – phantomesse Dec 04 '20 at 04:19

score 0 · Answer 3 · answered Dec 04 '20 at 04:41

0

Okay this is kind of underwhelming, but it turns out the files were corrupt since I'm using OSX. I figured it out from this question: webpack --watch isn't compiling changed files

I just deleted all the files and then recreated them and it worked.

answered Dec 04 '20 at 04:41

phantomesse

251
2
10

Did you do this after you changed the include key? – Michiel de Vos Dec 04 '20 at 08:50
Yes but just changing the include key didn't work for me. – phantomesse Dec 05 '20 at 02:06

Can't import React component from another file

3 Answers3