Having trouble loading a png from JS
Acccent opened this issue · 0 comments
Acccent commented
Hi,
I'm trying to import a png to use as a texture with three.js, but I get an error. I've created a super slim setup to repro.
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="script.js"></script>
</head>
<body></body>
</html>src/script.js:
import starPNG from './star.png';
import { TextureLoader } from 'three';
const spriteMap = new TextureLoader().load(starPNG);.eleventy.js:
const load = require('eleventy-load');
const loadHtml = require('eleventy-load-html');
const loadJs = require('eleventy-load-js');
const loadFile = require('eleventy-load-file');
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(load, {
rules: [
{
test: /\.(html|md)$/,
loaders: [ { loader: loadHtml, }, ],
},
{
test: /\.js$/,
loaders: [
{ loader: loadJs, },
{
loader: loadFile,
options: { name: '[name].js', publicPath: '/', },
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
loaders: [
{
loader: loadFile,
options: { name: '[name].[ext]', publicPath: '/assets/img', },
},
],
},
],
});
return { dir: { input: 'src', }, };
};(plus any random star.png in src)
When trying to build, I get the following:
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] > Having trouble writing template: _site/index.html
`TemplateWriterWriteError` was thrown
[11ty] > ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Here's the full (but anonymized) debug output, but it doesn't say much:
> set DEBUG=* & eleventy
Eleventy:cmd command: eleventy { _: [], quiet: null, version: false, watch: false, dryrun: false, help: false, serve: false, passthroughall: false, incremental: false } +0ms
Eleventy:EventBus Setting up global EventBus. +0ms
Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms
Eleventy:UserConfig Adding universal filter 'slug' +11ms
Eleventy:UserConfig Adding universal filter 'slugify' +0ms
Eleventy:UserConfig Adding universal filter 'url' +0ms
Eleventy:UserConfig Adding universal filter 'log' +1ms
Eleventy:UserConfig Adding universal filter 'serverlessUrl' +0ms
Eleventy:UserConfig Adding universal filter 'getCollectionItem' +0ms
Eleventy:UserConfig Adding universal filter 'getPreviousCollectionItem' +1ms
Eleventy:UserConfig Adding universal filter 'getNextCollectionItem' +0ms
Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: false, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: {}, nunjucksFilters: {} } +0ms
Eleventy Setting process.env.ELEVENTY_ROOT: '<...>' +0ms
Dev:Eleventy:TemplateConfig Merging via getConfig (first time) +0ms
Eleventy:TemplateConfig Merging config with <...>/.eleventy.js +3ms
Eleventy:UserConfig Adding anonymous plugin +879ms
Eleventy:UserConfig Adding universal shortcode 'load' +1ms
Eleventy:TemplateConfig localConfig: { dir: { input: 'src' }, templateFormats: undefined, transforms: { 'eleventy-load': [Function (anonymous)] }, linters: {}, globalData: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, liquidShortcodes: { load: [Function (anonymous)] }, liquidPairedShortcodes: {}, nunjucksEnvironmentOptions: {}, nunjucksFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksGlobals: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: { load: [Function (anonymous)] }, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsHelpers: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, handlebarsShortcodes: { load: [Function (anonymous)] }, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], load: [Function (anonymous)] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, ignores: Set(1) { 'node_modules/**' }, dataDeepMerge: true, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map(0) {}, extensionMap: Set(0) {}, quietMode: false, events: AsyncEventEmitter { _events: [Object: null prototype] { beforeWatch: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, [Symbol(kCapture)]: false }, plugins: [ { plugin: [Function (anonymous)], options: [Object], pluginNamespace: '' } ], useTemplateCache: true, precompiledCollections: {}, dataFilterSelectors: Set(0) {} } +879ms
Eleventy:TemplateConfig overrides: {} +4ms
Eleventy:TemplateConfig Current configuration: { templateFormats: [ 'liquid', 'ejs', 'md', 'hbs', 'mustache', 'haml', 'pug', 'njk', 'html', '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', dataTemplateEngine: false, htmlOutputSuffix: '-o', jsDataFileSuffix: '.11tydata', keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: 'src', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, nunjucksFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, transforms: { 'eleventy-load': [Function (anonymous)] }, linters: {}, globalData: {}, layoutAliases: {}, passthroughCopies: {}, liquidOptions: {}, liquidTags: {}, liquidFilters: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)] }, liquidShortcodes: { load: [Function (anonymous)] }, liquidPairedShortcodes: {}, nunjucksEnvironmentOptions: {}, nunjucksAsyncFilters: {}, nunjucksTags: {}, nunjucksGlobals: {}, nunjucksAsyncShortcodes: {}, nunjucksShortcodes: { load: [Function (anonymous)] }, nunjucksAsyncPairedShortcodes: {}, nunjucksPairedShortcodes: {}, handlebarsShortcodes: { load: [Function (anonymous)] }, handlebarsPairedShortcodes: {}, javascriptFunctions: { slug: [Function (anonymous)], slugify: [Function (anonymous)], url: [Function (anonymous)], log: [Function (anonymous)], serverlessUrl: [Function (anonymous)], getCollectionItem: [Function (anonymous)], getPreviousCollectionItem: [Function (anonymous)], getNextCollectionItem: [Function (anonymous)], load: [Function (anonymous)] }, pugOptions: {}, ejsOptions: {}, markdownHighlighter: null, libraryOverrides: {}, dynamicPermalinks: true, useGitIgnore: true, ignores: Set(1) { 'node_modules/**' }, dataDeepMerge: true, watchJavaScriptDependencies: true, additionalWatchTargets: [], browserSyncConfig: {}, chokidarConfig: {}, watchThrottleWaitTime: 0, frontMatterParsingOptions: undefined, dataExtensions: Map(0) {}, extensionMap: Set(0) {}, quietMode: false, events: AsyncEventEmitter { _events: [Object: null prototype] { beforeWatch: [Function (anonymous)] }, _eventsCount: 1, _maxListeners: undefined, [Symbol(kCapture)]: false }, plugins: [ { plugin: [Function (anonymous)], options: [Object], pluginNamespace: '' } ], useTemplateCache: true, precompiledCollections: {}, dataFilterSelectors: Set(0) {} } +2ms
Eleventy Eleventy warm up time (in ms) 1265.1933999955654 +890ms
Eleventy:TemplatePassthroughManager Resetting counts to 0 +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./_site +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./_tmp +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./.DS_Store +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./.history/** +1ms
Eleventy:EleventyFiles .gitignore ignoring: ./node_modules/** +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./.vscode +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./_site +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./*git +0ms
Eleventy:EleventyFiles .gitignore ignoring: ./package-lock.json +1ms
Eleventy:EleventyFiles .gitignore ignoring: ./.env +0ms
Eleventy:EleventyFiles .eleventyignore,src/.eleventyignore ignoring: ./node_modules/** +1ms
Eleventy:EleventyFiles .eleventyignore,src/.eleventyignore ignoring: ./README.md +0ms
Eleventy Directories:
Eleventy Input (Dir): src
Eleventy Input (File): undefined
Eleventy Data: src/_data
Eleventy Includes: src/_includes
Eleventy Layouts: undefined
Eleventy Output: _site
Eleventy Template Formats: liquid,ejs,md,hbs,mustache,haml,pug,njk,html,11ty.js
Eleventy Verbose Output: false +11ms
Eleventy:EleventyFiles Searching for: [ './src/**/*.liquid', './src/**/*.ejs', './src/**/*.md', './src/**/*.hbs', './src/**/*.mustache', './src/**/*.haml', './src/**/*.pug', './src/**/*.njk', './src/**/*.html', './src/**/*.11ty.js', './src/**/*.11ty.cjs' ] +11ms
Eleventy:TemplateWriter Found: [ './src/index.html' ] +0ms
Eleventy:TemplatePassthroughManager TemplatePassthrough copy started. +29ms
Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API paths: {} +0ms
Eleventy:TemplatePassthroughManager `addPassthroughCopy` config API normalized paths: [] +0ms
Dev:Eleventy:Template new Template('./src/index.html') +0ms
Dev:Eleventy:Template './src/index.html' getMapped() +1ms
Dev:Eleventy:Template './src/index.html' getData() +1ms
Dev:Eleventy:TemplateData getLocalDataPaths('./src/index.html') +0ms
Dev:Eleventy:TemplateData parsed.dir: './src' +0ms
Eleventy:TemplateData Using '.11tydata' to find data files. +0ms
Dev:Eleventy:TemplateData allDirs: [ './src' ] +1ms
Dev:Eleventy:TemplateData dirStr: './src'; inputDir: './src' +1ms
Eleventy:TemplateData getLocalDataPaths('./src/index.html'): [ './src/index.11tydata.js', './src/index.11tydata.cjs', './src/index.11tydata.json', './src/index.json', './src/src.11tydata.js', './src/src.11tydata.cjs', './src/src.11tydata.json', './src/src.json' ] +1ms
Eleventy:TemplateWriter ./src/index.html begun adding to map. +6ms
Eleventy:TemplatePassthroughManager TemplatePassthrough copy finished. Current count: 0 +6ms
Dev:Eleventy:Template './src/index.html' getData() getTemplateDirectoryData and getGlobalData +3ms
Eleventy:Template Template date: using file’s 'birthtimeMs' for './src/index.html' of 2022-02-11T00:02:09.761Z (from 1644537729761.5479) +0ms
Dev:Eleventy:Template './src/index.html' getData() mergedData +4ms
Eleventy:TemplateMap Caching collections objects. +0ms
Eleventy:TemplateMap Collection: collections.all size: 1 +2ms
Eleventy:TemplateMap Collection: collections.all size: 1 +0ms
Eleventy:Template Second round of computed data for './src/index.html' +4ms
Eleventy:ComputedData Computed data order of execution: [] +0ms
Dev:Eleventy:Template './src/index.html' render() +5ms
Dev:Eleventy:Template Template.render renderContent for './src/index.html' +0ms
Dev:Eleventy:TemplateContent './src/index.html' compile() using engine: 'html' +0ms
Dev:Eleventy:TemplateContent './src/index.html' getCompiledTemplate function created +3ms
Dev:Eleventy:TemplateContent './src/index.html' getCompiledTemplate called, rendered content created +1ms
Eleventy:Benchmark Benchmark 1ms 0% 1× (Aggregate) Template Read +0ms
Eleventy:Benchmark Benchmark 3ms 0% 1× (Aggregate) Template Compile +1ms
Eleventy:Benchmark Benchmark 3ms 0% 1× (Aggregate) > Template Compile > ./src/index.html +0ms
Eleventy:Benchmark Benchmark 1ms 0% 1× (Aggregate) Render +0ms
Eleventy:Benchmark Benchmark 1ms 0% 1× (Aggregate) > Render > ./src/index.html +0ms
[11ty] Wrote 0 files in 4.90 seconds (v1.0.0)
Eleventy Finished writing templates. +5s
Eleventy
Eleventy Getting frustrated? Have a suggestion/feature request/feedback?
Eleventy I want to hear it! Open an issue: https://github.com/11ty/eleventy/issues/new +0ms
ELIFECYCLE Command failed with exit code 1.