javascript - roll up bundle fails to map alias import - Stack Overflow

admin管理员组

文章数量:1406913

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 monjs from "rollup-plugin-monjs"
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-ponents": "styled" },
    plugins: [
      peerDepsExternal(),
      babel({
        exclude: "node_modules/**",
        extensions: [".ts", ".tsx"],
        include: ["src/**/*"],
      }),
      typescript(),
      resolve(),
      monjs(),
      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

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 monjs from "rollup-plugin-monjs"
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-ponents": "styled" },
    plugins: [
      peerDepsExternal(),
      babel({
        exclude: "node_modules/**",
        extensions: [".ts", ".tsx"],
        include: ["src/**/*"],
      }),
      typescript(),
      resolve(),
      monjs(),
      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

• javascript
• reactjs
• typescript
• babeljs
• rollupjs

Share Improve this question Follow edited Apr 13, 2021 at 3:15 Jackal asked Apr 13, 2021 at 2:59 JackalJackal 54311 gold badge66 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

I had the same problem, fixed with this:

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

本文标签： javascriptroll up bundle fails to map alias importStack Overflow