react-with-direction icon indicating copy to clipboard operation
react-with-direction copied to clipboard

Impact babel-plugin-transform-replace-object-assign

Open sivaraj-v opened this issue 5 years ago • 6 comments

i getting the following error while importing DateRangePicker lib.

Configuring module specifier with a string is no longer supported. Configure with { "moduleSpecifier": "object.assign" } instead of "object.assign".

ERROR in ./node_modules/react-with-direction/dist/proptypes/brcast.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: C:/work/POC/pq-client-develop/node_modules/react-with-direction/dist/proptypes/brcast.js: Configuring module specifier with a string is no longer supported. Configure with { "moduleSpecifier": "object.assign" } instead of "object.assign". at PluginPass.exit (C:\work\POC\pq-client-develop\node_modules\babel-plugin-transform-replace-object-assign\lib\index.js:23:19) at newFn (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\visitors.js:276:21) at NodePath._call (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\path\context.js:76:18) at NodePath.call (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\path\context.js:48:17) at NodePath.visit (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\path\context.js:117:8) at TraversalContext.visitQueue (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\context.js:150:16) at TraversalContext.visitSingle (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\context.js:108:19) at TraversalContext.visit (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\context.js:192:19) at Function.traverse.node (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\index.js:114:17) at traverse (C:\work\POC\pq-client-develop\node_modules\babel-traverse\lib\index.js:79:12) at File.transform (C:\work\POC\pq-client-develop\node_modules\babel-core\lib\transformation\file\index.js:516:35) at C:\work\POC\pq-client-develop\node_modules\babel-core\lib\transformation\pipeline.js:50:19 at File.wrap (C:\work\POC\pq-client-develop\node_modules\babel-core\lib\transformation\file\index.js:532:16) at Pipeline.transform (C:\work\POC\pq-client-develop\node_modules\babel-core\lib\transformation\pipeline.js:47:17) at transpile (C:\work\POC\pq-client-develop\node_modules\babel-loader\lib\index.js:50:20) at C:\work\POC\pq-client-develop\node_modules\babel-loader\lib\fs-cache.js:118:18 @ ./node_modules/react-with-styles/lib/withStyles.js 50:14-67 @ ./node_modules/react-dates/lib/components/CalendarMonth.js @ ./node_modules/react-dates/lib/index.js @ ./node_modules/react-dates/index.js @ ./src/js/components/CourseInfo/courseInfo.jsx @ ./src/js/components/CourseInfo/index.js @ ./src/js/components/index.js @ ./src/js/index.js @ multi (webpack)-dev-server/client?http://0.0.0.0:9000 ./src/js/index.js

i stuck by this.

Ref: https://github.com/newoga/babel-plugin-transform-replace-object-assign

sivaraj-v avatar Aug 02 '18 14:08 sivaraj-v

Are you transpiling your node_modules, something you should never do?

ljharb avatar Aug 02 '18 17:08 ljharb

I'm quite sure that's the issue, so I'm going to close this.

ljharb avatar Aug 02 '18 17:08 ljharb

In webpack i'm excluding nodemodules and including @salesforce & @salesforce-ux only. i have attached my webpack babelloader & babelrc

let babelLoader = {
  test: /\.(js|jsx)$/,
  exclude: /node_modules\/(?!(@salesforce | @salesforce-ux)\/).*/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ['babel-preset-env', 'es2015', 'react', '@salesforce/babel-preset-design-system-react'],
      plugins: [require('babel-plugin-transform-object-rest-spread'), 'dynamic-import-webpack', 'transform-object-assign'],
      cacheDirectory: true
    }
  }
};

.babelrc
{
    "presets": [
        "latest",
        "react",
        "stage-1"
    ]
}

sivaraj-v avatar Aug 03 '18 10:08 sivaraj-v

and do those @salesforce packages that you're transpiling include any third party dependencies inside their node_module dirs?

ljharb avatar Aug 03 '18 22:08 ljharb

yes, they are transpling some node_modules.

module.exports = function buildPreset () { return { presets: [ require('babel-preset-env').default(null, { targets: { browsers: ['last 2 versions', 'ie 11'], node: '8.9.4', }, }), require('babel-preset-react'), ], plugins: [ require('babel-plugin-transform-object-rest-spread'), require('babel-plugin-transform-class-properties'), require('babel-plugin-transform-export-extensions'), ], }; };

@salesforce

  • babel-preset-design-system-react Ref for modules they included : https://www.npmjs.com/package/@salesforce/babel-preset-design-system-react

  • design-system-react folder includes there component.

@salesforce-ux

UI asserts will be taken care here.

i have enclosed the design system site of salesforce: https://react.lightningdesignsystem.com/getting-started/ npm install @salesforce-ux/design-system @salesforce/design-system-react

sivaraj-v avatar Aug 06 '18 06:08 sivaraj-v

I’m not sure how this problem could occur; but any time you get a babel config error from inside node_modules, it’s that your babel config is broken (ie, it’s transpiling node_modules). There’s nothing that this package or i can really do to fix this from the consuming package side - all we could do is make a change to avoid that specific error, but it wouldn’t fix the root problem.

ljharb avatar Aug 06 '18 15:08 ljharb