Yarn build returns Unexpected character '' (1:0)

ben · November 29, 2023, 3:36pm

Howdy! Can you provide some details about your local dev setup where you’re running that command?

abombelli · November 29, 2023, 3:43pm

Hi!
Yes.
yarn v1.22.19
node v16.17.0

An this is this the package.json


{
  "name": "radicle",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "build": "yarn bud build production",
    "dev": "yarn bud build development",
    "lint": "yarn lint:js && yarn lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "yarn lint",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/radicle.pot --include=\"app,config,resources,public/dist/js\"",
    "translate:update": "wp i18n update-po ./resources/lang/radicle.pot ./resources/lang/*.po",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@playwright/test": "1.38.0",
    "@popperjs/core": "^2.11.8",
    "@roots/bud": "^6.17.0",
    "@roots/bud-eslint": "^6.17.0",
    "@roots/bud-imagemin": "^6.17.0",
    "@roots/bud-preset-wordpress": "^6.17.0",
    "@roots/bud-prettier": "^6.17.0",
    "@roots/bud-sass": "^6.17.0",
    "@roots/bud-stylelint": "^6.17.0",
    "@roots/bud-swc": "^6.17.0",
    "@roots/eslint-config": "^6.17.0",
    "@roots/sage": "^6.17.0",
    "@types/alpinejs": "^3.7.1",
    "@types/wordpress__block-editor": "11.5.3",
    "@types/wordpress__blocks": "12.5.3",
    "bootstrap": "^5.3.2",
    "typescript": "5.2.2"
  },
  "dependencies": {
    "@roots/wordpress-hmr": "6.16.1",
    "alpinejs": "3.13.0"
  }
}

BTW: I replaces tailwind with bootstrap adding
@import 'bootstrap/scss/bootstrap';
to app.scss

Each time I run yarn build this changes to
@import url('bootstrap/scss/bootstrap');
resulting in


│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ Error: Failed to find 'bootstrap/scss/bootstrap'
│ │   in [
│ │     resources/styles
│ │   ]
│ │     at node_modules/postcss-import/lib/resolve-id.js:35:13
│ │     at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:261:11)
│ │     at async Object.loader (node_modules/postcss-loader/dist/index.js:84:14)

Any idea what this could be related to?

Thanks!

ben · November 29, 2023, 3:57pm

Does your build work properly with Tailwind? Just a heads up — the support that I offer with Radicle doesn’t cover a change like using Bootstrap instead, but maybe someone from the community has ran into this issue and would be willing to lend a hand

abombelli · November 29, 2023, 4:01pm

The initially mentioned error also happens with Tailwind.

ben · November 29, 2023, 4:04pm

Thanks for confirming

Can you try upgrading to Node v18? What OS are you on?

abombelli · November 30, 2023, 8:01am

Ok.
Changed to v18.15.0 and made a fresh install.
Still the same problem.
The environment is on a Linux box.

ben · November 30, 2023, 2:56pm

Some ideas:

Change all bud.js package versions from 6.16.1 to 2023.11.29-108
Try yarn cache clean
Try using npm or pnpm instead
Remove the lock file and try again

abombelli · November 30, 2023, 3:10pm

Changed all bud packages to 6.18
Cleared yarn cache
Removed lock file
Used ppm run build

Returned still all the same error: Module parse failed: Unexpected character ‘’ (1:0)

kellymears · November 30, 2023, 6:32pm

Can you try running it without @roots/bud-imagemin?

yarn remove @roots/bud-imagemin

I think your issue might be related to: Module parse failed: Unexpected character '�' (1:0) · Issue #2350 · lovell/sharp · GitHub

If this works you can probably fix it with:

bud.externals({sharp: 'commonjs sharp'})

References:

https://sharp.pixelplumbing.com/install#bundlers

abombelli · November 30, 2023, 9:10pm

Thanks a lot.
Unfortunately it did not help.
Is there any way to find out the module the error refers to?

kellymears · December 1, 2023, 12:07am

Let’s just override the dashboard entirely with our own implementation:

