webpack can't find module if file named jsx

Question

As I write webpack.config.js like this

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

And in index.jsx I import a react module App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

I find if I named module app in App.jsx, then webpack will say in index.jsx can't find module App, but if I named named module app in App.js, it will find this module and work well.

So, I'm confuse about it. In my webpack.config.js, I have writed test: /\.jsx?$/ to check file, but why named *.jsx can't be found?

Jeremy · Accepted Answer · 2017-02-16 05:11:01Z

259

Webpack doesn't know to resolve .jsx files implicitly. You can specify a file extension in your app (import App from './containers/App.jsx';). Your current loader test says to use the babel loader when you explicitly import a file with the jsx extension.

or, you can include .jsx in the extensions that webpack should resolve without explicit declaration:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

For Webpack 2, leave off the empty extension.

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

edited Feb 16, 2017 at 5:11

Jeremy

1633 silver badges14 bronze badges

answered Jan 8, 2016 at 13:47

max

6,0692 gold badges24 silver badges16 bronze badges

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

6 Comments

mr rogers Over a year ago

For webpack 4, I found that i needed to put this in one of the rules that were listed under module... { module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }

Frederik Sohnis Over a year ago

@mrrogers I've searched everywhere for this! I tip my hat to you sir!

KevinH Over a year ago

thank you sooo much! I was looking for that for hours!

Alexander Varwijk Over a year ago

@mrrogers Consider promoting your comment to an answer :)

C-Dev Over a year ago

@mrrogers Thank you! This solution also works for webpack 5!

|

Richard Vanbergen · Accepted Answer · 2018-09-28 08:24:33Z

48

In the interest of readability and copy-paste coding. Here is the webpack 4 answer from mr rogers comment in this thread.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

answered Sep 28, 2018 at 8:24

Richard Vanbergen

1,9641 gold badge17 silver badges30 bronze badges

1 Comment

Alexey Berezkin Over a year ago

From 4.36.1 to be precise. Here's the doc webpack.js.org/configuration/module/#ruleresolve

Shea Hunter Belsky · Accepted Answer · 2018-11-19 04:58:07Z

29

Adding to the above answer,

The resolve property is where you have to add all the file types you are using in your application.

Suppose you want to use .jsx or .es6 files; you can happily include them here and webpack will resolve them:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

If you add the extensions in the resolve property, you can remove them from the import statement:

import Hello from './hello'; // Extensions removed
import World from './world';

Other scenarios like if you want coffee script to be detected you should configure your test property as well like:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

edited Nov 19, 2018 at 4:58

Shea Hunter Belsky

3,3182 gold badges22 silver badges33 bronze badges

answered Apr 29, 2016 at 6:15

Ignatius Andrew

8,2643 gold badges56 silver badges54 bronze badges

1 Comment

Julio Spader Over a year ago

In WebPack 3.4, you can't use resolve.extension with value empty. This will cause an exception in the compilation: "Invalid configuration object. Webpack has been initialised using configuration object that does not match the API schema. - configuration.resolve.extensions[0] should not be empty."

mr rogers · Accepted Answer · 2019-02-10 00:15:42Z

14

As mentioned in the comments on the answer from @max, for webpack 4, I found that I needed to put this in one of the rules that were listed under module, like so:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}

answered Feb 10, 2019 at 0:15

mr rogers

3,2601 gold badge22 silver badges33 bronze badges

Comments

rluks · Accepted Answer · 2016-11-24 15:02:31Z

2

Verify, that bundle.js is being generated without errors (check the Task Runner Log).

I was getting 'can't find module if file named jsx' due to the syntax error in html in component render function.

answered Nov 24, 2016 at 15:02

rluks

2,9029 gold badges40 silver badges58 bronze badges

Comments

Binita Bharati · Accepted Answer · 2021-03-29 11:00:04Z

I faced similar issue with imports while building my typescript project having the following webpack dependencies:

"webpack": "^5.28.0",
"webpack-cli": "^4.5.0"

So, I had a App.tsx file present in the correct path and exported with named export. But, yarn build was failing with Module not found: Error: Can't resolve './App' in '/app/sample_proj/src'. The relevant code for this error is: import {App} from './App';. To fix this, I had to add .tsx under webpack known extensions. Sample entry from webpack.config.js is :

 module.exports = {
       ......
       resolve: {
            extensions: [ '.ts', '.js', '.tsx', '.jsx'],
        }
     }

Also, for this error, it does not matter, if the imports are default or named. webpack only needs to know the kind of file extensions it should deal with.

just-be-weird · Accepted Answer · 2018-10-14 13:23:17Z

1

I was facing similar issue, and was able to resolve using resolve property.

const path = require('path');
module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname,'public'),
        filename:  'bundle.js'
    },
    module : {
        rules: [{
            loader: 'babel-loader',
            test: /\.jsx$/,
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

As You can see I have used .jsx in there which resolved following error

ERROR in ./src/app.jsx Module not found: Error: Can't resolve

For Reference: https://webpack.js.org/configuration/resolve/#resolve-extensions

answered Oct 14, 2018 at 13:23

just-be-weird

1,31010 silver badges10 bronze badges

Comments

Savio Sebastian · Accepted Answer · 2020-10-27 19:48:27Z

-5

I found restarting my server fixed this issue. simply run

npm start

answered Oct 27, 2020 at 19:48

Savio Sebastian

7810 bronze badges

2 Comments

Brittan McGinnis Over a year ago

While restarting your server should always be tried, that is only restarting the server and not dealing with the current problem.

Leonidas Over a year ago

In fact this solution solved my problem. For a create-react-app application where changing webpack code is not an option, this was the solution.

Collectives™ on Stack Overflow

webpack can't find module if file named jsx

8 Answers 8

6 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related