Question

我开始创建我的应用程序，因此我使用webpack实施了项目配置。项目结构为：

node_modules
public
|----bundle.js
|----index.html
src
|----app.jsx
|----index.jsx
|----components
     |-----appBar.jsx

webpack.config.jsx：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.jsx'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: true,
        port: 9000
    }
}

app.jsx：

import ButtonAppBar  from './components/appBar';
import React from 'react';


class App extends React.Component {
    render(){
        return (
            <div>
                <ButtonAppBar />
            </div>
        )
    }
};

export default App;

index.html：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'


ReactDOM.render(<App />, document.getElementById('app'));

package.json：

    "dependencies": {
    "@material-ui/core": "^1.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

我执行以下指令：

webpack --display-error-details

我收到此错误：

ERROR in ./src/index.jsx
Module not found: Error: Can't resolve './app' in '/home/user/Desktop/my_app/src'
resolve './app' in '/home/user/Desktop/my_app/src'
  using description file: /home/user/Desktop/my_app/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/user/Desktop/my_app/package.json (relative path: ./src/app)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/user/Desktop/my_app/src/app.json doesn't exist
      as directory
        /home/user/Desktop/my_app/src/app doesn't exist
[/home/user/Desktop/my_app/src/app]
[/home/user/Desktop/my_app/src/app.wasm]
[/home/user/Desktop/my_app/src/app.mjs]
[/home/user/Desktop/my_app/src/app.js]
[/home/user/Desktop/my_app/src/app.json]
 @ ./src/index.jsx 11:11-27

我发现了类似的问题，例如webpack: Module not found: Error: Can't resolve (with relative path)和Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

Answer 1

在index.js中，将文件扩展名添加到app。

import App from './app.jsx'

这是必需的，因为您没有在Webpack配置中添加resovle.extensions选项，因此它将搜索其中带有index.js的名为“ app”的文件夹。

Webpack Resolve Docs

Answer 2

为了解决您的问题，请将扩展名添加到webpack.config.js。

    module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

有关更多信息，请查看resolve.extensions

Answer 3

确保从同一文件夹导入的内容以“ ./”开头

示例：从“ ./component”中导入组件；

Answer 4

我遇到了类似的问题，可以按照以下步骤解决；

要获取有关错误类型Analytics.logEvent("Custom_Event", parameters: [ "name": name as NSObject, "full_text": text as NSObject ])的更多详细信息

此输出类似：“字段浏览器不包含有效的别名配置”

我编辑我的webpack --display-error-details

package.json这是我的js文件的路径

3.i编辑我的main: "./js/script.js"

settings.js

我编辑我的exports.themeLocation = './wp-content/themes/fictional-university-theme'-我将此行添加到module.exports

webpack.config.js

找不到模块：错误：无法解析“ / home / user / Desktop / my_app / src”中的“ ./app”

4 个答案: