Next JS - 如何使用 next-transpile-modules 解析路径？

Question

我一直在做 next.config.js 文件的配置，但我无法运行。

我不断收到此错误：

我尝试通过多种方式修复它。我评论了不同的东西，阅读 next-transpile-module 中的 FAQ 并改变了一切。没有任何工作。我不断收到错误。

<块引用>

错误：next-transpile-modules - 发生意外错误 尝试解决“common/src/”错误：无法解析“common/src/” '/Users/user/development/viboa-landingpage/packages/landing' 在 getPackageRootDirectory (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:136:15) 在 Array.map() 在 withTM (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:145:34) 在 /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:100:23 在 Array.forEach() 在 composePlugins (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:77:11) 在 /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/index.js:22:38 在 normalizeConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config-shared.js:1:1558) 在 loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config.js:8:158) 在异步 NextServer.loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/server/next.js:1:2962)

我的 next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  'common/src/',
  { debug: true }
]);
// const withOptimizedImages = require('next-optimized-images');
// const withFonts = require('next-fonts');
// const withVideos = require('next-videos');
const withImages = require('next-images');
const path = require('path');

const nextConfig = {
  future: {
    webpack5: true
  },
  webpack: (config, { isServer, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config

    config.plugins.push(new webpack.EnvironmentPlugin(process.env));

    config.optimization.minimize = false;

    config.module.rules.push(
      {
        test: /\.svg$/,
        issuer: {
          test: /\.(js|ts)x?$/
        },
        use: ['@svgr/webpack']
      },
      {
        test: /\.(webm|ogg|mp3|wav|mpe?g)$/i,
        exclude: config.exclude,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: config.inlineImageLimit,
              fallback: 'file-loader',
              publicPath: `${config.assetPrefix}/_next/static/images/`,
              outputPath: `${isServer ? '../' : ''}static/images/`,
              name: '[name]-[hash].[ext]',
              esModule: config.esModule || false
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // Options
                    }
                  ]
                ]
              }
            }
          }
        ]
      }
      // {
      //   test: /\.(mp4|webm|ogg|swf|ogv)$/,
      //   use: {
      //     loaders: [
      //       {
      //         test: /\.html$/,
      //         loader: 'html-loader?attrs[]=video:src'
      //       },
      //       {
      //         test: /\.mp4$/,
      //         loader: 'url?limit=10000&mimetype=video/mp4'
      //       }
      //     ]
      //   }
      // }
    );

    if (isServer) {
      config.externals = ['react', ...config.externals];
    }

    config.resolve.alias['react'] = path.resolve(
      __dirname,
      '.',
      'node_modules',
      'react'
    );
    // config.resolve.alias = {
    //   ...config.resolve.alias,
    //   // Will make webpack look for these modules in parent directories
    //   common: require.resolve('common')
    //   // reusecore: require.resolve('packages/reusecore')
    //   // ...
    // };

    // Important: return the modified config
    return config;
  }
};

我的 package.json

{
  "name": "next-viboa-landing-page",
  "description": "viboa landing page built with nextjs",
  "version": "1.0.0",
  "private": true,
  "author": {
    "name": "Me"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.16",
    "cpx": "^1.5.0",
    "cross-env": "^7.0.3",
    "firebase-tools": "^9.10.0",
    "husky": "^6.0.0",
    "lerna": "^4.0.0",
    "lint-staged": "^10.5.4",
    "polished": "^4.1.1",
    "prettier": "^2.2.1",
    "rimraf": "^3.0.2"
  },
  "workspaces": [
    "packages/*",
    "packages/*"
  ],
  "scripts": {
    "clean": "lerna clean --yes && rimraf node_modules",
    "start": "lerna run --parallel dev",
    "preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
    "next-dev": "yarn workspace viboa-landing-page run dev",
    "next-build": "rimraf dist && yarn workspace viboa-landing-page run build",
    "next-start": "yarn workspace viboa-landing-page run start",
    "next-export": "yarn workspace viboa-landing-page run export",
    "gatsby-dev": "yarn workspace gatsby-landing run dev",
    "gatsby-build": "yarn workspace gatsby-landing run build",
    "gatsby-serve": "yarn workspace gatsby-landing run serve",
    "prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
    "prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace viboa-landing-page run build && yarn run copy-deps && yarn run install-deps",
    "firebase-serve": "cross-env NODE_ENV=production firebase serve",
    "prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace viboa-landing-page run build && yarn run copy-deps",
    "firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
    "build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx \"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\" \"dist/public\" -C",
    "build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
    "copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
    "install-deps": "cd \"dist/functions\" && yarn",
    "pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
    "gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
    "pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
    "gatsby-firebase-deploy": "firebase deploy",
    "netlify-deploy": "yarn workspace viboa-landing-page run netlify-build"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,md,css}": [
      "prettier --trailing-comma es5 --single-quote --write"
    ]
  }
}

当我从 const withTM = require('next-transpile-modules') 中删除时

我收到这样的错误：

<块引用>

错误 - ../common/src/components/Box/index.js 模块解析失败： 意外令牌 (14:2) 您可能需要一个合适的加载器来处理 此文件类型，目前没有配置加载程序来处理此文件 文件。见https://webpack.js.org/concepts#loaders | |常量框 = ({ 孩子们，...道具 }) => { > {children}; | }; |