title: Craco-npm build error: func not exported. But I do export it
body: <p>I'm trying to build reactjs mongodb dockerised project that is running fine and I keep getting this error:</p>
  <pre><code> &gt; [build 7/7] RUN npm run build:
  #13 1.499
  #13 1.499 &gt; my-project@0.1.0 build /app
  #13 1.499 &gt; craco build
  #13 1.499 
  #13 4.857 Creating an optimized production build...
  #13 34.86 Failed to compile.
  #13 34.86
  #13 34.86 ./src/webpage/tables/ConcertForm.js
  #13 34.86 Attempted import error: 'addConcert' is not exported from '../../actions/concertActions' (imported as 'actions').#13 34.86
  #13 34.86
  #13 34.93 npm ERR! code ELIFECYCLE
  #13 34.93 npm ERR! errno 1
  #13 34.94 npm ERR! my-project@0.1.0 build: `craco build`
  #13 34.94 npm ERR! Exit status 1
  #13 34.94 npm ERR!
  #13 34.94 npm ERR! Failed at the my-project@0.1.0 build script.
  #13 34.94 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  #13 34.95
  #13 34.95 npm ERR! A complete log of this run can be found in:
  #13 34.95 npm ERR!     /root/.npm/_logs/2021-12-12T15_08_15_210Z-debug.log
  </code></pre>
  <p>I'm gonna leave both the concertActions and ConcertForm files down bellow but I'm exporting the function it is complaining about when I run npm start (which calls craco start) everything works fine when I run npm run build I get this error</p>
  <p>ConcertForm.js:</p>
  <pre><code>
  import React from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import * as actions from &quot;../../actions/concertActions&quot;;
  
  const ConcertForm = (props) =&gt; {
    /**If the concert given at the props has a concert id
     * it means that a concert is inserted to get updated
     * else the organizer wants to add a new concert
     */
    const onSubmit = async (event) =&gt; {
      event.preventDefault();
      if (props.concert._id) {
        actions
          .updateConcert(props.concert)
          .then((res) =&gt; {
            document.querySelector(&quot;.concert_form&quot;).classList.add(&quot;hidden&quot;);
          })
          .catch((error) =&gt; {
            alert(&quot;Register failed: &quot; + error);
          });
      } else {
        actions
          .addConcert(props.concert)
          .then((res) =&gt; {
            document.querySelector(&quot;.concert_form&quot;).classList.add(&quot;hidden&quot;);
          })
          .catch((error) =&gt; {
            alert(&quot;Register failed: &quot; + error);
          });
      }
    };
    /**Cancel button closes the form */
    const onCancel = (event) =&gt; {
      event.preventDefault();
      document.querySelector(&quot;.concert_form&quot;).classList.add(&quot;hidden&quot;);
    };
  
    return (
      &lt;div class=&quot;w-full h-9/10 flex justify-center z-10 backdrop-filter backdrop-blur-sm&quot;&gt;
        &lt;form class=&quot;w-full max-w-lg h-96 mt-16 form_theme&quot;&gt;
          &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
            &lt;div class=&quot;w-full md:w-1/2 px-3 mb-3&quot;&gt;
              &lt;label class=&quot;input_field_titles&quot; for=&quot;grid-first-name&quot;&gt;
                Title
              &lt;/label&gt;
              &lt;input
                onChange={props.onChange}
                name=&quot;title&quot;
                value={props.concert.title}
                class=&quot;input_fields&quot;
                type=&quot;text&quot;
              /&gt;
            &lt;/div&gt;
            &lt;div class=&quot;w-full md:w-1/2 px-3 mb-3&quot;&gt;
              &lt;label class=&quot;input_field_titles&quot; for=&quot;grid-last-name&quot;&gt;
                Artist
              &lt;/label&gt;
              &lt;input
                onChange={props.onChange}
                name=&quot;artist&quot;
                value={props.concert.artist}
                class=&quot;input_fields&quot;
                type=&quot;text&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
            &lt;div class=&quot;w-full px-3&quot;&gt;
              &lt;label class=&quot;input_field_titles&quot; for=&quot;grid-username&quot;&gt;
                Category
              &lt;/label&gt;
              &lt;input
                onChange={props.onChange}
                name=&quot;category&quot;
                value={props.concert.category}
                class=&quot;block input_fields focus:border-gray-500&quot;
                type=&quot;text&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex flex-wrap -mx-3 mb-6&quot;&gt;
            &lt;div class=&quot;w-full px-3&quot;&gt;
              &lt;label class=&quot;input_field_titles&quot; for=&quot;grid-password&quot;&gt;
                Date
              &lt;/label&gt;
              &lt;input
                onChange={props.onChange}
                name=&quot;date&quot;
                value={props.concert.date}
                class=&quot;block input_fields&quot;
                type=&quot;date&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;flex flex-wrap -mx-3 mb-2&quot;&gt;
            &lt;div class=&quot;flex items-center justify-between px-3 mb-6 w-full&quot;&gt;
              &lt;button class=&quot;buttons&quot; onClick={onCancel}&gt;
                Cancel
              &lt;/button&gt;
              &lt;button type=&quot;submit&quot; class=&quot;buttons&quot; onClick={onSubmit}&gt;
                Submit
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  ConcertForm.propTypes = {
    concert: PropTypes.object.isRequired,
    errors: PropTypes.object,
  };
  
  export default ConcertForm;
  
  </code></pre>
  <p>concertActions.js:</p>
  <pre><code>
  /**Responsible for contacting the server
   * and returning all the avaliable concerts
   */
  const loadConcerts = async () =&gt; {
    const newData = await fetch(&quot;/loadConcerts&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
    }).then((res) =&gt; res.json());
    return newData;
  };
  
  /**Responsible for contacting the server
   * and returning all the concerts to whitch the
   * passed in filter values (title, category, artist)
   * apply
   */
  const filterConcerts = async (filter) =&gt; {
    const newData = await fetch(&quot;/filterConcerts&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
      body: JSON.stringify({ filter }),
    }).then((res) =&gt; res.json());
    return newData;
  };
  
  /**Responsible for contacting the server
   * and returning all the concerts a specific
   * organizer is hosting
   */
  const loadOrgConcerts = async (uid) =&gt; {
    const newData = await fetch(&quot;/loadOrgConcerts&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
      body: JSON.stringify({ uid: uid }),
    }).then((res) =&gt; res.json());
    return newData;
  };
  
  /**Responsible for contacting the server
   * and adding the passed in concert
   */
  const addConcert = async (concert) =&gt; {
    const newData = await fetch(&quot;/addConcert&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
      body: JSON.stringify({ ...concert }),
    }).then((res) =&gt; res.json());
    console.log(newData[0]);
    return newData;
  };
  
  /**Responsible for contacting the server
   * and updating the values of a specific concert
   * (concertId and organizer can not be updated)
   */
  const updateConcert = async (concert) =&gt; {
    const newData = await fetch(&quot;/updateConcert&quot;, {
      method: &quot;POST&quot;,
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
      body: JSON.stringify({ ...concert }),
    }).then((res) =&gt; res.json());
    console.log(newData[0]);
    return newData;
  };
  
  /**Responsible for contacting the server
   * and deleting a concert determined by its ID
   */
  const deleteConcert = async (cid) =&gt; {
    const newData = await fetch(&quot;/deleteConcert&quot;, {
      method: &quot;POST&quot;,
      body: JSON.stringify({ cid: cid }),
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
    }).then((res) =&gt; res.json());
    return newData;
  };
  
  /**Cancel concert, dent out notification to
   * those that have it in favorites that it is
   * canceled */
  const cancelConcert = async (cid, title) =&gt; {
    var host = window.document.location.host.replace(/:.*/, &quot;&quot;);
    var ws = new WebSocket(&quot;ws://&quot; + host + &quot;:8080/echo1&quot;);
    ws.onopen = function () {
      ws.send(
        JSON.stringify({
          request: &quot;PUBLISH&quot;,
          message: title + &quot; concert is canceled&quot;,
          channel: cid,
        })
      );
      ws.close();
    };
  };
  
  /**Responsible for contacting the server
   * and deleting a concert determined by its ID
   */
  const notifyUsers = async (id, notification) =&gt; {
    const newData = await fetch(&quot;/addNotification&quot;, {
      method: &quot;POST&quot;,
      body: JSON.stringify({ id: id, not: notification }),
      headers: {
        &quot;Content-Type&quot;: &quot;application/json&quot;,
        Accept: &quot;application/json&quot;,
      },
    }).then((res) =&gt; res.json());
    return newData;
  };
  
  module.exports = {
    loadConcerts,
    loadOrgConcerts,
    filterConcerts,
    updateConcert,
    addConcert,
    deleteConcert,
    cancelConcert,
    notifyUsers,
  };
  
  </code></pre>