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.

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

Creating a new app with an underscore in the name fails to build #108

Open
Jopie01 opened this issue Nov 15, 2024 · 11 comments
Open

Creating a new app with an underscore in the name fails to build #108

Jopie01 opened this issue Nov 15, 2024 · 11 comments

Comments

@Jopie01
Copy link

Jopie01 commented Nov 15, 2024

I just wanted to test the latest cutting edge ember ecosystem and walked into a weird situation. I don't know if it's embroider or something with the blueprint and because I'm using this blueprint to setup the app, I have created the issue here.

When I do

npx ember-cli@latest new vitetest -b @embroider/app-blueprint --pnpm
cd vitetest
pnpm start --host=0.0.0.0

Everything works as expected. Vite runs and I can go the the app and see the welcome page. Editing the template will instantly show the changes.

However, when I use an underscore (_) in the name, starting vite fails.

npx ember-cli@latest new vite_test -b @embroider/app-blueprint --pnpm
cd vite_test
pnpm start --host=0.0.0.0

And the error:

✘ [ERROR] [esbuild] A module tried to resolve "vite_test/config/environment" and didn't find it (v1 catch-all fallback).

 - Maybe a dependency declaration is missing?
 - Remember that v1 addons can only import non-Ember-addon NPM dependencies if they include ember-auto-import in their dependencies.
 - If this dependency is available in the AMD loader (because someone manually called "define()" for it), you can configure a shim like:

  amdCompatibility: {
    es: [
      ["vite_test/config/environment", ["default", "yourNamedExportsGoHere"]],
    ]
  }

 [plugin embroider-esbuild-resolver]

    tests/test-helper.js:2:19:
      2 │ import config from 'vite_test/config/environment';
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

To make it complete, I also tried with the dash - and no error it just works.

npx ember-cli@latest new vite-test -b @embroider/app-blueprint --pnpm
cd vite-test
pnpm start --host=0.0.0.0
@mansona
Copy link
Member

mansona commented Nov 18, 2024

Could you do me a favour and check if a new Ember app without using this blueprint has the same issue? there have been some problems with ember-cli not allowing certain names in the past and I'm wondering if it's ember-cli, Embroider, or Vite (i.e. our plugins) at fault here

@Jopie01
Copy link
Author

Jopie01 commented Nov 18, 2024

Could you do me a favour and check if a new Ember app without using this blueprint has the same issue?

I did

npx ember-cli@latest new vite_test1 --embroider --pnpm
cd vite_test1
pnpm start

and it runs correctly.

@mansona
Copy link
Member

mansona commented Nov 18, 2024

oh that actually rules out Embroider (at least the stable version) too 🎉 thanks for that, I'll see if I can take a look into why this is happening soon 👍

@Jopie01
Copy link
Author

Jopie01 commented Nov 18, 2024

I have created now also a new app with the blueprint. Below the complete output

[jopie@devserver jopie]$ npx ember-cli@latest new vite_test3 -b @embroider/app-blueprint --pnpm
installing app-blueprint
installing app
Ember CLI v6.0.1

✨  Creating a new Ember app in /home/jopie/vite_test3:
  create .editorconfig
  create .ember-cli
  create .eslintignore
  create .eslintrc.js
  create .github/workflows/ci.yml
  create .prettierignore
  create .prettierrc.js
  create .stylelintignore
  create .stylelintrc.js
  create .template-lintrc.js
  create .watchmanconfig
  create README.md
  create app/app.js
  create app/components/.gitkeep
  create app/controllers/.gitkeep
  create app/helpers/.gitkeep
  create app/index.html
  create app/models/.gitkeep
  create app/router.js
  create app/routes/.gitkeep
  create app/styles/app.css
  create app/templates/application.hbs
  create config/ember-cli-update.json
  create config/environment.js
  create config/optional-features.json
  create config/targets.js
  create ember-cli-build.js
  create .gitignore
  create package.json
  create public/robots.txt
  create testem.js
  create tests/helpers/index.js
  create tests/index.html
  create tests/integration/.gitkeep
  create tests/test-helper.js
  create tests/unit/.gitkeep
  create babel.config.cjs

