bug: unexpected token when parsing module

[sbellver]

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

└─┬ @ionic/vue@7.1.2
  ├─┬ @ionic/core@7.1.2
  │ ├── @stencil/core@3.4.1
  │ └─┬ ionicons@7.1.0
  │   └── @stencil/core@2.22.3
  └─┬ ionicons@7.1.2
    └── @stencil/core@2.22.3

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://chat.stenciljs.com

Current behavior:

After run ionic serve, i have several errors about pwa-elements (camera-modal, camera, toast, ...)

Expected behavior:
Run ionic serve without error

Steps to reproduce:
After update my package.json to latest versions, i have several errors.

Module parse failed: Unexpected token (1:10)
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

I need to install babel to solve some of them.

Then i create the .babelrc file

{
  "presets": ["@babel/preset-vue"]
}

After that, i have errors on pwa-elements

Related code:
package.json

{
    "name": "com.app.name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "serve-dev": "vue-cli-service serve --mode dev",
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "@capacitor/android": "^5.1.1",
        "@capacitor/app": "^5.0.5",
        "@capacitor/camera": "^5.0.5",
        "@capacitor/core": "^5.1.1",
        "@capacitor/geolocation": "^5.0.5",
        "@capacitor/haptics": "^5.0.5",
        "@capacitor/ios": "^5.1.1",
        "@capacitor/keyboard": "^5.0.5",
        "@capacitor/status-bar": "^5.0.5",
        "@fortawesome/fontawesome-svg-core": "^6.4.0",
        "@fortawesome/free-brands-svg-icons": "^6.4.0",
        "@fortawesome/free-regular-svg-icons": "^6.4.0",
        "@fortawesome/free-solid-svg-icons": "^6.4.0",
        "@fullcalendar/common": "^5.11.5",
        "@fullcalendar/core": "^6.1.8",
        "@fullcalendar/daygrid": "^6.1.8",
        "@fullcalendar/interaction": "^6.1.8",
        "@fullcalendar/list": "^6.1.8",
        "@fullcalendar/resource-timeline": "^6.1.8",
        "@fullcalendar/vue3": "^6.1.8",
        "@ionic/core": "^7.1.2",
        "@ionic/pwa-elements": "^3.2.1",
        "@ionic/vue": "^7.1.2",
        "@ionic/vue-router": "^7.1.2",
        "@juggle/resize-observer": "^3.4.0",
        "@sentry/tracing": "^7.57.0",
        "@sentry/vue": "^7.57.0",
        "@vueuse/core": "^10.2.1",
        "axios": "^1.4.0",
        "babel-preset-vue": "^2.0.2",
        "chart.js": "^4.3.0",
        "core-js": "^3.31.1",
        "i18n": "^0.15.1",
        "install": "^0.13.0",
        "jsqr": "^1.4.0",
        "moment": "^2.29.4",
        "npm": "^9.8.0",
        "onesignal-cordova-plugin": "^3.3.1",
        "pinia": "^2.1.4",
        "sass": "^1.63.6",
        "swiper": "^10.0.4",
        "upgrade": "^1.1.0",
        "vue": "^3.3.4",
        "vue-i18n": "^9.2.2",
        "vue-router": "^4.2.4",
        "vue-signature-pad": "^3.0.2"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "@babel/plugin-transform-runtime": "^7.22.7",
        "@capacitor/cli": "^5.1.1",
        "@types/jest": "^29.5.2",
        "@typescript-eslint/eslint-plugin": "^5.61.0",
        "@typescript-eslint/parser": "^5.61.0",
        "@vue/cli-plugin-babel": "^5.0.8",
        "@vue/cli-plugin-e2e-cypress": "~5.0.8",
        "@vue/cli-plugin-eslint": "~5.0.8",
        "@vue/cli-plugin-router": "~5.0.8",
        "@vue/cli-plugin-typescript": "~5.0.8",
        "@vue/cli-service": "^5.0.8",
        "@vue/eslint-config-typescript": "^11.0.3",
        "@vue/test-utils": "^2.4.0",
        "css-loader": "^6.8.1",
        "cypress": "^12.17.0",
        "eslint": "^8.44.0",
        "eslint-plugin-vue": "^9.15.1",
        "sass-loader": "^13.3.2",
        "typescript": "^5.1.6",
        "vue-cli-plugin-route": "^0.0.7",
        "webpack": "^5.88.1"
    },
    "description": "An Ionic project"
}

Example of one error

Module parse failed: Unexpected token (1:10)
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
> {"version":3,"names":[],"sources":[],"mappings":""}

Other information:

I try to use babel.config.js

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}```

But nothing works.

[sbellver]

After upgrade to ionic 7 i have this issue.

If i comment out pwa-elements my code work as expected :(

[laine-hallot]

I have the same issue after upgrading pwa-elements to 3.2.1, but going to 3.2.0 seems to fix things for me.

It seems like the issue is coming from this PR #122 (comment), specifically this line here

pwa-elements/stencil.config.ts

Line 12 in e7dbc60

buildEs5: true,

That PR is supposed to make the 3.2.1 build of pwa-elements look same as it did pre 3.2.0 in terms of es5 output (my Webpack is specifically complaining about map files).
The weird thing is though that I don't get the same error on older versions of pwa-elements like 3.0.2 and those old versions had map files too (no real reason in picking 3.0.2 version as a test case its just what I was using before).

It seems like the problem is probably a difference between the es5 output of older versions of stencil and version ^3.4.0 of stencil with the buildEs5: true, option enabled.

@sbellver Could you post your webpack config? I want to see if we have anything in common in our configs that could relate to the issue.

[laine-hallot]

So I think the issue is actually that source map files are being generated by newer versions of stencil when building the es5 output.

Build test cases:

1. stencil@1.8.11: generates the es5 output without source map files.
   • https://github.com/laine-hallot/pwa-elements/tree/debug/3.1.0/dist
2. stencil@3.4.0: generates es5 output with source map files.
   • https://github.com/laine-hallot/pwa-elements/tree/640d091b479b2e0afbaed51a99f89f32e9a700e9/dist
3. stencil@3.4.0 with sourceMap: false: generates the es5 output without the source map files.
   • https://github.com/laine-hallot/pwa-elements/tree/debug/3.2.1/dist

If I copy the dist/ and loader/ dirs from test case 3 into my main project's node_modules/@ionic/pwa-elements my Webpack build completes as normal even when using @ionic/pwa-elements@3.2.1.

If the issue is that these source map files show up in the es5 build and just break it in Webpack I don't really know why stencil would generate them by default, so maybe this is something wrong with my Webpack loaders.

@sean-perkins Are these source map files not supposed to be there for the es5 build output or is there just something wrong with @sbellver 's and I's Webpack loaders?

Here's a branch with the sourceMap change and without the dist files if you want to take a look for yourself https://github.com/laine-hallot/pwa-elements/tree/fix/es5-source-maps

[NeluQi]

+1 vue3 + webpack

[sean-perkins]

If anyone can provide a minimal reproduction project to replicate this issue on, that would be greatly appreciated 👍