reactmodule解析失败:意外令牌 (1:48)

IT技术 javascript reactjs webpack
2021-04-26 19:50:07

有人能帮我吗?我只是创建react应用程序然后我立即启动它。然后我得到了这样的错误。我对 webpack 了解不多。

指令

./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。

应用程序.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.js https://pastebin.com/NVHdYGGN

@pmmmwh/react-refresh-webpack-plugin/loader/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, '\n\n']);
      node.add(['\n\n', RefreshModuleRuntime]);

      const { code, map } = node.toStringWithSourceMap();
      return [code, map.toJSON()];
    } else {
      return [[RefreshSetupRuntime, source, RefreshModuleRuntime].join('\n\n'), 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.js https://pastebin.com/sXm9sz0n

提前致谢

4个回答

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

  1. 编辑package.json并将"react-scripts"更改"4.0.1".
  2. 运行npm install
  3. 运行npm start

就我而言',我的 PC 名称中有一个单引号字符(例如dummy'sPC),这导致 react-scripts 包在4.0.24.0.3版中崩溃(但在我感兴趣的 4.0.1 中没有)。

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

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

我遇到了同样的问题,我所做的就像上面评论中提到的那样,我将 package.json 中的“react-scripts”值更改为 4.0.1 并再次运行npm install然后npm start 效果很好。您是否使用了相同的方法或您在解决此问题时遵循的方法?

很简单,只需检查文件路径中的所有文件夹名称。如果任何文件夹具有 ' 符号,例如“rifat 的文件夹”,请删除 's,它会起作用,这基本上是重命名问题