CODEWITHSUNDEEP
javascriptreactjstypescriptwebpackcreate-react-app
Jaro
Jaro

Reputation: 1687

Importing Webpack-Compiled React Component

I am working with create-react-app ReactJs basic application generator and typescript which is transpiled by webpack.

When I import the App.js component (compiled App.tsx component) in the index.js file, i get this error in the browser :

enter image description here

Thing is webpack isn't throwing any error so I suppose the matter is with reactjs or react-dev-server not understanding how to interprete a component with the webpack compile file format.

Here are my App.tsx, index.js and webpack.config.js files.

App.tsx

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './compiled/App';
import registerServiceWorker from './registerServiceWorker';

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

webpack.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = env => {

    const dev = env.NODE_ENV === 'dev'

    return 
    {
        mode: 'none',
        entry: "./client/src/App.tsx",
        output: {
            path: path.resolve(__dirname + '/client/src', 'compiled'),
            filename: 'App.js'
        },
        watch: dev,
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: /\.tsx?$/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                }
            ]
        }
    }
}

Upvotes: 0

Views: 1196

Answers (1)

Jaro
Jaro

Reputation: 1687

Finally found out that this i caused because i use create-react-app. Instead of it and since i was using webpack, i used webpack-dev-server to mimicate the create-react-app hot reload server.

This worked like a charm.

My issue has been solved. Good day and thank you

Upvotes: 1

Related Questions