🚧  Installing packages... This might take a couple of minutes.
pnpm: Uninstalled ember-fetch, broccoli-asset-rev and 7 other packages

🚧  Installing packages... This might take a couple of minutes.
pnpm: Installed @embroider/core@unstable, @embroider/vite@unstable and 22 other packages

✨  Running "lint:fix" script...

🚧  Installing packages... This might take a couple of minutes.
pnpm: Installed dependencies

🎥  Initializing git repository.
Git: successfully initialized.

🎉  Successfully created project vite_test3.
👉  Get started by typing:

  $ cd vite_test3
  $ pnpm start

Happy coding!


[jopie@devserver jopie]$ cd vite_test3/
[jopie@devserver jopie]$ pnpm vite --host 0.0.0.0 --port 4200

- Building

Environment: development

- Building

- building... 

[BABEL] Note: The code generator has deoptimised the styling of /home/jopie/vite_test3/ember/ember-template-compiler.js as it exceeds the max of 500KB.

[BABEL] Note: The code generator has deoptimised the styling of /home/jopie/vite_test3/ember/ember.js as it exceeds the max of 500KB.


Build successful (3715ms)


Slowest Nodes (totalTime >= 5%) | Total (avg)
-+-
Babel: ember-source (1) | 2685ms
Babel: @embroider/macros (1) | 357ms
Babel: ember-tracked-storage-polyfill (1) | 208ms



  VITE v5.4.11  ready in 7627 ms

  ➜  Local:   http://localhost:4200/
  ➜  Network: http://xxx.xxx.xxx.xxx:4200/
  ➜  press h + enter to show help
Error:   Failed to scan for dependencies from entries:
  /home/jopie/vite_test3/index.html