app.set(`dashboard`, {
  render: result => {
    const [data, human] = [result.toJson(), result.toString()]

    process.stdout.write(human)
    app.fs.write(`result.yml`, data.errors ?? data)
  },
})

Sorry that this is happening with your project but I’ll admit I’m super curious what this turns out to be! If it ends up being on our end i would love to be able to reproduce it and set up a test against it, so let me know!

I set it up to output the error object to a yml file in the project basedir. It would be helpful if you posted it (but redact any sensitive information, if included).

abombelli · December 1, 2023, 7:22am

Could you just point me the right place to add this code?

kellymears · December 1, 2023, 7:53am

anywhere in bud.config.js within the exported function:

export default async app => {
  // debug
  app.set(`dashboard`, {
    render: result => {
      const [data, human] = [result.toJson(), result.toString()]
      process.stdout.write(human)
      app.fs.write(`result.yml`, data.errors ?? data)
    },
  })

  // ...rest of config
  app.entry(`foo`, [`scripts/foo`])
  // etc.
}

dsturm · December 1, 2023, 8:36am

kellymears:

// debug
  app.set(`dashboard`, {
    render: result => {
      const [data, human] = [result.toJson(), result.toString()]
      process.stdout.write(human)
      app.fs.write(`result.yml`, data.errors ?? data)
    },
  })

Thanks for the hint with the error logging. I ran into a similiar error while trying to import the @splidejs css into my js - it results in:

