Can't import React component from another file - reactjs

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',
},
};

Answer 1

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

Answer 2

Try to include your entire src folder in tsconfig include.

Answer 3

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.