HUGO

NPM import - Uncaught SyntaxError: Cannot use import statement outside a module

#1

Hi! I’ve been really looking for an answer to this one on my own and I come to the community because I’m out of options :slight_smile: So thanks in advance for any hints.

I’m trying to import AOS into my project.
So I went ahead and installed it:

npm install --save aos@next

and then added this to my script.js in assets

import AOS from 'aos';
import 'aos/dist/aos.css'; 

AOS.init();

Finally I added this to my footer:

{{ $script := resources.Get "js/script.js" | minify}}
<script src="{{ $script.Permalink }}"></script>

All I’m getting in the console is this:

Uncaught SyntaxError: Cannot use import statement outside a module

Help? What am I doing wrong?

#2

You call js.Build first to build your js.

2 Likes
#3

Thanks, that is the right resource.

Yet it doesn’t seem clear to my how I should handle CSS via import.

{{ $built := resources.Get "js/script.js" | js.Build "main.js" }}
<script src="{{ $built.Permalink }}"></script>

JS File:

import { AOS } from 'aos';
import * as data from 'aos/dist/aos.css';

AOS.init();

Error:

Cannot import "node_modules/aos/dist/aos.css" into a 
JavaScript file without an output path configured
#4

@SuperSonicSites I would not try to import the stylesheet in your JS file.

Instead, I would @import it using Scss, or Concat it into your stylesheet bundle.

#5

@SuperSonicSites

I had the same issue with fullcalendar.io. The main.js file in the common folder included an import of a css file. I deleted that single line and it worked. Likely aos has the same issue.

Edit: Of course, you would then have to manually copy the css file from the import into your build directory, which obviously does not make sense, and you would not be able to easily import the modules without taking these steps every time. It was late and this does not solve the problem. I have been looking for a solution all morning but have not found one if anyone else sees this and knows what to do.

#6

The error arises from esbuild, specifically seen in this test case.
esbuild bundler tests

func TestImportCSSFromJSWriteToStdout(t *testing.T) {
	css_suite.expectBundled(t, bundled{
		files: map[string]string{
			"/entry.js": `
				import "./entry.css"
			`,
			"/entry.css": `
				.entry { color: red }
			`,
		},
		entryPaths: []string{"/entry.js"},
		options: config.Options{
			Mode:          config.ModeBundle,
			WriteToStdout: true,
		},
		expectedScanLog: `entry.js: error: Cannot import "entry.css" into a JavaScript file without an output path configured
`,
	})
}

I may not have time to test this and I have not looked at the Hugo source code to see, but the error arises from writing to standard output. It will work if an output directory is configured. I do not know if you can specific the targetpath option for js.Build to a directory or only a file. I am posting this here in case someone else has time to check before I get to it. ESBuild should be able to output a css file next to the js file.