- moduleIdentifier: >-
    /Users/dcsturm/wrk/test/wp-themes/sage/node_modules/@splidejs/splide/dist/css/splide.min.css
  moduleName: ../node_modules/@splidejs/splide/dist/css/splide.min.css
  loc: '1:0'
  message: >-
    Module parse failed: Unexpected token (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

    >
    .splide__container{box-sizi[...]

Could fix my error, using the solution @erip2 mentioned in Added a dependency but stylesheet can't be found - #5 by erip2

@kellymears: why does Bud, although having css-loader set up already, needs to have css-loader added again? Am I missing something here?

abombelli · December 1, 2023, 2:05pm

Ah, I’m on Radicle.
Shall I change app with bud?

abombelli · December 1, 2023, 2:14pm

Ok, getting closer.

> radicle:
>   assets by status 71 KiB [cached] 8 assets
>   assets by path . 7.3 KiB
>     asset ../content/themes/radicle/theme.json 6.25 KiB [compared for emit]
>     asset manifest.json 563 bytes [compared for emit]
>     asset entrypoints.json 511 bytes [compared for emit]
>   Entrypoint app 56.4 KiB = js/runtime.55b6d6.js 1.41 KiB css/app.fb1635.css 13.7 KiB js/app.e16661.js 41.3 KiB
>   Entrypoint editor 15.3 KiB = js/runtime.55b6d6.js 1.41 KiB css/editor.2c16bf.css 3.8 KiB js/editor.6008f9.js 10.1 KiB
>   orphan modules 136 KiB (javascript) 1.01 KiB (runtime) [orphan] 34 modules
>   runtime modules 4.49 KiB 10 modules
>   built modules 111 KiB (javascript) 26.6 KiB (css/mini-extract) [built]
>     modules by path ./ 110 KiB (javascript) 26.6 KiB (css/mini-extract)
>       modules by path ./scripts/ 110 KiB 12 modules
>       modules by path ./styles/*.css 100 bytes (javascript) 26.6 KiB (css/mini-extract)
>         javascript modules 100 bytes 2 modules
>         css modules 26.6 KiB 2 modules
>     modules by path ../node_modules/ 1.05 KiB
>       ../node_modules/react/jsx-runtime.js 214 bytes [built] [code generated]
>       ../node_modules/react/cjs/react-jsx-runtime.production.min.js 859 bytes [built] [code generated]
>     external ["wp","blocks"] 42 bytes [built] [code generated]
>     external "React" 42 bytes [built] [code generated]
>     external ["wp","i18n"] 42 bytes [built] [code generated]
> 
>   ERROR in ./scripts/editor/@eaDir/example.block.tsx@SynoEAStream 1:0
>   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)
>    @ ./scripts/editor/ sync .*\.block\..*$ ./@eaDir/example.block.tsx@SynoEAStream
>    @ ./scripts/editor.ts 2:28-5:6
> 
>   ERROR in ./scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream 1:0
>   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)
>    @ ./scripts/editor/ sync .*\.plugin\..*$ ./@eaDir/example.plugin.tsx@SynoEAStream
>    @ ./scripts/editor.ts 23:29-26:6
> 
>   ERROR in ./scripts/editor/@eaDir/modal.block.tsx@SynoEAStream 1:0
>   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)
>    @ ./scripts/editor/ sync .*\.block\..*$ ./@eaDir/modal.block.tsx@SynoEAStream
>    @ ./scripts/editor.ts 2:28-5:6

There are some hidden Synology files in the folders. I guess they cause the problem.
Is there a way to ignore them? Or the folders “@eaDir”?

abombelli · December 1, 2023, 2:26pm

An here the yml output:

- moduleIdentifier: >-
    /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/example.block.tsx@SynoEAStream
  moduleName: ./scripts/editor/@eaDir/example.block.tsx@SynoEAStream
  loc: '1:0'
  message: "Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)"
  moduleId: ./scripts/editor/@eaDir/example.block.tsx@SynoEAStream
  moduleTrace:
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.block\..*$/|groupOptions:
        {}
      originName: ./scripts/editor/ sync .*\.block\..*$
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/example.block.tsx@SynoEAStream
      moduleName: ./scripts/editor/@eaDir/example.block.tsx@SynoEAStream
      dependencies:
        - loc: ./@eaDir/example.block.tsx@SynoEAStream
      originId: ./scripts/editor sync recursive .*\.block\..*$
      moduleId: ./scripts/editor/@eaDir/example.block.tsx@SynoEAStream
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/node_modules/swc-loader/src/index.js??swc!/volume1/Development/projects/interface-DEMO/site-v2/node_modules/@roots/wordpress-hmr/lib/loader.cjs??@roots/wordpress-hmr/loader!/volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor.ts
      originName: ./scripts/editor.ts
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.block\..*$/|groupOptions:
        {}
      moduleName: ./scripts/editor/ sync .*\.block\..*$
      dependencies:
        - loc: 2:28-5:6
      originId: null
      moduleId: ./scripts/editor sync recursive .*\.block\..*$
  stack: "ModuleParseError: Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)\n    at handleParseError (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:982:19)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:1101:5\n    at processResult (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:806:11)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:866:5\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:407:3\n    at iterateNormalLoaders (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:233:10)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:224:4\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:840:15\n    at Array.eval (eval at create (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)\n    at runCallbacks (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:15)"
  compilerPath: radicle
- moduleIdentifier: >-
    /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
  moduleName: ./scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
  loc: '1:0'
  message: "Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)"
  moduleId: ./scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
  moduleTrace:
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.plugin\..*$/|groupOptions:
        {}
      originName: ./scripts/editor/ sync .*\.plugin\..*$
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
      moduleName: ./scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
      dependencies:
        - loc: ./@eaDir/example.plugin.tsx@SynoEAStream
      originId: ./scripts/editor sync recursive .*\.plugin\..*$
      moduleId: ./scripts/editor/@eaDir/example.plugin.tsx@SynoEAStream
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/node_modules/swc-loader/src/index.js??swc!/volume1/Development/projects/interface-DEMO/site-v2/node_modules/@roots/wordpress-hmr/lib/loader.cjs??@roots/wordpress-hmr/loader!/volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor.ts
      originName: ./scripts/editor.ts
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.plugin\..*$/|groupOptions:
        {}
      moduleName: ./scripts/editor/ sync .*\.plugin\..*$
      dependencies:
        - loc: 23:29-26:6
      originId: null
      moduleId: ./scripts/editor sync recursive .*\.plugin\..*$
  stack: "ModuleParseError: Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)\n    at handleParseError (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:982:19)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:1101:5\n    at processResult (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:806:11)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:866:5\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:407:3\n    at iterateNormalLoaders (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:233:10)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:224:4\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:840:15\n    at Array.eval (eval at create (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)\n    at runCallbacks (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:15)"
  compilerPath: radicle
- moduleIdentifier: >-
    /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
  moduleName: ./scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
  loc: '1:0'
  message: "Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)"
  moduleId: ./scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
  moduleTrace:
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.block\..*$/|groupOptions:
        {}
      originName: ./scripts/editor/ sync .*\.block\..*$
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
      moduleName: ./scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
      dependencies:
        - loc: ./@eaDir/modal.block.tsx@SynoEAStream
      originId: ./scripts/editor sync recursive .*\.block\..*$
      moduleId: ./scripts/editor/@eaDir/modal.block.tsx@SynoEAStream
    - originIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/node_modules/swc-loader/src/index.js??swc!/volume1/Development/projects/interface-DEMO/site-v2/node_modules/@roots/wordpress-hmr/lib/loader.cjs??@roots/wordpress-hmr/loader!/volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor.ts
      originName: ./scripts/editor.ts
      moduleIdentifier: >-
        /volume1/Development/projects/interface-DEMO/site-v2/resources/scripts/editor|sync|/.*\.block\..*$/|groupOptions:
        {}
      moduleName: ./scripts/editor/ sync .*\.block\..*$
      dependencies:
        - loc: 2:28-5:6
      originId: null
      moduleId: ./scripts/editor sync recursive .*\.block\..*$
  stack: "ModuleParseError: Module parse failed: Unexpected character '\0' (1:0)\nYou 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\n(Source code omitted for this binary file)\n    at handleParseError (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:982:19)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:1101:5\n    at processResult (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:806:11)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:866:5\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:407:3\n    at iterateNormalLoaders (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:233:10)\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/loader-runner/lib/LoaderRunner.js:224:4\n    at /volume1/Development/projects/interface-DEMO/site-v2/node_modules/webpack/lib/NormalModule.js:840:15\n    at Array.eval (eval at create (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)\n    at runCallbacks (/volume1/Development/projects/interface-DEMO/site-v2/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:15)"
  compilerPath: radicle

kellymears · December 1, 2023, 8:14pm

The problem

What you’re experiencing is due to bud.js not processing node_modules/**/* as source files. It does this for performance reasons.

You are importing @splidejs/splide/css from a .js or .ts file, probably like:

// index.js
import '@splidejs/splide/css';

So, bud.js is trying to inline the css module directly into your bundled js (uh oh), and the js loaders are subsequently choking on the output (oh no).

The way

Importing it from a .css module works with no config changes. And, for what it’s worth, importing styles within a stylesheet is my general recommendation for most projects.

// index.js
import './index.css';

/* index.css */
@import '@splidejs/splide/dist/css/splide.min.css';

The current alternative is to allow parsing @splidejs/splide modules as source modules. The following will let you do your css import from a js module. This has at least one plausible use case I can think of: dynamically importing @splidejs/splide/css for application performance reasons.

Anyway, the following snippet does the job (tested):

// bud.config.js
bud.compilePaths([
  bud.path(`@src`),
  bud.path(`node_modules/@splidejs/splide`),
], [`css`])

Making this more intuitive

What I want to add is a rule that:

excludes the @src directory
uses issuer property of RuleSet to specify {not: /\.css$/}
processes matches with css-loader

Why I haven’t yet:

Concern that some existing projects are importing uncompiled js from node_modules which are in turn importing uncompiled postcss files. The rule above would match and likely take precedence over whatever they’re doing, and would cause problems if that code needed to be run through postcss, etc. For example, a hypothetical module called cool-postcss-lib that imports uncompiled postcss in cool-postcss-lib/lib/main.js:

import './important-postcss-module.css';

Adding the proposed rule would match this case and cause a different error for those users.

So, I think improvements to this will likely have to wait for a major version bump. Unless I can find some way to make sure user defined loaders are applied uniformly by adding something to the extensions API. I’ll keep thinking about it.

abombelli · December 1, 2023, 10:02pm

I can confirm, the hidden @eaDir directories were the issue.
Would be great if you could help me out on how to exclude specific directories in the build process.