[BUG] Babel-plugin bug on imports with comments

alubbe commented 3 years ago

Bug Report Quick Checklist

[x] I am on the latest version of Snowpack & all plugins.
[x] I use package manager npm (Fill in: npm, yarn, pnpm, etc).
[x] I run Snowpack on OS Mac (Fill in: Windows, Mac, Linux, etc).
[x] I run Snowpack on Node.js v14 (bug also exists on 16)

Describe the bug

When using the '@snowpack/plugin-babel', plugin, we cannot import this:

import * as am4charts from '@amcharts/amcharts4/charts';

because snowpack dev throws this error:

Cannot find module '
          /* webpackChunkName: "pdfmake" */
          'pdfmake/build/pdfmake.js'' from '/snowpack-babel-import/node_modules/@amcharts/amcharts4/charts.js'

It compiles just fine when disabling the babel plugin.

To Reproduce

Clone https://github.com/alubbe/snowpack-babel-import
npm install
npm start to see the error
Remove or comment out '@snowpack/plugin-babel' from snowpack.config.js
npm start now works

Ideas

Interestingly, doing things like this in our index.jsx compiles just fine

import(/* webpackChunkName: "pdfmake" */ "pdfmake/build/pdfmake.js"),

import(
  /* webpackChunkName: "books" */
  'react');

and also snowpack build also works fine.

Googling around I found these two pieces of information, which might help understand what's going on: https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/ https://github.com/webpack/webpack/issues/8656

Let me know if there's anything else I can help with here!

alubbe commented 3 years ago

I know you're all incredibly busy, but here's a gentle poke to see if anyone has an idea what could be causing this issue - happy to help brain storm a solution!

From the fact that snowpack dev is affected while snowpack build works just fine, it might be a rollup configuration difference?

tom-sherman commented 3 years ago

I've ran into a similar issue when using react-syntax-highlighter. Stack trace below

Error: Cannot find module '
    /* webpackChunkName: "react-syntax-highlighter_languages_highlight_oneC" */
    'highlight.js/lib/languages/1c'' from '~/node_modules/react-syntax-highlighter/dist/esm/index.js'
    at Function.resolveSync [as sync] (~/node_modules/resolve/lib/sync.js:102:15)
    at Object.resolveEntrypoint (~/node_modules/snowpack/lib/index.js:97684:59)
    at PackageSourceLocal.buildPackageImport (~/node_modules/snowpack/lib/index.js:124589:34)
    at async ~/node_modules/snowpack/lib/index.js:124749:21
    at async PackageSourceLocal.buildPackageImport (~/node_modules/snowpack/lib/index.js:124616:30)
    at async ~/node_modules/snowpack/lib/index.js:124749:21
    at async PackageSourceLocal.buildPackageImport (~/node_modules/snowpack/lib/index.js:124616:30)
    at async PackageSourceLocal.prepare (~/node_modules/snowpack/lib/index.js:124392:13)
    at async Object.command (~/node_modules/snowpack/lib/index.js:125207:5)
    at async cli (~/node_modules/snowpack/lib/index.js:178039:9)

Not using the babel plugin though, used the typescript react template.

FredKSchott / snowpack