当与Prismic.io一起使用时，Next-Slicezone‘模块解析失败’

Question

我不确定我做错了什么，文档相当参差不齐，并且在Prismic的社区委员会上没有人做出很好的回应。我希望有人能帮我：

我正在尝试为nextjs使用slicezone，并且我正在遵循文档，但我缺少slicezone的加载器。

错误：

./node_modules/next-slicezone/index.js
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const PageInfo = ({ title, description }) => (
>   <div
|     style={{
|       height: '80vh',

我的页面：

import { client } from '../../../prismic-configuration'
import Prismic from '@prismicio/client'
import { SliceZone } from 'next-slicezone'
import { useGetStaticProps, useGetStaticPaths} from 'next-slicezone/hooks'
import resolver from '../../../sm-resolver'

const CategoryProduct = ({slices}) => {
  return(
    <div>

    </div>
  )
}

export async function getStaticProps(props) {
  const { params: { uid, category }} = props
  console.log(uid, category)
  const products = await client.query([
    Prismic.Predicates.at('', 'product'),
  ])
  const prods = {
    props: {
      products
    }
  }

  return prods
}

export async function getStaticPaths() {
  const results = {
    paths: [
      {
        params: {
          uid: 'handmade-film-transitions',
          category: 'transitions'
        }
      }
    ], fallback: false
  }
  return results
}

我应该注意到，当我删除next-slicezone并只留下棱镜查询时，一切都很好。我已经检查了我的配置文件，一切似乎都很正常。

下面是它为我自动安装的sm-resolver.js (我认为这可能是罪魁祸首)。不确定去哪里：

module.exports = {
  apiEndpoint: 'https://edit-elements.cdn.prismic.io/api/v2',
  repoName: "edit-elements",
  linkResolver: function(doc) {
      if (doc.isBroken) {
          return '/404';
      }
      if (doc.type === 'home') {
          return '/';
      }
      if (doc.type === 'page') {
          return '/page/' + doc.uid
      }
      if (doc.type === 'shop') {
          return `/shop/${doc.uid}`
      }
      return '/'
  }
}

我确信我做错了什么，因为文档非常模糊(特别是必须与已经设置好的repo集成)，所以任何帮助都将不胜感激。:)

Answer 1

问题是(我和其他人)设置的版本不能开箱即用。您必须使用next-transpile-modules (在其当前状态下)。sm-resolver仅用于链接构建(来自棱镜支持)。

以下是解决方案：

next.config.js：

const withPlugins = require('next-compose-plugins')
const withSvgr = require('next-svgr')
const withTM = require('next-transpile-modules')(['next-slicezone'])

module.exports = withPlugins([
  withTM,
  withSvgr],
  {
    future: 
    {
      webpack5: true
    },
    modules: true,
  },
)

package.json：

{
  "name": "edit-elements",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "storybook": "start-storybook -p 8888",
    "build-storybook": "build-storybook",
    "slicemachine": "start-slicemachine --port 9999"
  },
  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-alpha.31",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@prismicio/client": "^4.0.0",
    "@storybook/react": "^6.2.9",
    "clsx": "^1.1.1",
    "essential-slices": "^1.0.4",
    "firebase": "^8.2.1",
    "firebase-admin": "^9.4.2",
    "firebaseui": "^4.7.1",
    "framer-motion": "^3.1.1",
    "jose": "^3.12.3",
    "next": "^10.2.1",
    "next-compose-plugins": "^2.2.1",
    "next-slicezone": "0.1.0-alpha.0",
    "next-svgr": "^0.0.2",
    "next-transpile-modules": "^6.4.1",
    "prismic-dom": "^2.2.5",
    "prismic-reactjs": "^1.3.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-paypal-button-v2": "^2.6.3",
    "react-player": "^2.9.0",
    "react-resize-detector": "^6.7.2",
    "sass": "^1.32.4",
    "slice-machine-ui": "^0.0.46",
    "storybook": "^6.2.9",
    "styled-components": "^5.2.1",
    "theme-ui": "^0.7.3"
  },
  "devDependencies": {
    "babel-plugin-react-require": "^3.1.3"
  }
}

A工作动态页面类别/uid的示例

import { client } from '../../../prismic-configuration'
import Prismic from '@prismicio/client'
import { Divider, Grid, Typography, makeStyles } from '@material-ui/core'
import SliceZone from 'next-slicezone'
import { useGetStaticPaths, useGetStaticProps } from 'next-slicezone/hooks'
import SliceResolver from '../../../sm-resolver'
import AddToCartButton from '../../../components/AddToCartButton'
import { SignJWT } from 'jose/jwt/sign'
import { useEffect, useRef, useState } from 'react'

const theme = makeStyles({
  'section': {
    margin: '3rem auto'
  },
  outer: {
    padding: '1rem .5rem'
  },
  container: {
    margin: 'auto',
  },
  slim: {
    margin: 'auto',
    maxWidth: '1200px',
  },
  productImg: {
    width: '100%',
    height: 'auto',
    maxWidth: '500px'
  },
  productTitle: {
    marginTop: '3rem'
  },
  justifyText: {
    textAlign: 'justify'
  },
  wideDivide: {
    margin: '3em auto'
  },
  strike: {
    textDecoration: 'line-through',
    fontSize: '1.5rem',
    color: '#999999'
  }
})

const CategoryProduct = (props) => {
  const [ currentProduct, setCurrentProduct ] = useState(null)

  useEffect(() => {
    const { product } = props
    console.log('useEffect props', product)
    setCurrentProduct(prevState => product)
    console.log('loaded product', currentProduct)
  }, [currentProduct])

  const product = props.product
  const slices = product.data.body
  const { featured_image, price, on_sale, sale_price, title, short_description } = product.data
  const styles = theme()
  return(
    <Grid container direction="column" mt={6} className={styles.outer}>
      <Grid container style={{marginBottom: '6rem'}} className={styles.slim} justifyContent="center">
        <Grid item xs={4} md={6}>
          <img className={styles.productImg} src={featured_image.medium.url} />
        </Grid>
        <Grid item xs={8} md={6} sx={{textAlign: 'right'}}>
          <Typography className={styles.productTitle} variant="h1">{title[0].text}</Typography>
          <Typography mb={2} variant="h4">{on_sale && sale_price ? <div><span className={styles.strike}>${price}</span>&nbsp;${sale_price}</div> : `$${price}`}</Typography>
          <AddToCartButton product={product} />
          <Divider className={styles.wideDivide} />
          <Typography className={styles.justifyText}>{short_description[0].text}</Typography>
        </Grid>
      </Grid>
      <Grid container direction="column" className={[styles.slices, styles.slim].join(' ')}>
        <SliceZone resolver={SliceResolver} slices={slices} />
      </Grid>
    </Grid>
  )
}

export const getStaticProps = async ({params}) => {
  const product = await client.getByUID('product', params.uid)
  const { price, sale_price } = product.data
  // Where we return the specific product's data
  return {
    props: {
      product
    }
  }
}

export const getStaticPaths = useGetStaticPaths({
  client: client,
  type: 'product',
  formatPath: (doc) => {
    // Where we return paths for /category/uid for static pages
    return {
      params: {
        category: doc.data.category.uid,
        uid: doc.uid 
      }
    }
  }
})
export default CategoryProduct