Import node_modules not working when bundle is set to true

[alex-w0]

When I'm trying to import a file from the node_modules with the symbol ~ then it will give me the following error. Writing the full path manually works.

@import '~dialog-polyfill/dist/dialog-polyfill.css';

esbuild.build({
  entryPoints: [
    '....'
  ],
  bundle: true,
  outdir: './css',
  plugins: [esbuildSass.sassPlugin()]
})
.catch(() => {
  process.exit(1)
})

✘ [ERROR] Could not resolve "~dialog-polyfill/dist/dialog-polyfill.css"

    src/sass/formio.form.scss:2:8:
      2 │ @import '~dialog-polyfill/dist/dialog-polyfill.css';

[glromeo]

your issue is likely a css import (i.e. not sass) being tried to be resolved by esbuild …I can’t just see that import in formio so if can’t tell more than that… I am happy to help you troubleshoot this but you have to come up with a github repo where you reproduce the issue

[alex-w0]

Yes true, it's a common css import which should recognize the tilde as an alias for the node_modules. The formio file just contains the import statement at the beginning. Here is the repo for reproducing the issue.

[glromeo]

the issue here is that sass doesn’t call the plugin importer because it’s a css so the import ends in the css that esbuild is trying to bundle and esbuild has no idea how to deal with ~ indeed if you remove ~ from your example url it builds just fine

[glromeo]

another option for you is to use the precompile in the plugin to change the url and remove the ~

[glromeo]

I’m on holidays with just an ipad when back I want to try and add another onResolve to the plugin to male life easier in these situations

the idea is the following

var esbuild = require('esbuild');
var esbuildSass = require('esbuild-sass-plugin');

esbuild
  .build({
    entryPoints: ['./src/formio.scss'],
    bundle: true,
    outdir: './css',
    plugins: [esbuildSass.sassPlugin(),
       {name:"temp",setup(build){
      build.onResolve({filter:/^~.*css$/},({path})=>{
        return {path: require.resolve(path.slice(1))}
      })
    }}],
    
  })
  .catch(() => {
    process.exit(1);
  });

[alex-w0]

I’m on holidays with just an ipad when back I want to try and add another onResolve to the plugin to male life easier in these situations

the idea is the following

var esbuild = require('esbuild');
var esbuildSass = require('esbuild-sass-plugin');

esbuild
  .build({
    entryPoints: ['./src/formio.scss'],
    bundle: true,
    outdir: './css',
    plugins: [esbuildSass.sassPlugin(),
       {name:"temp",setup(build){
      build.onResolve({filter:/^~.*css$/},({path})=>{
        return {path: require.resolve(path.slice(1))}
      })
    }}],
    
  })
  .catch(() => {
    process.exit(1);
  });

Yes no worry, writing the full path works fine for me, so this improvement is not really urgent or even tragic when it's not possible. Enjoy your holidays.

[glromeo]

@alex-w0 you can upgrade to 2.2.4 and add cssImports: true to your options
thank you for your example repo!

[alex-w0]

Thanks works great 🚀 I also didn't know that the ~ is deprecated these days ^^

[tadman]

For clarification, it's cssImports.