Error: 'import' and 'export' may only appear at the top level

[dominicg666]

microbundle-crl watch --no-compress --format modern,cjs Watching source, compiling to dist: Error: 'import' and 'export' may only appear at the top level

at /home/dominic/Neoito/real-time-module/Frontend/node_modules/symbol-observable/es/index.js:2:0

1: / global window / 2: import ponyfill from './ponyfill.js'; ^ 3: 4: var root;

[AgustinNavarroA4b]

If it happens to me too

➜  test git:(master) ✗ yarn start
yarn run v1.22.10
$ microbundle-crl watch --no-compress --format modern,cjs
Watching source, compiling to dist:
Error: 'import' and 'export' may only appear at the top level

at /Users/agustinnavarro/Documents/developer/packages/test/node_modules/lodash-es/isBuffer.js:1:0

1: import root from './_root.js';
   ^
2: import stubFalse from './stubFalse.js';

Error: 'import' and 'export' may only appear at the top level

at /Users/agustinnavarro/Documents/developer/packages/test/node_modules/lodash-es/isBuffer.js:1:0

1: import root from './_root.js';
   ^
2: import stubFalse from './stubFalse.js';

[jalamprea]

The same happens on my end after installing the packages react-color and @types/react-color

> microbundle-crl watch --no-compress --format modern,cjs --css-modules false

Watching source, compiling to dist:
Error: 'import' and 'export' may only appear at the top level

at /Users/Dev/customLibs/react-editors-common-ui/node_modules/lodash-es/_cloneBuffer.js:1:0

1: import root from './_root.js';
   ^
2:
3: /** Detect free variable `exports`. */

[dominicg666]

@jalamprea , Use Webpack. it is better than create-react-library

output: { // chunkFilename: '[id].[chunkhash].js', path: path.join(__dirname, '/lib'), filename: 'index.js', library: 'react-chat-widget', libraryTarget: 'umd' },

[vincefednat]

I just stumbled on the exact same problem when trying to include a .js file that someone on my team wrote.

Watching source, compiling to dist:

(babel plugin) SyntaxError: /Users/vmartin/Code/fednat/freedom/node_modules/lodash-es/_cloneBuffer.js: 'import' and 'export' may only appear at the top level (4:0)

  2 |
  3 | var _cloneBuffer = commonjsHelpers.createCommonjsModule(function (module, exports) {
> 4 | import root from './_root.js';
    | ^
  5 |
  6 | /** Detect free variable `exports`. */
  7 | var freeExports = 'object' == 'object' && exports && !exports.nodeType && exports;

at undefined:4:0

Here is our file.

import * as yup from 'yup'
export function setYupDefaults() {
    setDefaultLocale()
    addPhoneMethod()
    addLettersMethod()
    addCurrencyMethod()
}

// yup system wide default messages
function setDefaultLocale() {
    yup.setLocale({
        mixed: {
            required: 'This field is required.',
            // eslint-disable-next-line
            notType: 'Only ${type}s are allowed.',
        },
        string: {
            // eslint-disable-next-line
            min: 'The value may not be less than ${min} characters',
            // eslint-disable-next-line
            max: 'The value may not exceed ${max} characters.',
            email: 'Email must be in this format: name@example.com',
        },
        number: {
            // eslint-disable-next-line
            min: 'The value may not be less than ${min}.',
            // eslint-disable-next-line
            max: 'The value may not exceed ${max}.',
        },

    })
}

// custom yup methods
// (regex from: https://www.sitepoint.com/community/t/phone-number-regular-expression-validation/2204)
function addPhoneMethod() {
    yup.addMethod(yup.string, 'phone', function () {
        return this.matches(
            /(\d{3}[-\\.\s]?\d{3}[-\\.\s]?\d{4})$/,
            'Phone number must be 10 digits.'
        )
    })
}

function addLettersMethod() {
    yup.addMethod(yup.string, 'letters', function () {
        return this.matches(/[A-Za-z]/, 'Only letters are allowed.')
    })
}

function addCurrencyMethod() {
    yup.addMethod(yup.string, 'currency', function () {
        return this.matches(/(?=.*?\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$/, 'Enter a valid currency format.')
    })
}

I am going to keep digging into it. Hopefully I can fix it. If I do I will definitely update you all on what I had to do.

[vincefednat]

So I feel a bit foolish. But I think I figured my problem out. It was as simple as missing a required npm package. In this case it was Formik.

So maybe for the rest of you, I would double check you actually installed all of your required packages.

[ardeearam]

@vincefednat I agree with this. Turns out that there are just missing packages. But how in the world can we deduce that from the cryptic error message? 🤣