Webpack 4: Сбой синтаксического анализа модуля: неожиданный токен - PullRequest
Новая
       13

Webpack 4: Сбой синтаксического анализа модуля: неожиданный токен

0 голосов
/ 26 октября 2018

Во время моей сборки webpack выдает мне эту ошибку:

ОШИБКА в ./client/components/App/index.tsx 15: 9 Ошибка синтаксического анализа модуля: неожиданный токен (15: 9) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. 

|
|
> const App: SFC = () => (
|   <div style={{ background: "red" }}>
|     <h3>test</h3>

@ ./client/index.tsx 11: 4-14: 6 12: 24-51 @ multi-hot-hot-loader / patch ./client/index.tsx webpack-hot-middleware / client? path = / __ webpack_hmr & timeout = 20000 & reload = true

Вот мой webpack.config.ts: 

import CleanWebpackPlugin from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { Configuration, HotModuleReplacementPlugin } from "webpack";

const rootDir = ["..", "..", "..", ".."];
const distDir = ["..", ".."];

// this file lives in one place as `.ts` and another as `.js` grab the
// file extension to determine the include path relative to its location
const include =
  path.extname(module.id) === ".ts"
    ? path.resolve(__dirname, "client", "index.tsx")
    : path.resolve(__dirname, ...rootDir, "client", "index.tsx");
const exclude = /node_modules/;
const tsconfig = path.resolve(
  __dirname,
  ...rootDir,
  "config",
  "tsconfig.client.json"
);

// development plugins
const plugins = [
  new HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "..", "..", "..", "index.html")
  }),
  new CleanWebpackPlugin([path.resolve(__dirname, ...distDir, "*.*")], {
    allowExternal: true,
    root: __dirname,
    verbose: true
  })
];

// script for webpack-hot-middleware
const hotMiddlewareScript: string =
  "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true";

const webpackDevConfig: Configuration = {
  context: path.resolve(__dirname, ...rootDir),
  devtool: "source-map",
  entry: {
    app: ["react-hot-loader/patch", include, hotMiddlewareScript]
  },
  mode: "development",
  module: {
    rules: [
      {
        exclude,
        include,
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        exclude,
        include,
        loader: "ts-loader",
        options: {
          configFile: tsconfig,
          transpileOnly: true
        },
        test: /\.tsx?$/
      },
      {
        enforce: "pre",
        exclude,
        include,
        loader: "source-map-loader",
        test: /\.js$/
      }
    ]
  },
  optimization: {
    nodeEnv: "development"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, ...distDir),
    publicPath: path.join(__dirname, ...distDir, "static/")
  },
  plugins,
  resolve: {
    extensions: [".js", ".ts", ".tsx", "*"]
  },
  target: "web"
};

export default webpackDevConfig;

Мой App.tsx: 

import React, { SFC } from "react";
import ReactDOM from "react-dom";

const App: SFC = () => (
  <div style={{ background: "red" }}>
    <h3>test</h3>
  </div>
);

Мой index.tsx: 

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./components";

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

// enables Hot Module Replacement (HMR)
if ((module as any).hot) {
  (module as any).hot.accept("./components/App", () => {
    // for HMR to work, `App` must be re-required
    const NextApp = require("./components/App").default;
    ReactDOM.render(<NextApp />, document.getElementById("app"));
  });
}

Мой tsconfig.json: 

{
  "compilerOptions": {
    "allowJs": true,
    "jsx": "react",
    "module": "commonjs",
    ...
  }
}

Кажется, сама ошибка дает решение: You may need an appropriate loader to handle this file type., однако, насколько я понимаю, ts-loader должен уметь реагировать.

Здесь является примером webpack.config, предоставленным командой ts-loader, используемой в приложении, которое использует машинопись и реагирует. Настройка довольно похожа на мою, однако я не использую webpack-dev-server, скорее, я использую webpack-dev-middleware.

1 Ответ

0 голосов
/ 27 октября 2018

Проблема была решена комментарием niba к исходному вопросу. Похоже, что ts-loader при назначении одного модуля include не будет проходить через связанные модули. Удаление поля include или использование имени папки исправило эту ошибку для меня.

...