Skip to content
This repository has been archived by the owner on Jun 23, 2020. It is now read-only.

Throw SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' when parse js module system used webpack #32

Open
1 of 3 tasks
MrKou47 opened this issue May 11, 2018 · 6 comments

Comments

@MrKou47
Copy link

MrKou47 commented May 11, 2018

  • Operating System: OSX
  • Node Version: v9.11.1
  • NPM Version: 5.6.0
  • webpack Version: 3.7.1
  • transform-loader Version: 0.2.3

This issue is for a:

  • bug
  • feature request
  • modification request

Code

import React from 'react';
import fs from 'fs';
// other code...
CLI Command
$ webpack
webpack.config.js

I set .babelrc modules: false,because i want to parse module system by webpack complier.

and i both set webpack target: 'web'

    const babelLoaderOptions = {
      presets: ['react', ['es2015', { modules: target === 'web' ? false : 'commonjs' }]],
      plugins: [
        'transform-object-rest-spread',
        'transform-class-properties',
        'transform-async-to-generator',
        'transform-es3-member-expression-literals',
        'babel-plugin-transform-es3-property-literals',
        'babel-plugin-ramda',
      ],
      cacheDirectory: true,
      babelrc: false,
    };
ERROR in ./src/mselfservice/components/Contract.js
Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    at Parser.pp$4.raise (my_project/node_modules/acorn/dist/acorn.js:2748:13)
    at Parser.pp$1.parseStatement (my_project/node_modules/acorn/dist/acorn.js:796:16)
    at Parser.pp$1.parseTopLevel (my_project/node_modules/acorn/dist/acorn.js:703:23)
    at Parser.parse (my_project/node_modules/acorn/dist/acorn.js:548:15)
    at parse (my_project/node_modules/acorn/dist/acorn.js:5279:37)
    at module.exports (my_project/node_modules/falafel/index.js:22:15)
    at my_project/node_modules/static-module/index.js:45:17
    at ConcatStream.<anonymous> (my_project/node_modules/concat-stream/index.js:37:43)
    at ConcatStream.emit (events.js:185:15)
    at finishMaybe (my_project/node_modules/readable-stream/lib/_stream_writable.js:620:14)
 @ ./src/mselfservice/routes/index.js 12:0-55
 @ ./node_modules/babel-loader/lib??ref--1-0!./src/mselfservice/client.js
 @ ./src/mselfservice/client.js-exposed
 @ multi ./src/mselfservice/client.js (webpack)-dev-server/client/index.js

Expected Behavior

no error

Actual Behavior

throw error

How could i fix this? Does transform-loader only support COMMONJS js file?

@TrejGun
Copy link

TrejGun commented Jul 27, 2018

same here

@alexander-akait
Copy link
Member

PR welcome

@TrejGun
Copy link

TrejGun commented Jul 27, 2018

any idea where to start?

@TrejGun
Copy link

TrejGun commented Jul 27, 2018

ok so i have found workaround
webpack.config.js

  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: {
          babelrc: false,
          presets: [
            [
              'env',
              {
                modules: false,
              },
            ],
            'stage-0',
            'react',
          ],
          plugins: [
            'react-hot-loader/babel',
            'transform-runtime',
            'transform-async-to-generator',
            'transform-decorators-legacy',
            'transform-function-bind',
            'transform-class-properties',
            'lodash',
          ],
        },
      }],
    }, {
      test: /\.brfs\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'transform-loader?brfs',
      }],
    }],
  },

so i just added additional loader for files with double extension .brfs.js

@romanlex
Copy link

romanlex commented Feb 18, 2019

@TrejGun your workaround doesn't work for me((

my rules section in webpack config

          {
            test: /\.jsx?$/,
            loader: require.resolve('babel-loader'),
            exclude: /node_modules/,
            options: {
              cacheDirectory: true,
            },
          },

          {
            test: /\.brfs\.js$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'transform-loader?brfs',
              },
            ],
          },

          {
            test: /node_modules\/(pdfkit|brotli|linebreak|png-js|unicode-properties)\//,
            loader: 'transform-loader?brfs',
          },

          // `fontkit` needs special treatment because it needs both `browserify` and `babelify`:
          {
            test: /node_modules\/fontkit\//,
            use: [
              { loader: 'transform-loader?brfs' },
              {
                loader: 'babel-loader',
                options: {
                  presets: ['env'],
                  plugins: ['transform-decorators-legacy', 'transform-class-properties'],
                },
              },
            ],
          },

          {
            test: /node_modules\/unicode-properties\/*\.json$/,
            use: 'json-loader',
          },

@blikblum
Copy link

blikblum commented Mar 2, 2019

This bug occurs because to support es modules, is necessary to pass parserOpts option to brfs. Unfortunately the way to accomplish that (with local transform) is buggy

I managed to workaround by saving the transform to a file and passing the relative path as option:

// module-brfs.js
const brfs = require('brfs')

module.exports = function moduleBrfs(resource) {
  return brfs(resource, {
    parserOpts: {
      sourceType: 'module'
    }
  })
}
// webpack.config.js
{ enforce: 'post', test: /pdfkit[/\\]js[/\\]/, loader: "transform-loader?../../../module-brfs" }

With this setup, the error does not occurs and brfs is ran but unfortunately it does not support when fs is imported as an es module at all.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants