reactjs - 模块解析失败:React 组件渲染上出现意外标记
问题描述
我正在尝试使用 Typescript 配置 React(仅用于类型检查)、用于所有代码转换的 Babel、用于测试的 Jest、用于代码检查的 ESLint 和其他工具。请检查下面的 repo 链接以及所有文件。
我按照 Kent C. Dodds 和以下教程使用 Typescript 添加 webpack:https ://blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript-模块代码拆分和延迟加载完整教程到转译和捆绑您的代码/
似乎有可能让所有这些工具一起工作,因为在某些时候 build 确实适用于 TypeScript 文件,但开发服务器没有,现在也不起作用。
我希望有更多经验丰富的眼睛来看看配置,因为我是这方面的初学者。
错误信息:
PS D:\server\www\apache24_29\htdocs\react-boilerplate> npm run build
> react-boilerplate@1.0.0 build D:\server\www\apache24_29\htdocs\react-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:\server\www\apache24_29\htdocs\react-boilerplate\webpackConfig\dist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:\server\www\apache24_29\htdocs\react-boilerplate\dist\report.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-01T11_00_03_174Z-debug.log
我用当前版本创建了一个存储库。这一切都在进行中: https ://github.com/ethernal/react-boilerplate
我也在这里发布配置。
包.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier \"**/*.(js|ts|tsx|jsx)\" --write",
"lint" : "eslint . --ext \".js,.ts,.tsx\"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpack主要配置:
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack 开发配置:
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /\.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpack 生产配置:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /\.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
解决方案
似乎我没有发布指向 repo 的链接(或者它已被删除),但我今天设法清除了所有的痛点。如果您想查看一个工作示例,它位于此处:https ://github.com/ethernal/react-boilerplate
我最初的问题是我尝试转换 TS/JS 文件两次。
PS。如果有人感兴趣,我将不胜感激有关配置的评论以及如何改进它。
推荐阅读
- c# - 跳过对相同属性具有相同值的重复记录
- c# - 在节点上方添加子注释
- javascript - React and Parallax : 单击页面内导航链接时出现错位的视差图像
- sql - SQL - 当结果在 2 个字段上重复时,删除所有
- php - 使用ajax将元素值发布到数据库
- reactjs - 如何添加为属性并获取 React Konva 元素 ID
- android - 如何根据应用程序区域设置(英语或阿拉伯语)设置多个默认字体?
- r - 如何找到不适用卡方检验的 2x2 列联表的效果大小?
- python - Python:TypeError:inet_aton() 参数 1 必须是 str,而不是 None
- javascript - React:更改复选框后如何更新状态