#`SyntaxError: Invalid or unexpected token` on a CSS import in a Node server

4 messages · Page 1 of 1 (latest)

undone talon
#

The issue occurs in dev and build, though dev doesn't give the same logs as below.

nav.astro

---
import Layout from '../layouts/Layout.astro';
import { Text } from '@nerdwallet/currency/components/Text';
---

<Layout title="Site navigation">
    <Text>some text</Text>
</Layout>

entry.mjs

import '@nerdwallet/currency/components/Text.js';

text.js

var _classes = _interopRequireDefault(require("@nerdwallet/base-styles/classes"));

classes.js

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _stylesModule = _interopRequireDefault(require("../styles.module.css"));

Console error:

/Users/a/Repos/compass/node_modules/@nerdwallet/base-styles/generated/styles.module.css:1
@value transparent: rgba(255,255,255,0);
^

SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1084:15)
    at Module._compile (node:internal/modules/cjs/loader:1119:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/a/Repos/compass/node_modules/@nerdwallet/base-styles/dist/classes.js:18:44)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
error Command failed with exit code 1.

astro.config.ts

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  integrations: [react()],
  vite: {
    ssr: {
      noExternal: [
        '@nerdwallet/base-styles, @nerdwallet/currency',
      ],
    },
  },
});
violet herald
#

Does updating the config like this help?

export default defineConfig({
  site: 'https://localnerd.nerdwallet.com',
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  integrations: [react()],
  vite: {
    ssr: {
      noExternal: [
        '@nerdwallet/base-styles', '@nerdwallet/currency',
      ],
    },
  },
});
undone talon
#

Thank you for proofreading that, that did it! I learned a lot about other Vite options in the process of debugging this yesterday too, but I'm so glad it was that easy in the end.

violet herald
#

Woohoo! Glad it fixed the issue!