Search code examples
typescriptnpmwebpacktsx

webpack can't find src, but it shouldn't be looking for it


I am trying to understand how to use typescript with React. I'm looking through this tutorial: https://blog.logrocket.com/how-why-a-guide-to-using-typescript-with-react-fffb76c61614

when I run the webpack command via npm script "pile" defined below in my package.json, I am getting: ERROR in Entry module not found: Error: Can't resolve './src' in '/my/home/directory/projects/tsx-tutorial'

Here is the directory structure of my project folder:

tsx-tutorial
├── app.tsx {<---- I want this to be my entry point right?}
├── dist
├── index.html
├── index.ts
├── lookTree.txt
├── node_modules.zip
├── package-lock.json
├── package.json
├── src {<----- there it is??}
│   └── hello.ts
├── tsconfig.json
└── webpack.config.js

2 directories, 10 files

and here is my webpack.config.js:

var path = require("path");
var config = {
  entry: "app.tsx", // I'm not doing anything with ./src at all here??
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  }
};

I'm not asking for anything with 'src' in it, period - why is it looking there? I feel like I'm missing something really basic.

Finally the package.json:

{
  "name": "tsx-tutorial",
  "version": "0.0.1",
  "description": "to help me learn tsx-fu",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pile": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^4.4.1",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "@types/react": "^16.4.1",
    "@types/react-dom": "^16.0.6",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

I greatly appreciate your help! Thank you for helping a novice learn.


Solution

  • Though it looks like you've given it a config, the file needs to export it at the bottom in order for webpack to see it.

    module.exports = config
    

    To explain the error: since version 4, webpack uses ./src as an entry point by default if a config is not specified. ./src acts the same as ./src/index.js due to how module resolution works, however the filename and extension are configurable.