Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't compile bulma css #27

Open
baurine opened this issue Dec 3, 2021 · 0 comments
Open

Can't compile bulma css #27

baurine opened this issue Dec 3, 2021 · 0 comments

Comments

@baurine
Copy link

baurine commented Dec 3, 2021

What I did

  1. Init an near-empty react project from template: https://github.com/baurine/esbuild-react-app-ts-template/tree/refine_builder

    Currently, it has only esbuild self, no any plugins.

  2. Install bulma-css by following https://www.npmjs.com/package/bulma

    $ yarn add bulma

  3. import "bulma/css/bulma.css" in src/App.tsx or @import "bulma/css/bulma.css"; in src/style.css, both work fine, esbuild can compile CSS by itself.

    // src/App.tsx
import "bulma/css/bulma.css"

    Or

    /* src/style.css */
@import "bulma/css/bulma.css";

    Demo code: miscs-test/esbuild-demo@fce2e09

  4. Install esbuild-plugin-postcss2 to handle CSS files.

    $ yarn add esbuild-plugin-postcss2 -D

    If I import bulma.css in the App.tsx, running yarn build reports following errors:

    $ NODE_ENV=production node builder.js
> src/App.tsx:6:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
    6 │ import 'bulma/css/bulma.css'
      ╵        ~~~~~~~~~~~~~~~~~~~~~
  node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
    65 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
      ╵           ~~~~~~~~~
    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
    at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
    at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
    at new Promise (<anonymous>)
    at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
    at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
    at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)

/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
src/App.tsx:6:7: error: [plugin: postcss2] ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
    at failureErrorWithLog (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478:15)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1136:28
    at runOnEndCallbacks (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:926:63)
    at buildResponseToResult (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1134:7)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1243:14
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:614:9
    at handleIncomingPacket (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:711:9)
    at Socket.readFromStdout (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:581:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: [Error: ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'] {
        errno: -2,
        code: 'ENOENT',
        syscall: 'open',
        path: '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'
      },
      location: {
        column: 7,
        file: 'src/App.tsx',
        length: 21,
        line: 6,
        lineText: "import 'bulma/css/bulma.css'",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 10,
            file: 'node_modules/esbuild-plugin-postcss2/dist/index.js',
            length: 9,
            line: 65,
            lineText: '    build.onResolve({filter: /.\\.(css|sass|scss|less|styl)$/}, async (args) => {\n' +
              '    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)\n' +
              '    at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)\n' +
              '    at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)\n' +
              '    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17\n' +
              '    at new Promise (<anonymous>)\n' +
              '    at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)\n' +
              '    at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)\n' +
              '    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25\n' +
              '    at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)',
            namespace: 'file',
            suggestion: ''
          },
          text: 'This error came from the "onResolve" callback registered here'
        }
      ],
      pluginName: 'postcss2',
      text: "ENOENT: no such file or directory, open '/mnt/bao/codes/personal/try-esbuild/esbuild-demo/src/bulma/css/bulma.css'"
    }
  ],
  warnings: []
}
error Command failed with exit code 1.

    If I import the bulma.css in the style.css, it reports the following errors:

    $ NODE_ENV=production node builder.js
> ../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css:3:8: error: [plugin: postcss2] ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
    3 │ @import 'bulma/css/bulma.css';
      ╵         ~~~~~~~~~~~~~~~~~~~~~
  node_modules/esbuild-plugin-postcss2/dist/index.js:65:10: note: This error came from the "onResolve" callback registered here
    65 │     build.onResolve({filter: /.\.(css|sass|scss|less|styl)$/}, async (args) => {
      ╵           ~~~~~~~~~
    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)
    at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)
    at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17
    at new Promise (<anonymous>)
    at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)
    at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25
    at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)

/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css:3:8: error: [plugin: postcss2] ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
    at failureErrorWithLog (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1478:15)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1136:28
    at runOnEndCallbacks (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:926:63)
    at buildResponseToResult (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1134:7)
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1243:14
    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:614:9
    at handleIncomingPacket (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:711:9)
    at Socket.readFromStdout (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:581:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: [Error: ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'] {
        errno: -2,
        code: 'ENOENT',
        syscall: 'open',
        path: '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'
      },
      location: {
        column: 8,
        file: '../../../../../../tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/style.css',
        length: 21,
        line: 3,
        lineText: "@import 'bulma/css/bulma.css';",
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: {
            column: 10,
            file: 'node_modules/esbuild-plugin-postcss2/dist/index.js',
            length: 9,
            line: 65,
            lineText: '    build.onResolve({filter: /.\\.(css|sass|scss|less|styl)$/}, async (args) => {\n' +
              '    at setup (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild-plugin-postcss2/dist/index.js:65:11)\n' +
              '    at handlePlugins (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:741:23)\n' +
              '    at Object.buildOrServe (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1029:7)\n' +
              '    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1804:17\n' +
              '    at new Promise (<anonymous>)\n' +
              '    at Object.build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1803:14)\n' +
              '    at build (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/node_modules/esbuild/lib/main.js:1658:51)\n' +
              '    at /mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:47:25\n' +
              '    at Object.<anonymous> (/mnt/bao/codes/personal/try-esbuild/esbuild-demo/builder.js:58:3)',
            namespace: 'file',
            suggestion: ''
          },
          text: 'This error came from the "onResolve" callback registered here'
        }
      ],
      pluginName: 'postcss2',
      text: "ENOENT: no such file or directory, open '/tmp/tmp-1718725-2Ubh7VAjfN1Z/17d800fd6570/bulma/css/bulma.css'"
    }
  ],
  warnings: []
}
error Command failed with exit code 1.

    Demo code: miscs-test/esbuild-demo@3c7dac6

I found the reason is that the below line code doesn't work as expect:

esbuild-plugin-postcss2/src/index.ts

Line 88 in b631aa4

let sourceFullPath = resolveFile(args.path); 

        let sourceFullPath = resolveFile(args.path);

When args.path is bulma/css/bulma.css, it returns null.

I also report the issue to resolve-file lib: doowb/resolve-file#2 (comment)

Workarounds

I can workaround this bug by following 3 methods:

  1. hack the node_modules/resolve-file/index.js, modify the following code:

      if (!utils.exists(file.path)) {
    try {
      if (/[\\\/]/.test(name)) {
        file.basename = path.basename(name);
        var dirname = path.dirname(name);
        file.name = path.basename(dirname);
-       file.main = require.resolve(dirname);
+       // file.main = require.resolve(dirname);
+       file.main = require.resolve(name);
        file.path = path.resolve(path.dirname(file.main), file.basename);
      }

  2. hack the node_modules/esbuild-plugin-postcss2/dist/index.js, remove the css| from the onResolve filters, so esbuild-plugin-postcss2 won't parse the css, and esbuild self will parse it.

  3. hack the node_modules/esbuild-plugin-postcss2/dist/index.js, add following logic:

    // hack
let exist = await import_fs_extra.exists(sourceFullPath)
if (!exist) {
  sourceFullPath = import_path.default.resolve(
    process.cwd(),
    'node_modules',
    args.path
  )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@baurine