Giter VIP home page Giter VIP logo

rollup-plugin-swc's Issues

Error: Could not resolve typescript, tsx and jsx files

Please see PR #3

(async function() {

  const mockfs = require('mock-fs')
  const rollup = require('rollup')
  const swc = require('rollup-plugin-swc')

  mockfs({
    './src/foo.ts': `
      export const foo = () => 'Hello World' 
    `,
    './src/index.ts': `
      import { foo } from './foo'

      console.log(foo())
    `
  })
  
  const bundle = await rollup.rollup({
    input: './src/index.ts',
    plugins: [ 
      swc({
        jsc: {
          parser: {
            syntax: 'typescript',
          },
          target: 'es2018',
        }
      })
    ]
  })

  const { output } = await bundle.generate({ format: 'es' })
  const { code } = output.shift()

  console.log(code)

  /// actual 
  /// (node:31839) UnhandledPromiseRejectionWarning: 
  ///   Error: Could not resolve './foo' from src/index.ts

  /// expected
  /// should have no error
  /// should resolve the path

})()

Cannot import from package which has "type": "module"

I'm using native ES modules in Node v16.15.0. This is done by specifying "type" prop in package.json:

  "type": "module"

Here are repro steps:

mkdir test-proj
cd ./test-proj
npm init -y
npm pkg set type module
echo 'import swc from "rollup-plugin-swc";console.log("", swc());' > index.js
npm add rollup-plugin-swc
node ./index.js

Would get me something like this:

file:///home/rz/projects/test-proj/index.js:1
import swc from "rollup-plugin-swc";console.log("", swc());
                                                    ^

TypeError: swc is not a function
    at file:///home/rz/projects/test-proj/index.js:1:53
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:61:12)

The swc that we import above is evaluated as { default: [Function: swc] }

So, this happens because the package.json doesn't have the type field, so all .js files are treated as CommonJs even if they use import/export syntax.

This happens because Node.js ignores "module" prop in package.json of the rollup-plugin-swc. As per https://nodejs.org/api/packages.html#dual-commonjses-module-packages.

So, if we rename ./dist/esm/index.js to ./dist/esm/index.mjs and change the package.json of the rollup-plugin-swc to look like below:

  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.mjs",
  "types": "dist/index.d.ts",
  "type": "commonjs",
  "exports": {
    "require": "./dist/cjs/index.js",
    "import": "./dist/esm/index.mjs"
  },

Then it works. I didn't go far to test for backward compatibility with prior versions of Node - but it should work.

@rollup/plugin-node-resolve adopts similar approach but they use extra package.json in es directory:

{"type":"module"}

instead of renaming to .mjs https://github.com/rollup/plugins/blob/master/packages/node-resolve/rollup.config.js#L16

TypeError: swc is not a function 

import swc from 'rollup-plugin-swc';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    swc({
      rollup: {
        include: 'src',
        exclude: 'node_modules',
      },
      jsc: {
        'paths': {
          '~services': ['./src/services/index'],
          '~services/*': ['./src/services/*'],
          '~/*': ['./src/*'],
        },
        'parser': {
          'syntax': 'typescript',
          'tsx': false,
          'dynamicImport': true,
          'decorators': true,
          'dts': true,
          'importAssertions': false,
        },
        'transform': {
          'legacyDecorator': true,
          'decoratorMetadata': true,
        },
        'target': 'es2018',
        'loose': true,
        'externalHelpers': false,
        // Requires v1.2.50 or upper and requires target to be es2016 or upper.
        'keepClassNames': true,
      },
    }),
  ],
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.