Блог

После запуска я получаю следующую ошибку npm build run , которая исчезает после удаления строки с оператором распространения:

 > react-scripts build

Creating an optimized production build...
Failed to compile.

./src/Footer.js
Attempted import error: 'getText' is not exported from './Getters'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-redux-app@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-redux-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additi
onal logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/myName/.npm/_logs/2020-08-24T22_14_07_926Z-deb
ug.log
  

1. App.js (основное приложение очищено от npx create-react-app my-app --template redux )
2. Footer.js (Компонент)
3. Getters.js (файл селектора)

App.js

 import React from 'react';
import Footer from './Footer';
import { getText } from './Getters';

function App() {
  return <Footer/>
}

export default App; 
  

Footer.js

 import React from 'react';
import { useSelector } from 'react-redux';
import { getText } from './Getters'; 

function Footer(){

  let text = useSelector( state => 
    getText( state, 'menuName' )
  )

  return <h1>{text}</h1>;

}

export default Footer;
  

Getters.js

 let Getters = {}

Getters.thisFunctionIsCausingTrouble = function( state, tableName ){

  let toRet = { ...state };
  return toRet;
}

Getters.getText = function( state ){
  return 'Text';
}

module.exports = Getters; 
  

На localhost все работает отлично, но когда я пытаюсь собрать, это просто облажается.

Опять же, когда я удаляю оператор распространения другой функции, она выполняется нормально.

Еще один странный результат заключается в том, что если я удаляю вызов import Footer и нижнего колонтитула из приложения, я получаю успешную сборку. ( getText Импорт остается в App.js режиме).

Почему сборка завершается неудачно?

package.json

 {
  "name": "test-redux-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  

Преобразование экспорта из es6 в .jsx. module.exports — это версия экспорта es6. У меня была похожая проблема. Исправлено путем добавления экспорта перед именем функции. пример: export const getheader = () => {…}

тогда вы должны быть в состоянии импортировать его таким, каким вы являетесь в данный момент.