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

@babel/preset-typescript not work in "overrides" of babel.config.js #9843

Open
zlv-thisF opened this Issue Apr 10, 2019 · 9 comments

Comments

Projects
None yet
3 participants
@zlv-thisF
Copy link

commented Apr 10, 2019

Bug Report

Current Behavior
image
write my webapck.config.babel.js in ES6, the @babe/preset-env i set { modules: false } for tree shaking by webpack, so i use overrides option for commonjs support. In fact, "@babel/preset-env" in preset of overrides work just well as picture above, webpack run as expected. But if i add "@babel/preset-typescript" and import some ts file (eg. try add and test my self webpack plugin written in typescript ), webpack.config.babel.js cannot find my ts plugin module.

Input Code
babel.config.babel.js

module.exports = {
  plugins: [
    ["babel-plugin-lodash"],
    ["@babel/plugin-syntax-dynamic-import"],
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    ["babel-plugin-import", { libraryName: "antd", style: true }],
  ],
  presets: [
    ["@babel/preset-env", { useBuiltIns: "usage", modules: false }],
    ["@babel/preset-react"],
    ["@babel/preset-typescript"],
  ],
  overrides: [
    {
      test: ["./webpack/**/*"],
      presets: ["@babel/preset-env", "@babel/preset-typescript"],
    },
    {
      test: ["./plugins/**/*"],
      presets: ["@babel/preset-env", "@babel/preset-typescript"],
    },
  ],
};

Expected behavior/code
when my webpack.babel.babel.js import ts module, "@babel/preset-typescript" in overrides option of babel.config.js can work well.

Environment

  • Babel version(s): 7.3.4
  • Node/npm version: [e.g. Node 10.15.3/npm 6.4.1]
  • OS: maxOS 10.14.2
  • How you are using Babel: [register, loader, core, @babel/preset-env, @babel/preset-typescript]

Additional context/Screenshots
import my ts webpack plugin as below:
image
image
image

is there anything i missing or is it a bug ?

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Apr 10, 2019

Hey @zlv-thisF! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

That error doesn't seem to be thrown by Babel. Did you configure webpack to also look for .ts extensions when resolving file names?

PS. modules: false is automatically set by webpack, you don't need to set it manually.

@zlv-thisF

This comment has been minimized.

Copy link
Author

commented Apr 10, 2019

@nicolo-ribaudo thx for help!, i have resolve's alias in my webpack config;
image

i write my ts plugin and export , but i dont have d.ts for my ts module, error probably comes from here ? i am new to TS..

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

Oh, I initially misunderstood the issue.
What is the full stack trace of the error?
Does it work if you explicitly add .ts to the import? I think that it throws because node doesn't add the .ts extension when loading files.

@zlv-thisF

This comment has been minimized.

Copy link
Author

commented Apr 10, 2019

@nicolo-ribaudo really sorry, i was busy something else;
right now i add '.ts' to the import, seems work , webpack find my module and enter in to my plugin , however babel seems not compile my ts plugin file, cus my plugins throw error as below:
image

image

image
or
image

seem overrides options(@babel/preset-env) do 'babeled' my webpack.config.babel.js to commonjs in deed and run successfully , but not handle my imported ts file

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

Could you create a small repository I can download to test the bug?

@zlv-thisF

This comment has been minimized.

Copy link
Author

commented Apr 10, 2019

@nicolo-ribaudo https://github.com/zlv-thisF/test_plugin.git
here i write a demo can reproduce my issue

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

The problem is that, since webpack sees that your config is a JS file, it will not tell Babel to also hook into the requireing of .ts files.

You have two options:

  1. (easy) Rename webpack.config.babel.js to webpack.config.babel.ts
  2. (robust) Create a JS file to manually tell Babel to run when importing ts files:
    • // babel-entry.js
      require("@babel/register")({ extensions: [".ts"] });
    • Add as the first line in your webpack config
      import "./babel-entry.js";
@zlv-thisF

This comment has been minimized.

Copy link
Author

commented Apr 11, 2019

@nicolo-ribaudo wow! i will try that!!!!
Thanks for your patience and support. ~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.