React模块解析失败:意外令牌(1:48)

Question

有人能帮帮我吗?我只需要创建react app，然后立即启动它。然后我得到一个类似这样的错误。我对webpack了解不多。

/p>

./src/index.js 1:48
Module parse failed: Unexpected token (1:48)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/LENOVO/Mine/project-new/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

我只是在目录中输入npx create-react-app ./，然后npm start，然后这个错误发生了。我试过做3个react应用程序，同样的事情发生了，我从来没有碰过webpack。

App.js

import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

这是我的webpack.config.jshttps://pastebin.com/NVHdYGGN

@pmmmwh/react-refresh-webpack-plugin/装载机/index.js

// This is a patch for mozilla/source-map#349 -
// internally, it uses the existence of the `fetch` global to toggle browser behaviours.
// That check, however, will break when `fetch` polyfills are used for SSR setups.
// We "reset" the polyfill here to ensure it won't interfere with source-map generation.
const originalFetch = global.fetch;
delete global.fetch;
const { SourceMapConsumer, SourceMapGenerator, SourceNode } = require('source-map');
const { Template } = require('webpack');
/**
* Generates an identity source map from a source file.
* @param {string} source The content of the source file.
* @param {string} resourcePath The name of the source file.
* @returns {import('source-map').RawSourceMap} The identity source map.
*/
function getIdentitySourceMap(source, resourcePath) {
const sourceMap = new SourceMapGenerator();
sourceMap.setSourceContent(resourcePath, source);
source.split('n').forEach((line, index) => {
sourceMap.addMapping({
source: resourcePath,
original: {
line: index + 1,
column: 0,
},
generated: {
line: index + 1,
column: 0,
},
});
});
return sourceMap.toJSON();
}
/**
* Gets a runtime template from provided function.
* @param {function(): void} fn A function containing the runtime template.
* @returns {string} The "sanitized" runtime template.
*/
function getTemplate(fn) {
return Template.getFunctionContent(fn).trim().replace(/^ {2}/gm, '');
}
const RefreshSetupRuntime = getTemplate(require('./RefreshSetup.runtime')).replace(
'$RefreshRuntimePath$',
require.resolve('react-refresh/runtime').replace(/\/g, '/')
);
const RefreshModuleRuntime = getTemplate(require('./RefreshModule.runtime'));
/**
* A simple Webpack loader to inject react-refresh HMR code into modules.
*
* [Reference for Loader API](https://webpack.js.org/api/loaders/)
* @this {import('webpack').loader.LoaderContext}
* @param {string} source The original module source code.
* @param {import('source-map').RawSourceMap} [inputSourceMap] The source map of the module.
* @param {*} [meta] The loader metadata passed in.
* @returns {void}
*/
function ReactRefreshLoader(source, inputSourceMap, meta) {
const callback = this.async();
/**
* @this {import('webpack').loader.LoaderContext}
* @param {string} source
* @param {import('source-map').RawSourceMap} [inputSourceMap]
* @returns {Promise<[string, import('source-map').RawSourceMap]>}
*/
async function _loader(source, inputSourceMap) {
if (this.sourceMap) {
let originalSourceMap = inputSourceMap;
if (!originalSourceMap) {
originalSourceMap = getIdentitySourceMap(source, this.resourcePath);
}
const node = SourceNode.fromStringWithSourceMap(
source,
await new SourceMapConsumer(originalSourceMap)
);
node.prepend([RefreshSetupRuntime, 'nn']);
node.add(['nn', RefreshModuleRuntime]);
const { code, map } = node.toStringWithSourceMap();
return [code, map.toJSON()];
} else {
return [[RefreshSetupRuntime, source, RefreshModuleRuntime].join('nn'), inputSourceMap];
}
}
_loader.call(this, source, inputSourceMap).then(
([code, map]) => {
callback(null, code, map, meta);
},
(error) => {
callback(error);
}
);
}
module.exports = ReactRefreshLoader;
// Restore the original value of the `fetch` global, if it exists
if (originalFetch) {
global.fetch = originalFetch;
}

babel-loader/lib/index.jshttps://pastebin.com/sXm9sz0n

Thanks in advance

Answer 1

+create-react-app的新版本4.0.2似乎有问题[参考]。
您可以通过执行以下操作来使用前面的4.0.1。

1. 编辑package.json，将"react-scripts"的值改为"4.0.1"
2. 运行npm install.
3. 运行npm start.

Answer 2

在我的情况下，我有一个单引号字符'在我的PC的名字(例如dummy'sPC)，这导致react-scripts包崩溃版本4.0.2和4.0.3(但不是在4.0.1，这是我感兴趣的)。

将项目移动到更高级别的文件夹(例如C:/Users/my-app)并安装节点模块后，一切都正常工作。

最后我可以使用react-scripts v4.0.3，但只有当项目的路径不包含dummy'sPC字符串在它。

Answer 3

我遇到了同样的问题，我所做的就像上面的评论中提到的那样，我改变了"react-scripts"价值在包。npm install再一次。npm start而且效果很好。你是用同样的方法还是用了什么方法来解决这个问题?

Answer 4

很简单只需检查文件路径中所有文件夹的名称。如果任何文件夹有类似于"rifat's folder"的符号;，去掉"s"它会起作用的这基本上是一个重命名问题