模块解析失败:在部署Heroku时出现意外令牌(14:6)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模块解析失败:在部署Heroku时出现意外令牌(14:6)相关的知识,希望对你有一定的参考价值。
我有一个计划部署到Heroku的简单应用。它可以在localhost上运行,但是在执行git push heroku master
时出现错误,提示需要适当的加载程序来处理此文件类型,当前未配置任何加载程序来处理此文件。我也尝试将<>
更改为<div>
或<React.Fragment>
等,但是没有运气。
| render() {
| return (
> <>
| <Sidebar/>
| <Footer/>
| </>
@ ./src/index.js 1:0-24
我在这里查看了大多数答案,并且我的配置看起来正确。任何解决方案为何仍在抱怨?
。babelrc文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
webpack.config.js
const htmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
output: {
publicPath: '/'
},
module: {
rules: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react"]
}
}
},
{
test: /.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
package.json
{
"name": "myWebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"npm": "6.12.0",
"node": "12.13.0"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react-social-icons": "^4.1.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
},
"dependencies": {
"@babel/core": "^7.6.4",
"babel-loader": "^8.0.6",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2",
"react-split-pane": "^0.1.87"
}
}
根据要求,这是我的完整错误输出
Enumerating objects: 68, done.
Counting objects: 100% (68/68), done.
Delta compression using up to 4 threads
Compressing objects: 100% (65/65), done.
Writing objects: 100% (68/68), 1.17 MiB | 765.00 KiB/s, done.
Total 68 (delta 23), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 12.13.0
remote: engines.npm (package.json): 6.12.0
remote:
remote: Resolving node version 12.13.0...
remote: Downloading and installing node 12.13.0...
remote: npm 6.12.0 already installed with node
remote:
remote: -----> Installing dependencies
remote: Installing node modules (package.json)
remote: added 823 packages from 403 contributors and audited 10614 packages in 25.88s
remote: found 0 vulnerabilities
remote:
remote:
remote: -----> Build
remote: Running build
remote:
remote: > myWebsite@1.0.0 build /tmp/build_aecdb33dae6f65fc1053619440b756ef
remote: > webpack --mode production
remote:
remote: Hash: 71478ca5630665d9995b
remote: Version: webpack 4.41.2
remote: Time: 205ms
remote: Built at: 11/07/2019 7:44:19 PM
remote: 1 asset
remote: Entrypoint main = main.js
remote: [0] ./src/index.js 24 bytes {0} [built]
remote: [1] ./src/App.js 315 bytes {0} [built] [failed] [1 error]
remote:
remote: ERROR in ./src/App.js 14:6
remote: Module parse failed: Unexpected token (14:6)
remote: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
remote: | render() {
remote: | return (
remote: > <>
remote: | <Sidebar/>
remote: | <Footer/>
remote: @ ./src/index.js 1:0-24
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 2
remote: npm ERR! myWebsite@1.0.0 build: `webpack --mode production`
remote: npm ERR! Exit status 2
remote: npm ERR!
remote: npm ERR! Failed at the myWebsite@1.0.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.7aIPm/_logs/2019-11-07T19_44_19_386Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to guarded-fortress-36341.
remote:
To https://git.heroku.com/guarded-fortress-36341.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/guarded-fortress-36341.git'
答案
由于没有人回答。我最终将我的项目转移到create-react-app。主要为我设置配置的地方。 (特别是我遇到错误的装载机)
以上是关于模块解析失败:在部署Heroku时出现意外令牌(14:6)的主要内容,如果未能解决你的问题,请参考以下文章
模块解析失败:将 React on Rails 与 Antd 一起使用时出现意外字符“@”。