如果名为jsx的文件,webpack找不到模块


107

当我这样写webpack.config.js时

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

index.jsx我导入一个react模块App

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

import App from './containers/App';

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

我发现是否在中命名了模块app App.jsx,然后webpack会在index.jsx中找到找不到模块App,但是如果我在中命名了模块app App.js,它将找到该模块并且运行良好。

所以,我对此感到困惑。在我的中webpack.config.js,我写test: /\.jsx?$/了检查文件,但是为什么*.jsx找不到命名的文件?

在此处输入图片说明

Answers:


214

Webpack不知道.jsx隐式解析文件。您可以在应用程序(import App from './containers/App.jsx';)中指定文件扩展名。您当前的加载程序测试表明,当您显式导入带有jsx扩展名的文件时,请使用babel加载程序。

或者,您可以.jsx在webpack不带显式声明的情况下将其解析为扩展名:

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

对于Webpack 2,不要使用空扩展名。

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

63
对于4的WebPack,我发现,我需要把这个在一个rule下上市,且s module...{ module: { rules: [ { test: /\.jsx?$/, resolve: { extensions: [".js", ".jsx"] }, include: ... } ] }
先生罗杰斯

1
@mrrogers我到处都在搜索!先生,我给你戴帽子!
Frederik Petersen

1
非常感谢你!我找了好几个小时!
KevinH

1
@mrrogers考虑提升您对评论的评论:)
Alexander Varwijk,

谢谢@AlexanderVarwijk。好主意。我本人已回到这些评论中以记住我必须做的事情:)
罗杰斯先生

24

除了上述答案,

解决财产,你必须全部添加要使用在应用程序的文件类型。

假设您要使用.jsx或.es6文件;您可以在这里愉快地添加它们,然后webpack将解决它们:

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

如果将扩展名添加到resolve属性中,则可以将其从import语句中删除:

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

其他情况(例如,如果要检测到咖啡脚本)也应配置测试属性,例如:

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

7
在WebPack 3.4中,不能使用带有空值的resolve.extension。这将在编译中引起异常:“无效的配置对象。已使用与API架构不匹配的配置对象初始化了Webpack。-configuration.resolve.extensions [0]不应为空。”
Julio Spader


10

正如@max的答案评论中提到的那样,对于Webpack 4,我发现我需要将其放入模块下列出的规则之一,如下所示:

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

1

我遇到了类似的问题,并且能够使用resolve属性来解决

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

如您所见,我在其中使用了.jsx,它解决了以下错误

找不到./src/app.jsx模块中的错误:错误:无法解决

供参考:https : //webpack.js.org/configuration/resolve/#resolve-extensions


0

验证bundle.js是否已正确生成(检查任务运行器日志)。

由于组件渲染功能中html中的语法错误,我得到了“如果文件名为jsx则找不到模块”。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.