Babel.js 代码分割不适用于react中的包裹

yacmzcpb 于 11个月前发布在 Babel

关注(0)|答案(1)|浏览(156)

我有这个组件是从包裹的文档。它说，它应该在默认情况下工作。

import React from 'react';

const Router = () => {
 ...
  const ComponentToRender = React.lazy(() => import(`./Pages/${variableCompoentName}/index.js`));
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <ComponentToRender />
    </React.Suspense>
  );
};

export default Router;

字符串
但我在浏览器中得到一个错误说：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

2src.7ed060e2.js:1362 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:1234/Pages/Home/index.js

型
这是怎么回事？我做错了什么？
这是我的package.json

"dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "parcel-bundler": "^1.12.5",
    "react": "^16.9.0 || ^17.0.0 || ^18",
    "react-dom": "^18.2.0",
     ...
  },
  "scripts": {
    "start": "parcel public/index.html",
    "build": "parcel build public/index.html",
  }

型

更新日期2023年12月1日

原来我得到这个错误是因为我在import（./Pages/${variableCompoentName}/index.js）中使用了一个变量（variableCompoentName）。因为名字是在运行时生成的，所以它们永远不会被编译。
现在我的问题是我如何确保它们总是被编译？我如何解决这个问题？

babeljs

来源：https://stackoverflow.com/questions/77510403/code-splitting-not-working-with-parcel-in-react

1条答案

按热度按时间

k10s72fa1#

正如guerric-p在Why does the server return MIME type of 'text/html' when I import React?中建议的那样
这可能是因为你也需要ReactDOM

import React from 'react';
import ReactDOM from 'react-dom';

字符串
我不习惯React，但当你使用文件。js我认为你应该qoute你的组件/ html
而不是

return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <ComponentToRender />
    </React.Suspense>
  );

型
做呢

return "<React.Suspense fallback={<div>Loading...</div>}><ComponentToRender /></React.Suspense>";

型
或

return (
    <React.Suspense fallback={"<div>Loading...</div>"}>
      <ComponentToRender />
    </React.Suspense>
  );

型
并确保在本地环境（如visual studio）上运行在终端npm run start中

赞(0）回复(0）举报 11个月前

我来回答

Babel.js 代码分割不适用于react中的包裹

1条答案

相关问题

热门标签

最新问答