NextJS에서 SVG가 포함 된 외부 npm 패키지를 참조 할 때 빌드하는 방법은 무엇입니까?

debugcn 에 게시 Dev

Willem

내 nextjs 프로젝트 (TheHost라고합시다)는 다른 npm 패키지를 참조합니다 (ThePackage라고합시다).

SVG는 TheHost 내에서 정의 될 때 잘로드되지만 다음에 svg를 자바 스크립트로 해석하려고 시도하기 때문에 ThePackage 가져 오기가 실패합니다. 따라서 다음과 같은 오류가 발생합니다 next build.

SyntaxError: Unexpected token '<'

다시 말하면 SVG는 TheHost 자체에 정의 된 svg를 참조 할 때 잘 작동합니다. 문제는 SVG가 포함 된 npm 패키지를 가져 오는 것 같습니다.

SVG를 사용하는 ThePackage에서 컴포넌트를 가져 왔는지 여부는 중요하지 않습니다. 단지 npm 패키지의 어딘가에 "import xxx from '../path/to/svg'가 next build.

그만한 가치를 위해 ThePackage의 트랜스 파일 된 자바 스크립트는 다음과 같이 svg를 읽습니다.

var _mysvg = require("../path/to/the-svg.svg");

많은 세부 사항 :

다음 빌드 스택 추적은 다음과 같습니다.

> Using external babel configuration
> Location: "/Users/w/dev/TheHost/.babelrc"
Creating an optimized production build

Compiled successfully.

> Build error occurred
/Users/w/dev/TheHost/node_modules/ThePackage/build/assets/card_background.svg:1
<svg viewBox="0 0 860 382" fill="none" xmlns="http://www.w3.org/2000/svg">
^

SyntaxError: Unexpected token '<'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/w/dev/TheHost/node_modules/TheProject/build/card/style.js:14:47)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32) {
  type: 'SyntaxError'
}
Automatically optimizing pages .%

.babelrc 파일 :

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "babel-plugin-styled-components",
    "inline-react-svg"
  ]
}

next.config.js 파일 :

const withSourceMaps = require("@zeit/next-source-maps");
const withImages = require("next-images");

module.exports = withImages(
  withSourceMaps({
    env: { *** redacted *** },
    publicRuntimeConfig: { *** redacted *** },
    webpack: (config, options) => {
      if (!options.isServer) {
        config.resolve.alias["@sentry/node"] = "@sentry/browser";
      }
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
      return config;
    }
  })
);

nextjs svgr 패키지 버전은 다음과 같습니다.

"next": "^9.2.1",
"next-images": "^1.3.0",
"@svgr/webpack": "^5.1.0",
"babel-eslint": "^10.0.3",
"babel-plugin-inline-react-svg": "^1.1.1",

ThePackage는 다음 출력 구성 (webpack)으로 빌드됩니다.

  entry: './src/index.js',
  output: {
    path: buildFolder,
    filename: 'ThePackage.js',
    library: 'ThePackage',
    libraryTarget: 'umd', /* Note: umd */
    umdNamedDefine: true
  },

Seagyn Davis

NextJS는 node_modules기본적으로 무시 하므로 구성이 패키지를 트랜스 파일 할 수 있도록 특별히 허용해야합니다. 다행히 누군가 이미 NextJS 플러그인을 만들어이를 허용했습니다 : https://github.com/martpie/next-transpile-modules

또한 Next Compose Plugins 를 사용하여 구성 을 정리하는 것이 좋습니다 . 결국 next.config.js는 다음과 같이 보일 것입니다.

const withSourceMaps = require("@zeit/next-source-maps");
const withImages = require("next-images");
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['ThePackage']);

module.exports = withPlugins([
    withTM,
    [
        withImages,
        {
            exclude: /\.svg$/
        }
    ],
    withSourceMaps
],
{
    env: { *** redacted *** },
    publicRuntimeConfig: { *** redacted *** },
    webpack: (config, options) => {
      if (!options.isServer) {
        config.resolve.alias["@sentry/node"] = "@sentry/browser";
      }
      config.module.rules.push({
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      });
      return config;
    }
});

또한에서 처리되는 SVG를 제외했습니다 withImages.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사