/home/jopie/vite_test3/tests/index.html

  ✘ [ERROR] [esbuild] A module tried to resolve "vite_test3/app" and didn't find it (v1 catch-all fallback).

 - Maybe a dependency declaration is missing?
 - Remember that v1 addons can only import non-Ember-addon NPM dependencies if they include ember-auto-import in their dependencies.
 - If this dependency is available in the AMD loader (because someone manually called "define()" for it), you can configure a shim like:

  amdCompatibility: {
    es: [
      ["vite_test3/app", ["default", "yourNamedExportsGoHere"]],
    ]
  }

 [plugin embroider-esbuild-resolver]

    tests/test-helper.js:1:24:
      1 │ import Application from 'vite_test3/app';
        ╵                         ~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///home/jopie/vite_test3/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@embroider/vite/src/esbuild-resolver.js:49:19)
    at handlePlugins (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:21)
    at buildOrContextImpl (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:873:5)
    at Object.buildOrContext (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:699:5)
    at /home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2032:68
    at new Promise (<anonymous>)
    at Object.context (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2032:27)
    at Object.context (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1874:58)
    at prepareEsbuildScanner (file:///home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49573:24)


✘ [ERROR] [esbuild] A module tried to resolve "vite_test3/config/environment" and didn't find it (v1 catch-all fallback).

 - Maybe a dependency declaration is missing?
 - Remember that v1 addons can only import non-Ember-addon NPM dependencies if they include ember-auto-import in their dependencies.
 - If this dependency is available in the AMD loader (because someone manually called "define()" for it), you can configure a shim like:

  amdCompatibility: {
    es: [
      ["vite_test3/config/environment", ["default", "yourNamedExportsGoHere"]],
    ]
  }

 [plugin embroider-esbuild-resolver]

    tests/test-helper.js:2:19:
      2 │ import config from 'vite_test3/config/environment';
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///home/jopie/vite_test3/node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@embroider/vite/src/esbuild-resolver.js:49:19)
    at handlePlugins (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:21)
    at buildOrContextImpl (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:873:5)
    at Object.buildOrContext (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:699:5)
    at /home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2032:68
    at new Promise (<anonymous>)
    at Object.context (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2032:27)
    at Object.context (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1874:58)
    at prepareEsbuildScanner (file:///home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:49573:24)


    at failureErrorWithLog (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1472:15)
    at /home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:945:25
    at runOnEndCallbacks (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1315:45)
    at buildResponseToResult (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:943:7)
    at /home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:955:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:954:54)
    at handleRequest (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:647:17)
    at handleIncomingPacket (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:672:7)
    at Socket.readFromStdout (/home/jopie/vite_test3/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:600:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:191:23)

It doesn't matter if I'm using pnpm start or pnpm vite

@mansona
Copy link
Member

mansona commented Nov 18, 2024

out of curiosity what does the name field in your package.json say? 🤔

@mansona
Copy link
Member

mansona commented Nov 18, 2024

and your modulePrefix in your config/environment.js file?

@Jopie01
Copy link
Author

Jopie01 commented Nov 18, 2024

out of curiosity what does the name field in your package.json say? 🤔
and your modulePrefix in your config/environment.js file?

Ohoh .... doesn't look good ....

package.json:

{
  "name": "vite-test3",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for vite-test3 goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  .......
}

config/environment.js:

'use strict';

module.exports = function (environment) {
  const ENV = {
    modulePrefix: 'vite-test3',
    environment,
    rootURL: '/',
    locationType: 'history',
    EmberENV: {
      EXTEND_PROTOTYPES: false,
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
      },
    },
  ......
}

I changed both to an underscore and got the error:


  ✘ [ERROR] [esbuild] A module tried to resolve "vite-test3/config/environment" and didn't find it (v1 catch-all fallback).

 - Maybe a dependency declaration is missing?
 - Remember that v1 addons can only import non-Ember-addon NPM dependencies if they include ember-auto-import in their dependencies.
 - If this dependency is available in the AMD loader (because someone manually called "define()" for it), you can configure a shim like:

  amdCompatibility: {
    es: [
      ["vite-test3/config/environment", ["default", "yourNamedExportsGoHere"]],
    ]
  }

 [plugin embroider-esbuild-resolver]

    app/router.js:2:19:
      2 │ import config from 'vite-test3/config/environment';
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

Which got me looking into app/router.js and indeed another dash ... changed it to an underscore as well and 🎉 success!

So in short:
Somewhere setting up the new app, the underscore is translated to a dash in:

  • package.json
  • ember-cli-build.js
  • app/router.js

@mansona
Copy link
Member

mansona commented Nov 18, 2024

that is likely happening because of ember-cli, I'll bet that the ember-cli-only experiment that you did had the same behaviour 🙈

The reason we're only seeing this problem with vite is because this is the first time that we're relying on real resolution and what we have in package.json really matters for that

@Jopie01
Copy link
Author

Jopie01 commented Nov 18, 2024

that is likely happening because of ember-cli, I'll bet that the ember-cli-only experiment that you did had the same behaviour 🙈

You are completely right. I looked into the two other apps I created (classic and one with stable embroider) and I see the same thing, the underscore is replaced by a dash.

I suppose https://github.com/ember-cli/ember-cli/blob/master/blueprints/app/index.js#L25 is the culprit?

@mansona
Copy link
Member

mansona commented Nov 18, 2024

100% that's the one! Exactly where I guessed it would be 😂 I wonder if we should just open a PR to ember-cli to remove that 🤔

The other way to look at it is that maybe we don't need to fix it for now? this blueprint is not intended to be production ready, so when we start implementing it properly we could make sure that using an underscore doesn't blow things up, either by removing that strange behaviour of dasherising automatically or by fixing any of the places where the name leaked in the non-dasherised form

@Jopie01
Copy link
Author

Jopie01 commented Nov 18, 2024

Personally I don't care too much about it. Maybe a warning to the README about this would be sufficient until a decision is made. I also don't know what the impact would be when using an underscore in the system.

I walked into this and know how to overcome this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants