Vue is treating Javascript object as a css! Error: CssSyntaxError

[samayo]

Version

15.7.0

Reproduction link

https://jsfiddle.net/32nyaxoj/

Steps to reproduce

npm run build

What is expected?

to build

What is actually happening?

I think vue-loader 15.x is the issue, the javascript code is being parsed as a css file for some reason. Everything used to work perfectly prior to vue-loader 15.x

---

I am trying to make a library for vue and push to NPM.

Until around last year, I used this guide of mine https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm/47757050#47757050 to build and publish packages, but now with the new vue-loader, everything is broken, been trying to fix every possible error, and all I get one error after another.

here is a sample of an error:

ERROR in ./src/components/Hello.vue (./node_modules/css-loader/dist/cjs.js!./src/components/Hello.vue)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(51:3) Unknown word

  49 |
  50 | import {
> 51 |   foo,
     |   ^
  52 |   bar
  53 | } from '../utils'

The Hello.vue file simple contains an HTML tag with and <script> simplified example below

<template>
<div> ... </div>
</template>

<script>
import {foo, bar} from '../utils'

export default {} 
</script>

[Justineo]

Vue Loader 15 has several breaking changes (that's why we increased the major version) and please make sure you have followed the migration guide. After that, if you still can't get things working and think it's a bug, you may need to provide a minimal repo that reproduces the issue since it requires a build step (we can't figure out the problem from the fiddle alone).

[samayo]

Ok, how about from the error CssSyntaxError (51:3) Unknown word it gives away a pretty clear indication as it isn't a vague error