JS files being compiled together.

[KonnorRogers]

Issue

I'm having an issue where all my JS files are being bundled together even with bundle: false

Given the following files:

// packs/application.js

console.log("packs")

// channels/index.js

console.log("channels")

<!-- app/views/layouts/index.html -->
<script src="/snowpacks/packs/application.js" type="module"></script>

When I do the following, both console.logs happen. packs and channels appears twice in the console even though I never import "channels"

Here's my snowpack config.

// Allows for import(`/controllers/${name}_controller.js`)
const dynamicImportVars = require('@rollup/plugin-dynamic-import-vars');

const OUTPUT_PATH = process.env["SNOWPACKER_OUTPUT_PATH"]
const PORT = process.env["SNOWPACKER_PORT"]
const BUILD_DIR = process.env["SNOWPACKER_BUILD_DIR"]
const MOUNT_DIR = process.env["SNOWPACKER_MOUNT_DIR"]
const BABEL_CONFIG = process.env["SNOWPACKER_BABEL_CONFIG_FILE"]
const POSTCSS_CONFIG = process.env["SNOWPACKER_POSTCSS_CONFIG_FILE"]
const HOSTNAME = process.env["SNOWPACKER_HOSTNAME"]

const mount = {
  [`${MOUNT_DIR}`]: `/${OUTPUT_PATH}`,
  web_modules: `/${OUTPUT_PATH}`
}

const installOptions = {
  NODE_ENV: true,
  rollup: {
    plugins: [dynamicImportVars.default()]
  }
}

const devOptions = {
  hostname: HOSTNAME,
  port: parseInt(PORT, 10),
  open: "none",
  out: BUILD_DIR
}

const buildOptions = {
  clean: false,
  baseUrl: "/",
  metaDir: `${OUTPUT_PATH}/__snowpack__`
}

const plugins = [
  [
    "@snowpack/plugin-build-script",
    {
      "cmd": `postcss --config ${POSTCSS_CONFIG}`,
      "input": [".css"],
      "output": [".css"]
    }
  ],
  [
    "@snowpack/plugin-build-script",
    {
      "cmd": `babel --config-file ${BABEL_CONFIG} ${MOUNT_DIR}`,
      "input": [".js"],
      "output": [".js"]
    }
  ],
]

module.exports = {
  mount,
  plugins: plugins,
  installOptions,
  devOptions,
  buildOptions
}

[KonnorRogers]

Here's the repo.

https://github.com/ParamagicDev/snowpacker/tree/development/examples/rails-without-webpack

[KonnorRogers]

Found the issue!

The issue was with my config.

[
  "@snowpack/plugin-build-script",
  {
-   "cmd": `babel --config-file ${BABEL_CONFIG} ${MOUNT_DIR}`,
+   "cmd": `babel --config-file ${BABEL_CONFIG} --filename $FILE`,
    "input": [".js"],
    "output": [".js"]
  }
],

Closing this as resolved.

[FredKSchott]

🤦 glad you found it! Anything that we could have done better here? ex: output that was being hidden that would have shown the issue?

We're just shipping --debug mode in 2.8.0, we could probably log info about the actual command being run.

[KonnorRogers]

I would've liked to use the babel plugin but I didn't see a way to hook it up to a config file. I honestly don't know if there's anything you could've done on your end, it's more of my own lack of Babel understanding than a snowpack issue.

[FredKSchott]

that should definitely be possible! The package readme says: "Automatically inherits from your local project .babelrc or babel.config.json files." https://github.com/pikapkg/snowpack/tree/master/packages/%40snowpack/plugin-babel

But, I think that only looks for a config file at the top-level/cwd. We should support {configFile: BABEL_CONFIG} in the plugin options.

[FredKSchott]

Update oh wait, we already do!

['@snowpack/plugin-babel', {transformOptions: {configFile: BABEL_CONFIG}}]