2.0.0-3 broken in Webpack v4 without babel-loader & export-namespace-from support

[dikkini]

 error  in ./node_modules/yaml/browser/index.js

Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| export * as default from './dist/index.js'
| export * from './dist/index.js'
|

[eemeli]

Any chance of getting more details of the environment & config where you encountered this?

[dikkini]

Any chance of getting more details of the environment & config where you encountered this?

VueJs, webpack, launch build:
npm run build:production

if change dependency from 2.0.0-3 to 2.0.0-2 -- everything works fine

[eemeli]

You may need to share your entire package.json and Webpack config, as that doesn't really tell me anything about what your build:production script might be doing. I'm also not sure how the Vue.js part might be relevant here.

[eemeli]

Closing due to lack of information & repeatability. Please do fill out the template when filing bug reports.

[rusenask]

Hi @eemeli, got the same one, my deps:

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@websanova/vue-auth": "^4.1.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "material-design-icons-iconfont": "^6.1.0",
    "stylus": "^0.54.8",
    "stylus-loader": "3",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.2",
    "vue-codemirror": "^4.0.6",
    "vue-ls": "^3.2.2",
    "vue-router": "^3.4.9",
    "vuetify": "^2.2.11",
    "vuex": "^3.6.0",
    "yaml": "^2.0.0-3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "~2.0.9",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

and the build error:

 ERROR  Failed to compile with 1 error                                                                                            23:15:30

 error  in ./node_modules/yaml/browser/index.js

Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export * as default from './dist/index.js'
| export * from './dist/index.js'
| 

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/applications/ApplicationDetailsPage.vue?vue&type=script&lang=js& 61:0-24 120:32-36
 @ ./src/components/applications/ApplicationDetailsPage.vue?vue&type=script&lang=js&
 @ ./src/components/applications/ApplicationDetailsPage.vue
 @ ./src/components lazy ^\.\/.*\.vue$ namespace object
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.111:3000&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Not sure what else would be helpful. Didn't do any config apart from importing the package

[dikkini]

You may need to share your entire package.json and Webpack config, as that doesn't really tell me anything about what your build:production script might be doing. I'm also not sure how the Vue.js part might be relevant here.

2.0.0-3 update is broken. please take a look what have been changed this time.

i fixed my problem (i have great frontend man in my team), but i'm pretty sure, a lot of people cant handle this.

[eemeli]

Thank you @rusenask, with that info I was able to recreate the issue & then trace it down to more specifics.

The problem was surfaced in the 2.0.0-3 prerelease by the change made to solve issue #203, where the main browser endpoint was modified to use export * as default from ... syntax, which has been in the ECMA-262 spec from October 2019. Unfortunately, that syntax is not directly supported by Webpack v4, and so requires e.g. babel-loader to parse properly. It's showing up for you and @dikkini because @vue/cli-service uses Webpack v4 internally, and has its Babel config set to exclude content in node_modules from transpilation. The syntax works perfectly fine in Webpack v5.

As a workaround, adding this to your Vue config should probably apply a minimal fix for the issue.

// vue.config.js
module.exports = {
  configureWebpack(config) {
    config.module.rules.push({
      test: /node_modules\/yaml\/browser\/index\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-proposal-export-namespace-from']
        }
      }
    })
  }
}

Those should are already transitive dependencies of your projects.

Provided that this workaround works for you, I'm going to return to this later to see if it's worth fixing more properly, or if I should do something else about the browser exports. To be clear, this is a prerelease, so I consider it exactly the sort of place where to beta-test features such as this change, for which I can't be certain that all corner cases get covered by my own testing.

[dikkini]

Thanks @eemeli! It is great to be usefull tester, just dont close topics 👯

[eemeli]

@dikkini, you opted not to use the bug report template this repo provides, and did not provide sufficient information for recreating the issue. That's why it was closed. I did mention this earlier:

Closing due to lack of information & repeatability. Please do fill out the template when filing bug reports.

[benrbray]

For the benefit of future frustrated webpack v4 --> v5 migrants who stumble on this issue, I ended up with the following yaml error upon upgrading to webpack v5:

ERROR in ./node_modules/yaml/browser/dist/index.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import { d as defaultTagPrefix, _ as _createForOfIteratorHelper, a as _typeof, b as _createClass, c as _classCallCheck, e as _defineProperty, Y as YAMLSyntaxError, T as Type, f as YAMLWarning, g as YAMLSemanticError, h as _slicedToArray, i as YAMLError, j as _inherits, k as _createSuper } from './PlainValue-ff5147c6.js';
| import { parse as parse$1 } from './parse-cst.js';
| import { b as binaryOptions, a as boolOptions, i as intOptions, n as nullOptions, s as strOptions, N as Node, P as Pair, S as Scalar, c as stringifyString, A as Alias, Y as YAMLSeq, d as YAMLMap, M as Merge, C as Collection, r as resolveNode, e as isEmptyPath, t as toJSON, f as addComment } from './resolveSeq-04825f30.js';

As it turns out, this new version of yaml is currently published as yaml@next, so an npm outdated didn't catch it. A quick npm install yaml@next seems to have solved the problem in webpack 5.

[eemeli]

Oops, misclick. Apologies.

[eemeli]

@benrbray The issue you hit isn't really this one, but #208. And that should be fixed for yaml@1 by the v1.10.1 patch release.