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

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

CMD

./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, '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.js
https://pastebin.com/sXm9sz0n

提前致谢

回答

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

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

以上是反应模块解析失败:意外令牌(1:48)的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>