Error importing empty class, error TS2307: Cannot find module 'menu'

Question

I'm just trying to do import a simple, blank exported class. Im not sure why it can't find the file because it's in the same directory as the class importing it. I've searched google for similar error codes but no solutions have worked for me and its a relatively simple problem so im quite confused.

Error:

error TS2307: Cannot find module 'menu'

Folder structure:

node_modules/
src/
    entry.tsx
    menu.tsx
index.html
package-lock.json
package.json
tsconfig.json
webpack.config.js

entry.tsx

import menu from 'menu';

menu.tsx

export default class menu { }

webpack.config

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/entry.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [ 'css-loader' ]
        })
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
            filename: "bundle.css"
        }),
    new HtmlWebpackPlugin({
      title: 'Custom template',
      template: 'index.html'
    })
  ]
};

package.json

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "Hello there",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server",
    "build:prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "style-loader": "^0.19.0",
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "@types/react": "^16.0.13",
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

tdurtschi · Accepted Answer · 2017-10-18 19:52:10Z

5

I think Webpack tries to load Node packages if you don't include the relative path in your "include" lines.

Try changing this line in entry.tsx:

import menu from 'menu';

To this:

import menu from './menu';

answered Oct 18, 2017 at 19:52

tdurtschi

1511 silver badge4 bronze badges

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

3 Comments

Austin Ezell Over a year ago

Yes, this is correct. If you are not declaring relative pathing, it will assume the import is a separate module.

Shawn Andrews Over a year ago

Thanks it worked! So if i say 'menu' it looks in the node_modules folder instead?

Mike Cluck Over a year ago

@user1337604 Correct.

Collectives™ on Stack Overflow

Error importing empty class, error TS2307: Cannot find module 'menu'

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related