Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 找不到模块"/map.jsx“;_Node.js_Reactjs_Webpack - Fatal编程技术网

Node.js 找不到模块"/map.jsx“;

Node.js 找不到模块"/map.jsx“;,node.js,reactjs,webpack,Node.js,Reactjs,Webpack,在使用react/webpack/node进行开发时,我使用“importmap from./Map.jsx';”或类似语句引用其他组件。然后我将其打包到一个捆绑包中,并尝试将其与index.html页面和fonts文件夹一起放在IIS上。但是在控制台中,我得到了一个错误:找不到模块“/map.jsx”,好像它试图引用一个本地文件,但我认为它应该将这些文件打包到包中 如果有什么我可以提供,以协助故障排除,请让我知道 这是我的map.jsx import React from 'react'; i

在使用react/webpack/node进行开发时,我使用“importmap from./Map.jsx';”或类似语句引用其他组件。然后我将其打包到一个捆绑包中,并尝试将其与index.html页面和fonts文件夹一起放在IIS上。但是在控制台中,我得到了一个错误:找不到模块“/map.jsx”,好像它试图引用一个本地文件,但我认为它应该将这些文件打包到包中

如果有什么我可以提供,以协助故障排除,请让我知道

这是我的map.jsx

import React from 'react';
import 'leaflet';

export default class Map extends React.Component {
  componentDidMount() {
    this.map = new L.Map('map', {
        center: new L.LatLng(53.15, 0.54),
        zoom: 8,
        layers: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        })
    });
    this.layersControl = L.control.layers().addTo(this.map);
  }
  render() {
    return (
      <div id="map-container" className="pure-u-1">
        <div id="map"></div>
      </div>
    );
  }
}

你能提供一个更完整的例子,以便重现这个问题吗?在没有看到您的设置之前,很难说出任何具体的内容。@bebraw我已经更新了问题,谢谢。这只是您遇到问题的特定文件吗?你也可以添加你的网页加载器配置吗?@bebraw添加了配置。如果有什么区别的话,我在IIS上尝试和托管的唯一文件是字体输出文件夹bundle.js和index.html。我看不出您的配置有任何错误。如果您可以设置一个生成捆绑包的独立示例,我可以看一下。这真的很奇怪,它在开发过程中工作,但在捆绑时失败。研究捆绑结果(甚至是未统一的结果)可能会给您一些启示。
import React from 'react';
import Nav from './nav/nav.jsx';
import NavButton from './nav/navbutton.jsx';
import Map from './map.jsx';

export default class App extends React.Component {
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton>Test</NavButton>
        </Nav>
        <Map />
      </div>
    );
  }
}
module.exports = {
  entry: "./src/index.jsx",
  output: {
      path: __dirname,
      filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png" } },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader?name=fonts/[name].[ext]"
      }
    ]
  }
};