个人中心
gpt4 book ai didi

javascript - 模块解析失败，Webpack 出现意外标记

转载 作者：行者123 更新时间：2023-11-28 05:53:11 25 4
gpt4 key购买 nike

我正在尝试使用一些构建 View 和组件的简单方法来构建 React 应用程序。当我运行 webpack 开发服务器时，我收到以下错误输出:

Module parse failed: /Directory/To/router.js Unexpected token (26:2)

You may need an appropriate loader to handle this file type.

它提示的那一行是当我第一次定义我的路由器处理程序时...... <Route handler={App}>

我的完整 router.js 设置如下:

// Load css first thing. It gets injected in the <head> in a <style> element by
// the Webpack style-loader.
import css from './src/styles/main.sass';

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

// Assign React to Window so the Chrome React Dev Tools will work.
window.React = React;

import { Router } from 'react-router';
Route  = Router.Route;

// Require route components.

import { App } from './containers/App';
import { Home } from './containers/Home';
import { StyleGuide } from './containers/StyleGuide';
import { Uploader } from './containers/Uploader';

const routes = (
  <Route handler={App}>
    <Route name="Home" handler={Home} path="/" />
    <Route name="StyleGuide" handler={StyleGuide} path="/styleguide" />
    <Route name="Uploader" handler={Uploader} path="/uploader" />
  </Route>
)

Router.run(routes, function(Handler) {
  return ReactDOM.render(<Handler/>, document.getElementById('app'));
  });

在我的.babelrc文件我用 react 定义了预设和es2015

我的开发 webpack 如下所示:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
  'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
    './src/router'
  ],
  devtool: 'eval',
  debug: true,
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolveLoader: {
    modulesDirectories: ['node_modules']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()

  ],
  resolve: {
    extensions: ['', '.js']
  },
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'public')
    },
    // CSS
    {
      test: /\.sass$/,
      include: path.join(__dirname, 'public'),
      loader: 'style-loader!css-loader!sass-loader'
    }
    ]
  }
};

我已经尝试研究这个问题了。我没有找到针对这个特定实例的任何解决方案。我很好奇为什么会这样。

编辑 1

我设法通过将目录名称更改为我的实际源目录而不是 public/ 来解决我的问题。但是在纠正我的错误之后，我可能偶然发现了处理我的组件的另外两个错误？

我现在在浏览器中收到两个错误: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

TypeError: _reactRouter.Router.run is not a function. (In '_reactRouter.Router.run', '_reactRouter.Router.run' is undefined)

我发现这通常是由于未正确导入/导出某些内容造成的。它要么来 self 的 router.js或我的组件共享其结构如下:

import React from 'react';
import { Link } from 'react-router';

const Uploader = React.createClass({
  //displayName: 'Uploader',
    render() {
      return (
        <div>
          <h1>Uploader</h1>
        </div>
      )
    }
});

export default Uploader;

最佳答案

您将 Uploader 作为默认导出，但将其作为命名导出导入:

export default Uploader;

import { Uploader } from './containers/Uploader';
// instead do
import Uploader from './containers/Uploader';

您的路由器配置有点奇怪。 react-router什么版本你正在用吗？通常你可以包裹你的 <Route>配置成<Router> 。请参阅docs .

关于javascript - 模块解析失败，Webpack 出现意外标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37931050/

25 4 0
文章推荐： javascript - 在搜索关键字上突出显示可折叠 DIV
文章推荐： c++ - QGraphicsRectItem 用鼠标 move 。如何？
文章推荐： javascript - 在delayed_job之后渲染javascript
文章推荐： javascript - (Spotify Web API) 创建新播放列表 - POST 请求返回 'Error 403 (Forbidden)'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com