ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Atlassian Ecosystem Design
1

Error Text

[1] /Users/xxxx/code/xxxx/node_modules/@atlaskit/icon/node_modules/@atlaskit/theme/index.js:1
[1] import * as colors from './colors';
[1] ^
[1] ParseError: 'import' and 'export' may appear only with 'sourceType: module'

and

[1] /Users/xxxx/code/xxxx/node_modules/@atlaskit/dynamic-table/index.js:1
[1] export { default } from './components/Stateful';
[1] ^
[1] ParseError: 'import' and 'export' may appear only with 'sourceType: module'

More info

It seems that some packages in atlaskit are using the form import { default } from 'some/component' because those components are exporting in the form export default class SomeComponent extends React.Component as opposed to export default SomeComponent.

(example: Bitbucket)

I’ve looked at various Babel and Browserify plugins, have gone through lots of tickets on github with the same err, and none seem to have a solution. This had not been a problem until this week when we had to reinstall node_modules from scratch, and we’re wondering if some updates were made retroactively to various atlaskit components

  • in the case of atlaskit/select, theme/colors is a peerdep
  • whereas dynamic-table it just fails alone, because it’s ^11.x (trying it out for the first time for a new view)

Configs

Our import statements:

import { CheckboxSelect } from '@atlaskit/select'
// and
import DynamicTable from '@atlaskit/dynamic-table'

Our build command:

"js:watch:frontend": "watchify path/to/our/app.js --extension=\".jsx\" -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ] -t [ envify --NODE_ENV development --API=\"https://our.api.com/\" ] -o public/dist/app.js -dv",

.babelrc

{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "> .5% or last 3 versions, not IE <= 11"
          ]
        }
      }
    ]
  ]
}

Package Versions:

"@atlaskit/dynamic-table": "^11.0.1",
"@atlaskit/select": "^6.1.4",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"browserify": "^16.2.3",
"watchify": "^3.11.1",
"babelify": "^10.0.0",
...

etc.

We’ve tried various preset-env configurations (as well as removing it completely) to no avail. Have tried rewriting the CLI command as a Gulp config with the same result. Have tried webpack with the same kind of issue. etc. etc.

Thank you for taking a look at this

1 Like