embroider-build / ember-auto-import

Zero config import from npm packages
Other
360 stars 110 forks source link

Doesn't work with simple TS package. #506

Open villander opened 2 years ago

villander commented 2 years ago

I've just created a simple package to share types across my monorepo and I'm getting an crazy error from ember-auto-import regarding the webpack. I'm using "ember-auto-import": "^2.2.3"

My simple package, have these two files:

// feature-flag.ts
export enum FeatureFlags {
  COMMERCE = 'COMMERCE'
}
// index.ts
export * from './feature-flag'
{
  "private": true,
  "name": "@peek-types/entities",
  "description": "Public type definitions and utilities concerning peek business domain.",
  "license": "UNLICENSED",
  "author": "Michael Villander <michael.villander@peek.com>",
  "version": "0.0.0",
  "scripts": {
    "lint": "yarn lint:js && yarn lint:types",
    "lint:js": "eslint --ext ts,js .",
    "lint:ts:fix": "eslint . --ext .ts,.js --fix",
    "lint:types": "tsc --skipLibCheck --noEmit"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.3.0",
    "@typescript-eslint/parser": "^5.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-config-standard-ts": "^21.0.0",
    "ts-standard": "^10.0.0",
    "eslint": "^7.32.0",
    "typescript": "^4.4.4"
  },
  "keywords": [
    "access:public"
  ],
  "engines": {
    "node": "12.* || 14.* || >= 16"
  }
}

And after I install this package on my Ember app I'm getting this error. and import it inside one component:

import { FeatureFlags } from '@peek-types/entities' 
➜  sunflower git:(H2O-766) ✗ yarn serve
yarn run v1.22.10
$ cd ./client && ember serve
assets by status 3.72 MiB [big]
  asset chunk.vendors-node_modules_miragejs_graphql_dist_index-mjs_js-node_modules_lodash_castarray_index_j-1f5e6b.e6995b8c45eaf24557bb.js 2.74 MiB [emitted] [immutable] [big] (id hint: vendors)
  asset chunk.vendors-node_modules_fast-memoize_src_index_js-node_modules_glimmer-apollo_dist_cjs_environme-c5eb01.7c5bce3b13e289aafee5.js 730 KiB [emitted] [immutable] [big] (id hint: vendors)
  asset chunk.vendors-node_modules_filestack-js_build_browser_filestack_esm_js.faa7c457603d82a15236.js 276 KiB [emitted] [immutable] [big] (id hint: vendors)
asset chunk.app.4717631c34691acdcac7.js 22.3 KiB [emitted] [immutable] (name: app)
asset chunk.tests.e5af0c4696363b0cf803.js 11.5 KiB [emitted] [immutable] (name: tests)
Entrypoint app [big] 752 KiB = chunk.vendors-node_modules_fast-memoize_src_index_js-node_modules_glimmer-apollo_dist_cjs_environme-c5eb01.7c5bce3b13e289aafee5.js 730 KiB chunk.app.4717631c34691acdcac7.js 22.3 KiB
Entrypoint tests [big] 2.75 MiB = chunk.vendors-node_modules_miragejs_graphql_dist_index-mjs_js-node_modules_lodash_castarray_index_j-1f5e6b.e6995b8c45eaf24557bb.js 2.74 MiB chunk.tests.e5af0c4696363b0cf803.js 11.5 KiB
orphan modules 512 KiB [orphan] 144 modules
runtime modules 10.4 KiB 17 modules
modules by path ../node_modules/ 3.15 MiB 340 modules
modules by path external "@ember/ 210 bytes 5 modules
modules by path ../../../../../private/var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/broccoli-6349xUPQniFZiL7Y/cache-649-webpack_bundler_ember_auto_import_webpack/*.js 2.29 KiB
  ../../../../../private/var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/broccoli-6349xUPQniFZiL7Y/cache-649-webpack_bundler_ember_auto_import_webpack/l.js 50 bytes [built] [code generated]
  ../../../../../private/var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/broccoli-6349xUPQniFZiL7Y/cache-649-webpack_bundler_ember_auto_import_webpack/app.js 1.31 KiB [built] [code generated]
  ../../../../../private/var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/broccoli-6349xUPQniFZiL7Y/cache-649-webpack_bundler_ember_auto_import_webpack/tests.js 953 bytes [built] [code generated]
modules by path ../client-support/types/entities/*.ts 67 bytes
  ../client-support/types/entities/index.ts 28 bytes [built] [code generated]
  ../client-support/types/entities/feature-flag.ts 39 bytes [built] [code generated] [1 error]
modules by path external "@glimmer/ 84 bytes
  external "@glimmer/tracking" 42 bytes [built] [code generated]
  external "@glimmer/tracking/primitives/cache" 42 bytes [built] [code generated]

ERROR in ../client-support/types/entities/feature-flag.ts
Module build failed (from ../node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/villander/Projects/sunflower/client-support/types/entities/feature-flag.ts: Unexpected token, expected "{" (1:7)

> 1 | export enum FeatureFlags {
    |        ^
  2 |   COMMERCE = 'COMMERCE'
  3 | }
  4 |
    at Parser._raise (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:541:17)
    at Parser.raiseWithData (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:534:17)
    at Parser.raise (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:495:17)
    at Parser.unexpected (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:3587:16)
    at Parser.parseExport (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:14444:16)
    at Parser.parseStatementContent (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:13420:27)
    at Parser.parseStatement (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:13312:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:13901:25)
    at Parser.parseBlockBody (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:13892:10)
    at Parser.parseProgram (/Users/villander/Projects/sunflower/node_modules/@babel/parser/lib/index.js:13234:10)
 @ ../client-support/types/entities/index.ts 1:0-28 1:0-28
 @ ../../../../../private/var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/broccoli-6349xUPQniFZiL7Y/cache-649-webpack_bundler_ember_auto_import_webpack/app.js 16:54-85

webpack 5.63.0 compiled with 1 error in 5984 ms⠋ building... [ember-auto-import-Build Error (WebpackBundler)

webpack returned errors to ember-auto-import

Stack Trace and Error Report: /var/folders/0v/jpdg1flj3qscvbvt728pgt8c0000gn/T/error.dump.a36a49b2ecb8a41cbed31415aa7ad36d.log
ef4 commented 2 years ago

You need something that will build your package from TS to JS. Two choices would be:

  1. Use a standalone build, where you run tsc directly in the package so the package will contain .js files that will be consumed by ember-auto-import. You can run tsc from a prepare script so it happens automatically after npm/yarn install, and then only in cases when you're actively developing the package would you need to run tsc --watch manually.
  2. Or extend ember-auto-import's webpack config to process typescript in dependencies. You would install and configure ts-loader, passing your webpack config to autoImport.webpack in ember-cli-build.js.