FredKSchott / snowpack

ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
https://www.snowpack.dev
MIT License
19.48k stars 921 forks source link

🐛 BUG: Using `import.meta.hot` in comment causes build issues #3768

Open brandon-pereira opened 3 years ago

brandon-pereira commented 3 years ago

Quick checklist

What package manager are you using?

npm

What operating system are you using?

macOS

Describe the bug

Following the recommendations in this issue (https://github.com/snowpackjs/snowpack/issues/3621#issuecomment-907731004) I added import.meta.hot wherever I am using __SNOWPACK_ENV. However, because this is something I wasn't familiar with I thought it would be a good idea to document why I added import.meta.hot to the file so others knew.

Once I added a multi-line JS comment explaining the issue, I noticed our builds started failing with an obtuse error:

[11:30:59] [snowpack] ! building files...
[11:31:01] [snowpack] Build Result Error: There was a problem with a file build result.
[11:31:01] [snowpack] Parse error @:5:50
[11:31:01] [snowpack] Error: Parse error @:5:50
    at parse (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/node_modules/es-module-lexer/dist/lexer.cjs:1:402)
    at scanCodeImportsExports (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/rewrite-imports.js:21:29)
    at transformEsmImports (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/rewrite-imports.js:37:27)
    at Object.transformFileImports (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/rewrite-imports.js:108:16)
    at FileBuilder.resolveImports (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/build/file-builder.js:116:48)
    at async Object.loadUrl (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/commands/dev.js:641:39)
    at async flushFileQueue (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/build/process.js:191:24)
    at async Object.buildFiles (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/build/process.js:226:5)
    at async build (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/commands/build.js:11:5)
    at async Object.command (/Users/brandonp/Sites/Other/betterdo-ui/node_modules/snowpack/lib/cjs/commands/build.js:35:9)

After debugging it, I realized it was the import.meta.hot comment in our comment, after removing that comment our builds started succeeding again.

Current Outcome:

Adding comment like this /* import.meta.hot */ inside of a JS file causes build to fail

Current Workaround:

Adding comment like this /* imports meta.hot method */ inside of JS file causes build to succeed.

Expected Outcome:

Adding comment like this /* import.meta.hot */ does not cause build to fail.

Steps to reproduce

You can checkout my code here: https://github.com/brandon-pereira/betterdo-ui/commit/4d9b0f8e58f29029e842f351a1ce7990fba9a6b0

If you remove / split up import.meta.hot from the scripts/utilities/env.js file, npx snowpack build will succeed.

Here is how I fixed the issue: https://github.com/brandon-pereira/betterdo-ui/commit/9df97b7b854feb3ee10677832c53df8becc8f954

Link to minimal reproducible example (optional)

No response

sanisoclem commented 2 years ago

Encountered the same thing. I followed the react tutorial: https://www.snowpack.dev/tutorials/react. After adding the HMR block, snowpack dev still works but snowpack build throws the above error. Removing the HMR block (or the comments containing import.meta.hot) resolves the problem.