Блог

Моя цель-сделать что-то подобное в другом проекте

 import { FuncA, FuncB, FuncC } from @myorg/hellow  

Я создаю свой собственный модуль узла для внутренней проблемы, и я определил структуру папок hellow следующим образом:

 📦hellow  ┣ 📂dist(ES5 of src)  ┣ 📂src  ┃ ┣ 📂Fileone  ┃ ┃ ┗ 📜Fileone.js  ┃ ┃ 📂Filetwo  ┃ ┃ ┗ 📜Filetwo.js  ┃ ┗ 📜index.js  ┣ 📜.babelrc  ┣ 📜.gitignore  ┣ 📜.npmignore  ┣ 📜index.js  ┣ 📜package-lock.json  ┗ 📜package.json  

В index.js выглядит это так:

 module.exports = require('./dist');  

Файл package.json с некоторыми опущенными полями выглядит следующим образом:

 "main": "index.js",  "scripts": {  "build": "npx babel src --out-dir dist"  },  "license": "MIT",  "devDependencies": {  "@babel/cli": "^7.16.0",  "@babel/core": "^7.16.0",  "@babel/preset-env": "^7.16.4",  "@babel/preset-react": "^7.12.13",  "create-index": "^2.6.0"  },  

а файл .babelrc выглядит следующим образом:

 {  "presets": ["@babel/preset-env", "@babel/preset-react"] }  

В index.js в папке src действует как агрегатор для экспортируемых функций в Fileone.js, Filetwo.js, и поэтому это выглядит так:

 export { FuncA, FuncB } from './Fileone/Fileone.js'; export { FuncC } from './Filetwo/Filetwo.js';  

А затем подайте Fileone.js (и аналогично Filetwo.js) имеет такой код, как:

 const FuncA = ... const FuncB = ... ... export { FuncA, FuncB }  

After setting the package like so I do the following to publish to npm

 npm run build npm publish cd ../project-directory npm update @myorg/hellow npm run dev  

The error I am getting has something to do with missing syntax:

«Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.»

 .nextserverpages_document.js (12:4) @ Object.ctx.renderPage   10 | // eslint-disable-next-line no-param-reassign  11 | ctx.renderPage = () =gt; gt; 12 | originalRenderPage({  | ^  13 | enhanceApp: App =gt; props =gt;  14 | sheet.collectStyles(lt;App {...props} /gt;),  15 | });  

Но я много просматривал и не могу понять, где я ошибаюсь. Я предполагаю, что это как-то связано с транспиляцией в ES5?

Изменить: С тех пор я удалил корень index.js файл и измененный package.json таким образом, что запись выглядит следующим образом:

 ~~"main": "index.js"~~ "main": "dist/index.js"  

Все та же ошибка.

Итак, получается, что на предыдущем шаге, когда я упомянул:

В index.js в папке src действует как агрегатор для экспортируемых функций в Fileone.js, Filetwo.js, и поэтому это выглядит так:

 export { FuncA, FuncB } from './Fileone/Fileone.js'; export { FuncC } from './Filetwo/Filetwo.js';  

Мне нужно было вместо этого использовать:

 export { FuncA, FuncB } from './Fileone/Fileone'; export { FuncC } from './Filetwo/Filetwo';  

без расширений .js. Кажется, сейчас это работает.