CODEWITHSUNDEEP
javascriptreactjstypescriptbabeljsrollupjs
Jackal
Jackal

Reputation: 543

roll up bundle fails to map alias import

I am trying to publish a library with rollup to build a bundle for other projects to reuse.

But i am having issue with import mapping in the bundle I build, since I am using Path aliases in my source code.

For exmaples

import theme from '@src/styles/modules/theme.module.scss'
import PdfIcon from '@src/assets/icons/pdf.svg'

My rollup config


import resolve from "rollup-plugin-node-resolve"
import babel from "rollup-plugin-babel"
import commonjs from "rollup-plugin-commonjs"
import typescript from "rollup-plugin-typescript"
import pkg from "./package.json"
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import alias from '@rollup/plugin-alias';
export default [
  {
    input: "src/index.tsx",
    output: [
      {
        file: pkg.main,
        format: "es",
        sourcemap: true,
      },
    ],
    external: Object.keys(pkg.peerDependencies || {}),
    globals: { "styled-components": "styled" },
    plugins: [
      peerDepsExternal(),
      babel({
        exclude: "node_modules/**",
        extensions: [".ts", ".tsx"],
        include: ["src/**/*"],
      }),
      typescript(),
      resolve(),
      commonjs(),
      alias({
        entries: {
          "@src/*": "src/*"
        }
      })
    ],
  },
]

The bundle i generated

dist
  |
   index.js
  |
   index.js.map

When i try to import into other projects and run. I get the error

Module not found: Can't resolve '@src/styles/modules/theme.module.scss'
  21 | var core = require('@material-ui/core');
  22 | var ExpandMoreIcon = require('@material-ui/icons/ExpandMore');
> 23 | var theme = require('@src/styles/modules/theme.module.scss');
  24 | var React = require('react');
  25 | var MuiRadioGroup = require('@material-ui/core/RadioGroup');
  26 | var icons = require('@material-ui/icons');

Thanks in advance

Upvotes: 7

Views: 4930

Answers (2)

Douglas Morriesen de Almeida
Douglas Morriesen de Almeida

Reputation: 11

I had the same problem, fixed with this:

alias({ entries: [{ find: /^@src\/(.*)/, replacement: 'src/$1' }] })`

Upvotes: 1

Vladislav
Vladislav

Reputation: 106

Try to move the alias plugin declaration to the top of the plugin list.

Upvotes: 3

Related Questions