Imports not working inside webpack

Question

I am new to webpack, so sorry if I am missing something super evident...

I have the following structure:

adex_js
   ---- app.jsx (entry point)
   ---- TestComponent.jsx

In app.jsx I have:

import TestComponent from './TestComponent'

I get:

ERROR in ./js/adex_js/app.jsx
Module not found: Error: Can't resolve './TestComponent' in '.........../asset_src/js/adex_js'

I have been told it might be related to the babel configuration... Here is my .babelrc:

{
   "env": {
     "production": {
      "plugins": [
        "transform-react-remove-prop-types",
        "transform-react-constant-elements"
      ]
    },
    "development": {
      "sourceMaps": "inline"
    },
    "test": {
      "plugins": [
        "istanbul"
      ],
      "sourceMaps": "inline",
      "presets": [
        [
          "env",
          {
            "targets": {
              "browsers": [
                "last 2 versions",
                "safari >= 7"
              ],
              "node": "current"
            },
            "useBuiltIns": true,
            "debug": true
          }
        ],
        "react",
        "stage-0"
      ]
    }
  },
  "plugins": [
    "transform-class-properties",
    "transform-runtime",
    "transform-object-rest-spread",
    "transform-decorators-legacy",
    "syntax-dynamic-import",
    "dynamic-import-node",
    "react-hot-loader/babel",
    [
      "react-css-modules",
      {
        "generateScopedName": "[name]__[local]___[hash:base64:5]"
      }
    ],
  ],
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "safari >= 7"
          ],
          "node": "current"
        },
        "modules": false,
        "useBuiltIns": true,
        "debug": false
      }
    ],
    "react",
    "stage-0"
  ]
}

And the babel section in the webpack config:

 {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    query: {
      plugins: [
        'transform-react-jsx',
        [
          'react-css-modules',
          {
            context,
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        ]
      ]
    }

Any idea of what could be causing the problem? I don't get any other errors, all seem to be well installed, importing react works fine, its only when importing from the file system that it fails...

Any hint would be really welcome!!!

Answer 1

Adding the extension worked, but a better solution was to add:

resolve: {
    extensions: ['.js', '.jsx'],
},

in my webpack config file, then I didnt need to add the extension in the import anymore...