webpack can’t find module if file named jsx

by

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']
}

More Related Contents:

  1. Dynamically import images from a directory using webpack
  2. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  3. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  4. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  5. Dynamically Add Images React Webpack
  6. How to import and export components using React + ES6 + webpack?
  7. Remove console.logs with Webpack & Uglify
  8. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  9. How to tell webpack dev server to serve index.html for any route
  10. IMAGE: You may need an appropriate loader to handle this file type
  11. React Js require ‘fs’
  12. How to use Google fonts in React.js?
  13. Nextjs: Unable to load images from static folder
  14. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  15. How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
  16. How should I configure create-react-app to serve app from subdirectory?
  17. How to hash CSS class names in Nextjs?
  18. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  19. How to minimize the size of webpack’s bundle?
  20. combine react build output into single js file
  21. How to set build .env variables when running create-react-app build script?
  22. Importing images breaks jest test
  23. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  24. Webpack & Typescript image import
  25. How to bundle a React app to a subdirectory on a server?
  26. Unable to load images from static folder
  27. Preset files are not allowed to export objects
  28. Webpack how to build production code and how to use it
  29. React – Display loading screen while DOM is rendering?
  30. Media queries in MUI components

Leave a Comment