Unexpected token on JSX despite using babel preset for react
goepi opened this issue · 0 comments
goepi commented
I created a branch on a simple example repo to show this issue. Note that it is branch babel
in that repo to reproduce the issue below.
I have a lerna monorepo.
It has a packages directory, and one of the packages there is called component-library
, containing a simple React component.
That package has a rollup.config.js
:
import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
const extensions = ['.ts', '.js', '.tsx'];
export default {
input: 'src/index.tsx',
output: {
dir: './build',
format: 'cjs',
},
plugins: [resolve({ extensions }), babel({ include: '**/packages/**/*', extensions })],
};
When I try to bundle that package, I get an error:
src/index.tsx → ./build...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/MyComponent.tsx (4:33)
2: import { add } from '@project/utils';
3:
4: export const MyComponent = () => <div>{add(2, 2)}</div>;
^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
My .babelrc looks like this:
{
"presets": ["@babel/preset-env","@babel/preset-react", "@babel/preset-typescript"]
}
Why do I have this error? Doesn't babel with @babel/preset-react handle JSX?