NodeJS 导入react-virtuoso会抛出错误“您可能需要适当的加载程序来处理此文件类型”,

inkz8wg9  于 2023-02-03  发布在  Node.js
关注(0)|答案(1)|浏览(146)

我的项目工作正常,但安装和导入react-virtuoso后,它抛出错误。

ERROR in ./~/react-virtuoso/dist/index.mjs
Module parse failed: C:\Users\Rocky\Documents\betterdash\node_modules\react-virtuoso\dist\index.mjs Unexpected token (364:22)   
You may need an appropriate loader to handle this file type.
|   }
|   const Component = forwardRef((propsWithChildren, ref) => {
|     const { children, ...props } = propsWithChildren;
|     const [system2] = useState(() => {
|       return tap(init(systemSpec), (system22) => applyPropsToSystem(system22, props));
 @ ./src/components/order-viewer.jsx 13:21-46
 @ ./src/main.js
 @ multi whatwg-fetch ./src/main.js

下面是我的webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: ["whatwg-fetch", "./src/main.js"],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: "babel-loader",
        include: path.join(__dirname, "src"),
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react", "flow"],
          plugins: ["transform-flow-strip-types"],
        },
      },
      {
        test: /\.s?css$/,
        loaders: ExtractTextPlugin.extract({
          use: ["css-loader", "sass-loader"],
          fallback: "style-loader",
        }),
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextPlugin({
      filename: "style.css",
      allChunks: true,
      disable: process.env.NODE_ENV === "development",
    }),
  ],
  devtool: "source-map",
};

我试着删除node_modules然后运行npm install,但是没有解决问题。如果我删除导入react-virtuoso的代码部分,错误也会消失。

import { Virtuoso } from "react-virtuoso";
gfttwv5a

gfttwv5a1#

我在Jest中遇到了同样的问题,我注意到他们已经将index.js文件从版本4.0.0重命名为index.cjs。我假设您必须对Webpack做类似的事情。

transform: {
    '^.+\\.(cjs|js|jsx)$': [
        'babel-jest',
        { configFile: './babel.config.js' }
    ]
},

如果您安装V4.0.0,它将工作,如果这是相同的问题。

相关问题