Webpack won't resolve modules without .jsx extension despite resolve being set

Question

If I add .jsx to require('./StringOption') it works but I thought the resolve section of my webpack.config.js is supposed to allow me to require with no extension. What am I doing wrong?

Also why do I need ./ infront when it resides in the same directory as index.jsx?

Error message after running webpack:

ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'StringOption' in /Users/Mike/packages/chrome-extension-options/src
 @ ./src/index.jsx 5:19-42

index.js:

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var StringOption = require('./StringOption');

ReactDOM.render(<StringOption id="test" name="Test" />, document.getElementById('content'))

webpack.config.js file:

var path = require("path");

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'index.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader',
                exclude: /node_modules/
            }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    resolve: {
        extensions: ['', '*.js', '*.jsx']
    }
};

Directory structure:

- src/
  - index.jsx
  - StringOption.jsx
- dist/
  - index.js
  - react.js
  - react-dom.js

Have you tried `resolve: { extensions: ['', '.js', '.jsx'], }` See this question: http://stackoverflow.com/questions/34678314/webpack-cant-find-module-if-file-named-jsx — alex, Aug 27 '16 at 12:39
@alexi2 you're a genius. Thank you. I saw that post but failed to notice that they hadn't put asterisks. It works now that I have removed them. — punkrockbuddyholly, Aug 27 '16 at 12:43

score 0 · Answer 1 · answered Aug 27 '16 at 13:13

First of all ./StringOption says that it should search in the same directory. Unlike other places we need to specify from where we need to import a file in react jsx.

Secondly,

In resolve you need not use resolve explicitly, just use babel-loader or else use resolve as

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

or

module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }

score 0 · Answer 2 · answered Aug 27 '16 at 13:49

include the following in your webpack.config.js so that you need not to worry about js and jsx extension.

    loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            // include: __dirname + '/src',
            include: path.join(__dirname, '/src'),
            loader: 'babel-loader',
            query: {
                presets: ['react','es2015']
            }
       }]

Webpack won't resolve modules without .jsx extension despite resolve being set

Error message after running webpack:

index.js:

webpack.config.js file:

Directory structure:

2 Answers2